Can autolayout layout this (diagram attached) automatically?

autolayout, interface-builder, ios

Solution

In this case you should be able to get most of the layout work done automatically, but with a couple slight adjustments upon rotation.

What I would suggest is to contain views A, B, and C in another `UIView`. That way, the orientation-dependent layout is separate from the flexibly-sized layout. It also makes the layout a lot simpler to code!

Then you lay out the square view and the container view somewhat like this:

H:|-10-[squareView]
V:|-10-[squareView]
H:[containerView]-10-|
V:[containerView]-10-|
squareView.width == squareView.height

Notice that the square view is always aligned with the left and top of the superview, while the container view is aligned with the bottom and right. For a portrait orientation, you would add these constraints:

V:[squareView]-10-[containerView]
H:[squareView]-10-|
H:|-10-[containerView]

And for a landscape orientation, you would invert those constraints:

H:[squareView]-10-[containerView]
V:[squareView]-10-|
V:|-10-[containerView]

That's just for the overall layout, so the flexible sizing of the container view's subviews is up to you. Hope this helps!

Problem

To support both portrait and horizontal for an `UIView` like this: ``` +-------------------+ | +---------------+ | | | | | | | Fixed | | | | size | | | | Square | | | | | | | +---------------+ | Protrait | +---------------+ | | | Flexible C | | | +---------------+ | | +---+ +---+ | | | A | | B | | | +---+ +---+ | +-------------------+ +----------------------------------+ | +---------------+ +------------+ | | | | | Flexible | | | | Fixed | | C | | | | size | +------------+ | | | Square | +---+ +---+ | | | | | A | | B | | | +---------------+ +---+ +---+ | +----------------------------------+ Horizontal ``` Do I need to manually re-position the sub-views in `willRotateToInterfaceOrientation`? Or can `Autolayout` do it automatically for me? - `B` is a button always stays at lower right - `A` is a button positioned relatively to `B` (preferably align to left side of `C`) - `C` is for text, size is flexible - `A` and `B` is below `C`

Original source