CODEWITHSUNDEEP
iosautolayoutsize-classes
Antonio Giungato
Antonio Giungato

Reputation: 145

UICollectionView change flow direction on rotation

Compact Height

Compact Width

Hey, I'd like to obtain what you see in the pictures: in Compact Height mode (landscape iphone) both the red and the blue view have to take all screen vertically and half the screen horizontally. In Compact Width mode (portrait iphone)they have to take all the screen horizontally and half the screen vertically. Space between views should be same size in both modes.

I used to think I have to use size classes and auto-layout constraints, but everything I tried failed miserably.

Maybe I have to use a UICollectionView and change flow direction based on orientation (if that is even possible)?

Upvotes: 0

Views: 201

Answers (1)

Mike Sand
Mike Sand

Reputation: 2770

A collection view is probably overkill, because you don't want scrolling and that's the whole point of a collection view--by the time you do the sizing to stop it you'll have done all the work necessary to set a non-scrolling layout.

This is possible with Size Classes in IB. First, In general you will probably find it helpful to name the views in the Document Outline on the left in IB. You will also want to use this outline rather than try to grab the tiny constraint H-lines.

  1. Set up all the constraints except 1) constraints linking the OrangeView and BlueView to each other, 2) the constraints linking the OrangeView to the top and left(leading), and 3) The constraints linking the BlueView to the bottom and right (trailing).
  2. Change the size class setting at the bottom to w-Compact and h-Any in the funky box system. Now we're designing for a compact width, so views on top of each other.
  3. Create a constraints for vertical space for BlueView.bottom to OrangeView.Top. Also create constraint for OrangeView to superview.leading (or ledaing,margin) and BlueView to superview.trailing.margin. If you select any one of these constraints and look at the Size Inspector on the right (the ruler) you should see an "installed" checkbox not selected, and below that a w-Compact h-Any and another installed box, this one selected.
  4. Now, while keeping the constraint selected just to see what happens, change the sizeClass selector at the bottom to w-Regular h-Any. Notice that in the Document Outline to the left, it should get grayed out.
  5. Now we are designing for regular, so side-to-side. Add constraints linking the views for horizontal space, BlueView.trailing to OrangeView.leading. Also link OrangeView.top to the superview.top or top aligned to BlueView.top, and same for bottoms. You can manually edit the frame first; if not, IB will automatically fill in the wrong values, so edit these after you create them, and verify they are w-Regular and h-Any. With the ViewController selected, select "update frames" and the views should snap to their expected shape for the size class.

Let us know if this works for you or if it was unclear. Good luck!

Upvotes: 1

Related Questions