iOS 7 Auto Layout Y Position/Height Missing Constraint

11
votes

I'm trying to design a view for an iOS 7 iPhone application using Xcode 5.1.1. I am targeting iPhone 4s and 5+ view port. Here is my view:

View with problems

The purpose of this view is to act as the main menu for the application. The ImageView is the app's logo and each button is an option. The trouble I'm having is trying to get the correct constraints put on the views so that everything will shrink height-wise from the iPhone 5 to 4s. No matter which combination I try, I always end up with "Need constraints for: Y position or height." under Missing Constraints and an incorrect height under Misplaced Views for the image and all buttons.

If I try to use the "Add missing constraints", Xcode makes the height for all of the buttons the same with the exception of the last button. The last button just shrinks down to the text.

What am I missing to get this to work correctly? Thanks!!

EDIT: Based on the feedback, I have made the following constraints:

Image View: Pinned to Top/Bottom/Leading/Trailing Superview. Pinned Height. Bottom Space to Yellow Button

All Buttons: Equal Height to each other. Based on the generated constraints, seems like all of the other buttons look to the height of the Yellow Button.

Yellow Button: Top Space to Image View, Trailing/Leading Space to Superview, Bottom Space to Red Button

Red Button: Top Space to Yellow Button, Trailing/Leading Space to Superview, Bottom Space to Green Button

Green Button: Top Space to Red Button, Trailing/Leading Space to Superview, Bottom Space to Brown Button

Brown Button: Top Space to Green Button, Trailing/Leading Space to Superview, Bottom Space to Orange Button

Orange Button: Top Space to Brown Button, Trailing/Leading/Bottom Space to Superview

If I do that, everything looks good in the 4" in Retina view. If I switch it to the 3.5" view everything looks good and runs fine in the simulator. If I switch it back to the 4" view, the all of the buttons but the yellow get misplaced with a slightly smaller height:

Messed up heights

Not sure what is causing that. I can also upload a copy of my Xcode Project if that helps.

1
iosiphoneautolayout
Add top to ImageView, bottom to last button then select the view which you'd like to shrink and add "Equal height" to each of them. – Lord Zsolt
I generally avoid the add missing constraints button, it does what it thinks is best and about half the time gets it wrong or adds more than it needs to. The best thing to do is to remove all constraints editor -> resolve auto layout issues -> remove all constraints and start over. If / when Xcode complains decide wether you want to Xcode to update the frame or update the constraint. Read the error, it will tell you what it thinks is missing and then add it yourself. – Brandon

1 Answers

8
votes

It looks like you want the height of all the buttons to be equal, it also looks like the imageview has a known height as well. This should work for you:

1: Pin all the elements 0 px from the top, left, right, and bottom of the view next to them. For the buttons it will be the button above and below on the y axis, and the superview on the x axis.
2: specify a height for the imageView.
3: command click and select all the colored buttons and pin their heights equally. Editor -> Pin -> Heights Equally.

Because autolayout knows where the imageview starts (0 px from the top of the superview) and it knows the height, it will know where to place the top of the yellow button. On the bottom it knows that the orange button should be pinned to the bottom. The only thing left for Autolayout to figure out is how tall each button should be which it will do based on the equal height constraint.

Edit - more detailed instructions with screenshot

For step 1 select the top imageview and choose editor -> pin -> and then one at a time add a leading (generally left in most languages), trailing, top, and bottom. As seen below, or you can use the button on the bottom, or you can use the pin button (6 from the right) on the bottom to add them wholesale. I suggest using the pin button, it's faster. click the little dotted lines to select that constraint to be added.

enter image description hereenter image description here

Step 3 is to pin the heights equally so select all your colored views and pin the heights equal. Since the top element (Imageview) is pined to the top and has a known height, and the bottom is pinned to the bottom of the screen, the rest of the views become like the folds of an accordion, stretching and shrinking to fill the rest of the available space. The Equal widths constraint ensures it looks right. Without it some their are multiple solutions for how big each view should be so you'd likely end up with some small, some big, and some that might not be visible.

enter image description here