CODEWITHSUNDEEP
iosuiimageviewautolayoutnslayoutconstraint
alexander
alexander

Reputation: 149

Uiimageview autolayout issue

I have this images views:

enter image description here

I want that for every device that the distance between the first imageview and the left side it's the same , then the distance between the first imageview and the second image view it's the same and the distance between the second imageview and the right border it's the same. Essentially It must grow their width according to the screen size of the device , but I don't be able to do this by autolayout on storyboard.

Can you help me?

Upvotes: 1

Views: 209

Answers (4)

Janmenjaya
Janmenjaya

Reputation: 4163

Try the auto layout in below mentioned way

Suppose your two image views are imageVw1 and imageVw2 Consider imageVw1 is left one.

So put following constraints for imageVw1

  1. Leading constraint with main container view.
  2. Vertical constraint with main container view.
  3. Fixed height Constraint.
  4. Horizontal constraint to imageVw2.

Similarly constraint for imageVw2

  1. Trailing constraint with main container view.
  2. Vertical constraint with main container view.
  3. Fixed height Constraint.
  4. Horizontal constraint to imageVw2.

IMPORTANT : Provide equal width constraint to both imageView. (this constraint is for assigning equal width for both the image view. Else we need to give variable width, but i guess you need both image would be of equal width. So just assign equal width constraint).

See output for 6sPlus and 5s.

Screenshot for 6sPlus device

Screenshot for 5s device

Upvotes: 1

Gowry
Gowry

Reputation: 11

What you need here is setting equal widths property for your left and right images. This can be done by selecting two images at the same time and by checking 'Equal widths' flag. You should also pin the leading space of left image to view with 'x' offset and pin the trailing space of left image to 'x' offset to right image. Also pin the trailing space of right image to 'x' offset to the view's trailing.

If the image view's super view is a scroll view, you will have to set the content size property of the scroll view. May be you can go through this link. Adding a view to a scroll view that will stretch to fill available width

Upvotes: 0

Rikh
Rikh

Reputation: 4232

First imageView add a leading of lets say 10. And then between the second imageView and first imageView add a spacing of 10. Add a trailing space of 10 units of the second imageView to its superView. Now set second imageView to have an equal width and equal height to first imageView.

Upvotes: 0

Spidvmp
Spidvmp

Reputation: 283

Make a leading connection between left image and the view, left side. Make a trailing connection between the right image an the view, right side. Make an horizontal spacing connection between the images. Make a connection over one image and select aspect ratio and repeat it in the other image. Make connections to align, y position, etc

Upvotes: 0

Related Questions