Can autolayout layout this (diagram attached) automatically?

Question

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

Answer 1

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!