CODEWITHSUNDEEP
iosobjective-ciphoneswiftautolayout
Peter Pik
Peter Pik

Reputation: 11193

Center 4 images with constraints autolayout

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:

enter image description here

image of the constraint options on image 1:

enter image description here

image in simulator:

enter image description here

/// MY TRY ////

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

enter image description here

result:

enter image description here

Upvotes: 8

Views: 2251

Answers (4)

adeelbutt
adeelbutt

Reputation: 1

If you want the images to always keep their fixed size and dynamically sized spaces between them then very easiest way first you drag the four UIView in your StoryBoard set constrain top left right and height for all the UIViews and give the equally width to all the UIViews(drag from one UIView to another and sets its equally width repeat this work for all the UIViews).

Image about layouts

Secondly you have to drag your images set in these UIViews and sets their constrain height width and centre horizontal in container and centre vertically in container.

In last set the background colour of all UIViews default(white) you get the result it will work....i assure.

Screenshot of Xcode

Upvotes: 0

zisoft
zisoft

Reputation: 23078

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.

enter image description here

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:

enter image description here

  • 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.

Upvotes: 8

Jim Tierney
Jim Tierney

Reputation: 4105

The objects on your storyboard require at least 4 constraints per object.

When there's orange lines around the UIImageView object like appears in your question, this means a constraint is missing, or conflicting and can often mean the image does not display at runtime like you'd expect.

In the first instance I recommend you select all objects and 'clear constraints', then start again.

Although not exactly the same, here is a link to an answer which explains the auto-layout constraints in a bit more detail. Once you understand it, auto-layout can be very powerful.

>>Link to similar auto-layout issue - iOS CustomTableViewCell: elements not aligning correctly<<

I hope this helps

Upvotes: 0

Omkar Guhilot
Omkar Guhilot

Reputation: 1698

For the first image add a leading space to superview and for the last image add a trailing space to superview and add vertical spacing between first and second, second and third, third and fourth and also set horizontally center within the container to each of the images

Upvotes: 0

Related Questions