set the button with autolayout and constraint usage

advertisements

There are 4 buttons in the screen. I want to place all the 4 button in the screen with the same distance as shown in the image in all the screen i.e 4s,5s,6 and 6plus.

The constrain which i added

Button 1 :
Top , leading and trailing

Button 4:
Bottom , leading and trailing

Button 2 :
Leading
trailing
top to button 1

Button 3:
    Leading
    trailing
    top to button 2
    bottom to button 4

But i am not able to achieve button 2 and button 3 with the same distance. I want to achieve this only by using autolayout and constraint.

Please advice.


Complete solution with Autolayout.

As, you are using even number of buttons in your view so you need to add a UILabel with height 2 on the centre(X & Y) position of view. The following constraints will work in all the screen i.e 4s,5s,6 and 6plus.

[Note : In case of odd buttons the centre BUTTON will be used in place of label]

Constraints:

Label : 1. Center-X 2. Center-Y 3. fix height and width (height = 2 , width = no limit)

Button 1:

  1. Bottom to BUTTON 2 (e.g. 70)

  2. Center-X

  3. fix height width

Button 2:

  1. Top to BUTTON 3 (e.g. 70)

  2. Bottom to LABEL (e.g. 34)

  3. Center-X

  4. fix height width

Button 3:

  1. Top to LABEL (e.g. 34)

  2. Bottom to BUTTON 4 (e.g. 70)

  3. center X

  4. fix height width

Button 4:

  1. Top to BUTTON-3 (e.g. 70)

  2. Center-X

  3. fix height width