how to set autolayout for different devices by using storyboard

Question

I have an Iceland map which contains 9 different area buttons. Every button has a different size. I want the map can show the same on different devices. I only know to set the central button with horizontally in container and vertically in container. However, other buttons, no matter how I set the constraints, they will be a mess on iphone SE or iPhone Plus. (I use iphone 8 as normal)

Can anyone teach me how to set the constraints for the 8 left buttons? thank you!

Answer 1

Something I've done in the past is used a single control as the anchor for all the others.

Basically this means taking the centre button and anchoring it to the middle of the container view (centre horizontally and vertically)

I then constrain the middle/top and bottom controls to it (vertical space and horizontally centred)

From there each control in the row is then constrained against these elements (horizontal spacing and vertically centred)

You might also consider constraining the sizes to the centre control as well, so all the controls share the same size. For me, this means constraining the width of the control to a set value and then applying an aspect ratio to the height. I do this because then I can change the value of the width constraint and ALL the control will change size

Because iPhone 5s, iPhone, iPhone+, iPhone X all share the same "sizing classes", it makes it some what more difficult (as you can't apply traits - but you can do it for iPad and iPhone ;)).

At this point, I would bind the centre controls width constraint (and the height if you need it) to the source code and when the view is loaded, determine the device screen size and make minor adjustments to the constraints values.

If you would prefer a complete "storyboard" solution, you could constraint the width of the centre control to the super view and apply a modifier

Using the "device" templates from the storyboard, layout one a iPhone 5s and iPad Pro

The long and short of it is, you have "options". You might even consider using UIStackView to define the rows, personally I find it easier to constraint the controls to a central anchor point - but that's my experience and your needs might differ

Answer 2

The best thing for this is a vertical UIStackView nested with 3 horizontal stacks

MainStackView constraints

centered vertically & horizentally , width & height propotional to screen

then drop 3 stackViews inside it set axis = horizontal and drop 3 Buttons for every inner stack

Note: distribution is fillEqually for all the stacks , spacing = 10

look to this Demo