Center 4 images with constraints autolayout

Question

I'm new to autolayout and i'm kind of stuck on how to center these 4 images in all different devices like it looks on the images. i've tried to apply the auto configured constraints but then it will have that distance and that does not fit on all devices. So my question is what constraints do i need to apply on all different images in order to make all image centered with same distance?

Here is how my cell in storyBoard looks like:

image of the constraint options on image 1:

image in simulator:

/// MY TRY ////

Here you can see the constraints that i've added and the result?

result:

Answer 1

Your approach is almost correct, it simply lacks size constraints for the images.

If you want to dynamically resize the images and keep the space between them constant, put constraints on the images for the width to be >=20(or any other value, depends on your needs) and a constraint for keeping the aspect ratio. Then ctrl-drag from UIImageView1 to UIImageView2 and set a constraint for equal widths. Repeat that from UIImageView1 to UIImageView3 and from UIImageView1 to UIImageView4.

---

If you want the images to always keep their fixed size and dynamically sized spaces between them you need another approach:

The trick here is to place 3 empty UIViews between the UIImageViews so that it looks like this:

• Set constraints to the top for all views
• Set constraints to the left and right for UIImageView1 and 4
• Set constraints for all UIImageViews to the same width
• Set constraints for all UIViews between the UIImageViews to the same width
• Set constraints for all the distances between the views to 0
• Set the width constraints for the UIViews to >= 0

This way makes the empty UIViews between the UIImageViews to resize dynamically and all the same width.

I hope you get the idea.