How do I center 4 uibuttons with equal distance from each other?

问题

I have 4 uibuttons. Each button MUST be 100x100. I want to center the 4 of them in the center of my screen (horizontally), but put them down vertically. I have no idea where to start, but i've heard stackviews might work? Not sure. I tried using basic constraints, but i was unable to get them to work.

here is what im trying to get:

回答1:

Step 1 :- take 4 button in your Storyboard. Button1 , Button2 , Button 3 , Button4

Step 2 :- Give Fixed Height and width to All buttons .

Step 3 :- All 2 - 2 button's pair in 2 stackview.

Step 4 :- Set UIStackview Property for both .

      Distribution -> Fill Equally
           Spacing -> 5 (as per your requirement)

Step 5 :- Add both Stackview in one Stackview

Step 6 :- Set Distribution = Fill equally Spacing =5 in main stackview (set According to your requirement)

Step 7 :- Now set Constrain to main stackview

      center Horizontally in container

      center vertically in container

        and select Update Frame.

Step 8 :- It's time for Output for All device .

I hope it will be helpful for you.

回答2:

There are many ways, look one:

Idea:

First put all buttons equals width and height constraint, and to one of the button add constraints to width and height 100.
For each button center X/Y with respect to his parent. Constraint: Align Center X, Align Center Y
Add offset to the constant (In interface builder):
- Top Left button: Offset X of -60, Y of -60
- Top Right button: Offset X of 60, Y of -60
- Bottom Left Button: Offset X of -60, Y of 60
- Bottom Right Button: Offset X of 60, Y of 60.

Quick Example (I did the constraint in IB): https://github.com/Abreu0101/ButtonLayout

========

Another option that you have is using transparent view's between the buttons, and center this view's (transparent), and add constraint to the buttons base on these views (Sometimes that's I tricky that I used, but all depends on what you need).

回答3:

You can also try this without using UIStackView (if you need this to be work on < iOS 9)

来源：https://stackoverflow.com/questions/37331644/how-do-i-center-4-uibuttons-with-equal-distance-from-each-other

标签

ios

swift

uibutton

autolayout

constraints