Constraints not resizing properly for all screen devices

Question

I am trying to do the constraints for these horizontals button. I want the ratio of size of buttons to be the same, and the icons to be of equal widths and heights of each others.

Any idea of how i can do that so these buttons resize properly according to the screen size? Thanks!

Answer 1

Make groups of UIView containing the icon and text. Lets call this container view

Place all the n container views inside your storyboard as you would like them to appear. Now:

• To the left most container view add a leading and bottom constraint to the super view.
• Now to the second container view add a leading space of 0 (or anything you want). Control + drag your second button to the first button. Hold down shift and select equal width, equal height and align bottom.

Now apply the same constraints as your second container view to all your n - 1 container view. n being the number of container view you want to add. Now to your last (nth) container view add, one extra constraint, which would be a trailing space to the superView. Now all your container view ought to have an equal width that will be determined depending on the width of the screen!

If you want to have a specific height or aspect ratio to all your container view. Just add the height or aspect ratio constraint to your first container view and all your subsequent views will get updated accordingly.

OR

If you wish for the height to be dependent on the screen size and not maintain a specific aspect ratio, then you will have to give the first container view a equal height to the whole view with a specific multiplier like 0.15.

You will also have to add appropriate constraints to the icon and label present inside each UIView

Edit: A much easier thing for you to do would be add the icon as an image to the UIButton and add the text as you would normally to the UIButton. The UIButton will appear quite similar to the screenshot you posted. And then just apply the constraints I mentioned above.

Answer 2

Set the width and height as ratio of the SuperView. Set if for one button and for the remaining buttons make the height and width equal to the first button for which you defined the height and width in terms of superview height and size. Use this SO Post to see how to set height and width as ratio of the superview.

Hope this helps.

Answer 3

It's Simple because your All buttons are in single Direction so you can use StackView. Just simple first apply the equal hight and equal width to all your buttons

now select all the buttons and add them in the stackview

it will be in the right side bottom. (with the constraint icon)

now simple Apply add missing constraint. it will done the work by own and gives better result. (but take care here apply it from the all views in View Controller Section)

And now Bingo try this every Size will show same.

This will work same in simulator also.

Answer 4

The solution is very simple.

See the image below (5 buttons)

• The first (blue) button is pinned to the left and bottom of the superview
• Each of the other 4 buttons (red, black, green, pink) are top aligned to the first (blue) button
• Each button is using a horizontal spacing to the previous button (with a constant of 0). So red button has 0 horizontal spacing to blue, black has 0 horizontal spacing to red, etc
• The Last (pink) button is also pinned to the right of the superview
• Finally all 4 other buttons are set to have same width to the first (blue) button

That's it!

As for you icons, all you need is to set them to have same width & height to the first icon you have