Search code examples
iosxcodeuiviewautolayoutconstraints

iOS: Autolayout stretching height of UIView too much (Xcode 8, Swift 3)

At the bottom of the screen I have a view with a button to change color as shown here: iPhone 7 image

However, after resetting all constraints to suggested constraints, everything in the view is fine except the UIView on the bottom, when run on iPhone 7 Plus: iPhone 7 Plus image

I'm not exactly sure what constraints to add in order to make the image the normal height. Any help is appreciated, thanks.

Solution

  • The superview (Bottom view) should have these constraints:

    1. Bottom space to container (outer view)
    2. Leading space to container (outer view)
    3. Trailing space to container (outer view)

    And the button containing image should have the following constraints:

    1. aspect ratio
    2. Center Horizontally to container (bottom view)
    3. Bottom space to container (bottom view)
    4. Top space to container (bottom view)

    Setting the aspect ratio of the button will not make the button look ugly (distorted aspect ratio) on iPhone 7 Plus.