2

I have a requirement to create 3 square buttons at bottom of the page. All of them must be aligned and their size should be square.

So far, I have created a horizontal stackview and created autolayout constrains 50 from the left, 50 from the right, 10 from the bottom and set the stackview height as 60.

How can I create square buttons, since the stackview subview width is dynamic and determined at run time?

How can I set an equal aspect ratio for these three buttons?

circular image issue due to improper height

Paulw11
  • 108,386
  • 14
  • 159
  • 186
Feroz Siddiqui
  • 3,840
  • 6
  • 34
  • 69

2 Answers2

10

Don't set the stack view height; let the content determine that.

You haven't said exactly how you want the buttons laid out, but I assume you want them equally distributed.

  1. Put the buttons in a horizontal stack view
  2. Constrain the leading, trailing and bottom edges of the stack view to the superview
  3. Set the stack view's alignment to "Fill" and distribution to "equal spacing"
  4. On each button, create an aspect ratio constraint between its width and its height of 1:1
  5. If you want a minimum height for the buttons, set a >= height constraint on one of them
  6. If you want a fixed height for the buttons, set a = height constraint on one of them
Paulw11
  • 108,386
  • 14
  • 159
  • 186
  • I am able to set first two button aspect ratio as 1:1 but as i move to third one the content is going outside the page. If i set stackview x coordinate as 0,0. then its asking me to remove aspect ratio of first two button – Feroz Siddiqui Oct 14 '17 at 22:27
  • Have you created the constraints and settings exactly as I described? ie. Get rid of the stack view height constraint and create only the constraints I listed (You can add a constraint between the top of the stack view and other content if you need to space it from other content)? I just used these exact steps in order to create this answer and it works correctly. – Paulw11 Oct 14 '17 at 22:29
  • yeah i have cleaned up code and follows your steps its working. thanks a ton – Feroz Siddiqui Oct 14 '17 at 22:40
  • aspect ratio! may you be blessed –  Nov 28 '18 at 23:13
0

I think the only thing you are missing is setting the Distribution in Attributes Inspector on your Stack View. Set it to distribute equally as shown in the image below:

enter image description here

To set the height, you simply need to set a height contraint on each button. Click the tie fighter looking icon and set the height for each:

enter image description here

Martin Muldoon
  • 3,388
  • 4
  • 24
  • 55
  • fill equally will give me equal width how to set the equal height – Feroz Siddiqui Oct 14 '17 at 22:17
  • check the image in question i am not getting circular button becoz width is same but height is not and i m not able to set aspect ratio – Feroz Siddiqui Oct 14 '17 at 22:19
  • I see your issue. Seems to be a bug. Clear your leading and trailing contraints on the Stack View. Then set a constraint to set the StackView Horizontally in the container. Then, in Attributes Inspector set the Stack View Spacing Attribute as you like. – Martin Muldoon Oct 14 '17 at 22:40