Different layouts in portrait and landscape mode

Question

Let\'s assume I have this layout design on an iPad Portrait.

But I would like to have it this way when the iPad is in landscape:

Is it possible to

Answer 1

iPAD don't have the size class for Landscape mode. I think the reason is that it is not needed in most of the cases. However one can activate and deactivate constraints when device orientation change like the accepted answer.

The following can be helpful for iPhone user.

Yes this is possible in interface builder with autolayout and size classes. You will not need to code.

First you select size class wAny hAny

Here is how to select size class.

Add two views in your view controller. Red view on top and blue view below. Just like your first image.

Constraints on red view are:

• Top space to super view
• Leading space to super view
• Trailing space to super view
• height = 50

Constraints on blue view are:

• vertical space to red view
• leading space to super view
• trailing space to super view
• bottom space to super view

This is all set for Potrait mode.

Now you change size classes to wAny hCompact(The first two column in first row). this class is for iPhone landscape.

Now you have to use install and uninstall concept.

Constraints that will change for red view:

• Uninstall its height constriant for (wAny hCompact) size class as:

• Similary uninstall its Leading constraint. Add two new constraints to this red view in this class:
• Bottom space to superview
• Width constraint = 50

This will make red view to right side with 50 width.

Now constraint change for blue view:

• Uninstall Its vertical spacing, trailing space.

Add two new constraint:

• Vertical space to super view
• Trailing space to red View

This will attach red view left of blue view.

Hope it work for you.