CODEWITHSUNDEEP
iosios7autolayout
RenegadeAndy
RenegadeAndy

Reputation: 5690

Some specific help using iOS 7's Autolayout

I am making a simple iOS 7 application - one of the first I have tried and am attempting to use the autolayout feature to easily handle the layout of my UI as it is pretty simple and I need to support portrait and the 2 normal flavours of landscape modes.

This is my effort so far:

First autolayout editor pins

I do not think I have done this correctly - basically I have my title, a label in the middle for the timer and my start timer button.

I want all of these elements to be on show during landscape - but would like my start timer to pretty much sit at the bottom of the screen in anymode - and fill the landscape width - I want the timer as big as possible in between the title and button.

This app looks 'ok' on portrait, on landscape the button disappears probably below the screen somewhere - but thats the kinda problem I want to solve by using the autolayout - I am blatently just not using it properly.

Please can you help guide me on where I have gone wrong.

Upvotes: 0

Views: 112

Answers (1)

Matthias Bauch
Matthias Bauch

Reputation: 90117

Your main problem is that all your vertical constraints start at the top of the viewController. This will push the button into the area outside of the view. If you run the app and rotate to landscape Xcode should tell you that it can't satisfy all constraints. You try to position the button 432 pt. from the top and 63 pt. from the bottom at the same time, and that's just impossible in landscape (or 3.5 inch portrait)

Your constraints should generally be between your different user interface elements. Don't layout everything to the edge of the rootView.

The horizontal layout is straight forward, and doesn't really matter in this case; so we'll skip it. Lets talk about the vertical layout:

The top label should basically be the only element that has a constraint to the top of the rootView.
The button should have a constraint to the bottom of the rootView.
The label in the middle should (in my opinion) be vertically centered in the rootView. Vertically centered is the easiest thing to do, so I'll stick with that.

To prevent overlapping I would then add two additional "greater than or equal" constraints with 20 pt between the middle label and the top label and the bottom button.

All in all it should probably look more like this (for clarity I only highlight the vertical constraints):

enter image description here

And in landscape:

enter image description here

Upvotes: 1

Related Questions