Search code examples
ios7nslayoutconstraint

iOS constraints: 4 Buttons

I would like to place 4 buttons on the screen. They should be all of the same height and width. The margin between the buttons should be 35px and the outter margin to the views border should be 20px.

Now the buttons should be scaling to the different sizes of the screen. But all my tries with the constrains have failed.

Does somebody know how to use them properly?

layout:

---------------
|             |
|   x     x   |
|             |
|   x     x   |
|             |
---------------

X are the buttons

Solution

  • If the result you want is the one presented below, please follow the steps:

    enter image description here enter image description here

    Always keep in mind this method. Design your view as-it-should-render in your storyboard (600x600) and then apply your constraints.

    • Position your four buttons as expected for a 600x600px. view:

    enter image description here

    • Select all buttons, then choose "Equal Width" and "Equal Height" constraint in the lower Constraint helper:

    enter image description here

    • Drag-n-drop from B1 to B2 with Ctrl key pressed, release and select "Horizontal Spacing". Do the same between B3 and B4.

    enter image description here

    • Repeat the previous step with B1/B3 and B2/B4 but choose "Vertical Spacing".

    • For B1, attach-it to 20px. from left and top bounds as presented below:

    Deselect Constraint to margins before applying constraint.

    enter image description here

    • Do the same for B2 (top/right), B3 (left/bottom) and B4 (right/bottom).

    You're all set, your view will now scale appropriately, no matter what's the screen size.