Autolayout is expecting a different height

Question

I'm struggling with autolayout in my iOS 7 project on Xcode 5. Let's say I want to show these buttons :

    Something
        -
        |                      10 pts fixed space from top
        -
     Button 1                  50 pts height on 4" display, reduce height if 3"5
        -
        |                      10 pts fixed space
        -
     Button 2                  50 pts height on 4" display, reduce height if 3"5

I layout my buttons in Interface Builder (with a storyboard).

Then I start adding constraints :

• The vertical spacing from "button 1" to "something"
• The leading space to container for "button 1"
• The fixed width for "button 1"

Problem is Autolayout is complaining about my button's, saying "Expected: height=30". Why ? I want a 50 pts button, why is this a problem ? Of course, I can fix this by adding a height constraint, but I want the height to be reduced if the height of the screen is reduced. And, if I run it, even on a 4" display, the button's height is set to 30, as autolayout said it "should be".. And I didn't even set the second button's constraints yet, which will make it even worse.

How can I achieve such a thing ? It seems really basic and I still don't understand what's going on.

Note that I could manually set all the heights in code, but I really want to avoid that.

Answer 1

What you can do for solving the vertical constraint issue is to give Equal constraints to your button1 and button2 and give a fixed vertical constraint to the something view and from your second button to the bottom of the superview.

So this way you won`t need to give a fixed height to any of them and the distance between them and other elements (something and bottom of superview) will be standard.

I hope this helps!

Answer 2

Ok, I think I made it.

Here is what I did :

• I set all my constraints in the storyboard, with the Retina 4" form-factor.

• Constraints for the something view : fixed height & width, fixed top space and leading space. This view is absolutely fixed.

• Constraints for button 1 : fixed vertical space to something view, fixed leading space, fixed width. 2 height constraints : 30 <= height <= 50.

• Constraints for button 2 : fixed vertical space to button 1, fixed leading space, fixed width. Also 2 height constraints : 30 <= height <= 50. And fixed bottom space to bottom layout.

All constraints have a maximum priority of 1000, except the last one (fixed bottom space to bottom layout), which is set at 900 !

That way, the buttons keep a height >=30 and move up, but get shrinked vertically because the other constraints are more important.

Thanks a lot to @VasiliyDeych and @P.Sami for their advice. It helped a lot.