1

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.

enter image description here

Wain
  • 118,658
  • 15
  • 128
  • 151
iOS developer
  • 131
  • 1
  • 1
  • 9
  • did you search for answers to this question? using a stack view or padding views? – Wain Apr 19 '16 at 09:42
  • http://technet.weblineindia.com/mobile/setting-up-equal-vertical-spacing-for-components-using-autolayout/ the best solution – Prashant Tukadiya Apr 19 '16 at 10:15
  • Possible duplicate of [Evenly space multiple views within a container view](http://stackoverflow.com/questions/13075415/evenly-space-multiple-views-within-a-container-view) – Bhavin Bhadani Apr 19 '16 at 12:11
  • @Wain yes i did.but the solution there are by using spaceview or by coding. I want to achieve this completely by autolayout and constrints. – iOS developer Apr 19 '16 at 14:11
  • @EICaptain Thank you for the comment.but the solution there are by using spaceview or by coding. I want to achieve this completely by autolayout and constrints. – iOS developer Apr 19 '16 at 14:12

3 Answers3

2

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

Mradul Mathur
  • 48
  • 10
1

That could be realized purely with Interface Builder:

If you want to support iOS versions before iOS9

  1. You need to use a hidden spacer UIViews (orange on the image below)
  2. Their heights should be equal to each other
  3. Distance between buttons and their adjacent spacer views should be set to 0

enter image description here

This gives you an ability to create adaptive layouts for every device type (if you will set the spacer's view height to be proportional to superview's height):

enter image description here

For iOS9+ just use UIStackView with vertical axis and desired distribution space

enter image description here

slxl
  • 635
  • 1
  • 10
  • 23
  • Why use elements that are not needed. Not a good way I think. – Bhavuk Jain Apr 20 '16 at 17:45
  • "hidden spacer UIViews" – Bhavuk Jain Apr 20 '16 at 17:49
  • @BhavukJain you might not believe but they are used for distribution. Don't try to nail a problem when there is no problem - UIViews are free, don't cause any performance hits, their usage in this case is clear, easy to support and doesnt require any hardcoded values or hundreds lines of code. – slxl Apr 20 '16 at 17:51
  • 1
    It's easier to do it without any hidden views, it makes your storyboard looks cleaner. Put a button in the center and give its vertical constant some value and then put all the buttons in reference to it with all of them having an equal spacing. Done! – Bhavuk Jain Apr 20 '16 at 17:56
  • 1
    I believe this approach would help if we want to have more control over the layout especially incase of animations. We can just use hidden views properties to animate the buttons.Also this provides easier way to play around the buttons positions. – Teja Nandamuri Apr 21 '16 at 19:35
0

Try like this,

your constraints should be like,

button 1 - top, leading & trailing or horizontal center in container.

button 2 - top, leading & trailing or horizontal center in container.

button 4 - bottom, leading & trailing or horizontal center in container.

button 3 - bottom, leading & trailing or horizontal center in container.

now for button 2 take, top constraint's outlet(ctrl+drag from constraint to class) and from button 3 take bottom constraint's outlet.

for example your outlet is button2Outlet & button3Outlet respectively.

so, from viewdidload,

CGFloat constantVslue = self.view.frame.size.height - (4 * buttonHeight) - 40 (top distance of button 1 + bottom distance of button 4); 

//40 is distance from top and bottom of 1st and 4th button respactively in my case (20+20) and in my case my button height is 30 so total 120.

CGFloat distance = constantVslue/3;

self.button2Outlet.constant = distance;
self.button3Outlet.constant = distance;

Hope this will help :)

Ketan Parmar
  • 27,092
  • 9
  • 50
  • 75