How to equally distribute UIButtons using Autolayout

纵然是瞬间 提交于 2020-01-05 07:51:11

问题


I just want my buttons to have equal spaces to each other and a fixed trailing and leading space. I am kinda Autolayout noob, so I don't have any clue how to solve this problem. I tried a lot of different configurations but nothing worked as it should. Any ideas how to solve this Issue ?

UPDATE

In year 2018 StackViews are the answer.


回答1:


To lay out several views that are proportionally spaced based on the orientation of a device, create spacer views between the visible views. Set the constraints of these spacer views correctly to ensure that the visible views are able to stay spaced apart based on the orientation of the device

Steps:

  1. Create the visible views.

  2. Create the spacer views equal to the number of visible views plus one.

  3. Alternate placing your views, starting with a spacer view.

  4. To space two visible views, place all of the views in the following pattern, starting from the left side of the screen and moving right:

spacer1 | view1 | spacer2 | view2 | spacer3.

  1. Constrain the spacer views so that their lengths are equal to each other.

  2. Create a leading constraint from the first spacer view to the container view.

  3. Create a trailing constraint from the last spacer view to the container view.

  4. Create constraints between the spacer views and the visible views.

The following example uses the steps in the above task to show how to position two views proportionally spaced. The spacer views are annotated for the example, but are normally left empty with no background. First, create the two views and place them in the storyboard.

Add the three spacer views—one to the left of the leftmost view, one between the two views, and one to the right of the rightmost view. The spacer views don’t have to be the same size at this time because their size will be set through constraints.

Create the following constraints for the spacer views:

  1. Constrain the width of spacer view 2 and spacer view 3 to be equal to the width of spacer view 1.
  2. Constrain the width of spacer view 1 to be greater than or equal to the minimum desired width.
  3. Create a Leading Space to Container constraint from spacer view 1 to the container.
  4. Create a Horizontal Spacing constraint from spacer view 1 to view 1. Set this constraint to be a less-than-or-equal-to constraint with a priority of 1000.
  5. Create Horizontal Spacing constraints from spacer view 2 to view 1 and view 2. Set these constraints to be a less-than-or-equal-to constraint with a priority of 999.
  6. Create a Horizontal Spacing constraint from spacer view 3 to view 2. Set this constraint to be a less-than-or-equal-to constraint with a priority of 1000.
  7. Create a Trailing Space to Container constraint from spacer view 3 to the container.

    These constraints create two visible views and three invisible views (spacer views). These spacer views automatically resize as the orientation of the device changes, keeping the visible views proportionally spaced, as shown in the following two figures:

This is the way apple also suggests to do in this example

In addition to this, You do these things in a buttons container view which is having those buttons and align that button container view in your view and keep leading and trailing constraints with equal relationship with same constant value. And add the remaining top and bottom constraints as those may be needed.

I have given same steps of the example here, because answer depending on links may not be preferable.




回答2:


If you are adding these button from xib then remove auto layout and set spring and struts from xib setting under autoresizing section



来源:https://stackoverflow.com/questions/25933555/how-to-equally-distribute-uibuttons-using-autolayout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!