How to do this simple thing with XCode's new Auto Layout feature?

Question

Im trying to do something that seems like it should be a no-brainer. But alas, im too dumb to figure this one out. So i need help.

I have an iphone simulator (with a vertical orientation). The main view has a subview (a blue UIView) that should be displayed in the bottom 25% of the screen. The final rendered screen would basically look like a white screen with the bottom section being blue.

I want the edges of the subview to hug the screen edge. But thats not the part I'm struggling with. The tricky thing is configuring the height of this subview (and the layout of its contents, if any) when I suddenly rotate the orientation of the simulator. If i do this, then everything looks odd.

I would also like to note that what I see in the Interface Builder (with Auto Layout enabled) looks nothing like the app when it loads in the simulator.

PS - for now i will keep playing around with this. maybe i will eventually reach a eureka moment.

* Updated with screen shots *

This is what my layout looks like in Interface Builder:

And this is what it ends up looking like in the simulator:

* Update 2 * Ok. After updating my post with the screenshots, it dawned on me that the simulator doesn't look like the 4" screen version (even though it does on my computer screen). After running the 4" simulator i can see the the layout just like the IB layout. But this makes me wonder why auto-layout wasn't "smart" enough to adjust for the smaller 3.5" screen.

Answer 1

You could simply turn off Auto Layout. Springs and struts can readily make your subview 25% of the superview's height.

Or, you can certainly stick with it, but you'll need to adjust the constraints in code. There's no way to establish such a constraint in the current version of Xcode. Set constraints in IB to pin the box to the bottom of the window and fix the height, setting an outlet for the height constraint. Then in -viewDidLoad, remove the height constraint and add a new constraint to the superview which expresses the height relationship you want.

This isn't to discourage you from learning Auto Layout, but to point out that it's a bit complicated, and that the constraint tools in IB are unintuitive and relatively weak. The WWDC video Introduction to Auto Layout is a good starting point.

Answer 2

It looks to me like you have a fixed height constraint from the top edge of the blue view to the superview that is pushing content down - conversely you may have a fixed height view above it that is smooshing things. Try pinning the top edge of the blue view to the superview and lowering the priority or changing it from an equality to a less than equal to constraint.

In IB in XCode you can change the canvas size for iPhone layouts, look for the single button on the right hand side that looks like a rectangle with arrows above and below, or inside it. In the screenshot below it is the leftmost button.