How can I use constraints AutoLayout with to specify a different layout on landscape vs. portrait without using code?

Question

I have an iPad app that features a login screen, with the login controls contained within a UIView.

When the iPad is in portrait orientation I have the Login UIView near the bottom and center of the app, pretty much right above where the keyboard will be, and the company logo is in a UIImageView centered across the top. I'm using AutoLayout constraints to keep the company logo gravitated to the top and right, and the Login UIView gravitated to the bottom and right.

_{(source: chattypics.com)}

When I rotate this to landscape, the effect is something like this:

_{(source: chattypics.com)}

I want it to look like this

_{(source: chattypics.com)}

So, I want the two elements to be side-by-side, and I want the Login UIView to be further to the right. The amount of spacing to the right of the UIView when in portrait mode is greater than I want for landscape mode, and the distance from the bottom is less than I want for Landscape mode. I could handle this via "center in container" instead, but that would also not work in Landscape mode.

I've used the technique detailed in this post to make things be "side by side" when in landscape mode, but I don't believe it will suffice here because I want the layouts within the "views" to also be different on rotation.

I can think of ways to pull this off programmatically, but I can't imagine this is all that unique a need, so is there some way using just constraints in IB to pull this off? Some "this is what constraints in IB were designed for" way, possibly dealing with priorities? Or do I just need to pull this off in code?

Answer 1

You could achieve such behaviour using different priorities for constraints in Interface Builder. For both views ("Company Logo" and "Login view") you need to set up "vertical center in container" and "horizontal center in container" constraints with some reduced priority. Next you need to defined "Vertical Space" and "horizontal space" constraints using rules with relations like "Less Than or Equal".

I've achieved such behaviour just using Interface Builder.

• Screencast demonstrating this in action.
• Source code on Github (I've set it up in iPhone only storyboard, but the idea is similar for iPad).

Also you could combine "less than or equal" with "greater than or equal" using different priorities to achieve best result.

Answer 2

instead of repositioning the elements, it looks like you just need to rotate them individually. Set them up in a container view, center the container view in the view controllers view. Then just set up the distance between the two views and setup the autorotation on them.