iPhone auto layout images arrangement issue

Question

I want to arrange 3 Images on iPhone & iPad using auto layout.

3 Images should rezise preserving aspect ratio, and width of all 3 images should be same. Same space from left and right sides for all 3 images.

See Example figure (Figure shows landscape and portrait mode) on this link:

Portrait: http://i.imgur.com/9KVXATE.png

Landscape: http://i.imgur.com/tDjj9K6.png

It is possible programatically getting width and height of screen/view but I want to do it using auto-layouts

Programatically:

//Inside this method
//- (void) didRotateFromInterfaceOrientation:
(UIInterfaceOrientation)fromInterfaceOrientation

//Main_View is the view in which the 3 images are kept
//ImageView1, ImageView2, ImageView3 are 3 image views

ImageView1.frame = CGRectMake(Main_View.frame.origin.x + 3, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));


ImageView2.frame = CGRectMake(ImageView1.frame.size.width + 6, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));


ImageView3.frame = CGRectMake(ImageView2.frame.size.width + ImageView1.frame.size.width + 9, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));

Main_View changes its size(width,height). Then (ImageView1 width) is (Main_View width / 3), It Preserves aspect ratio too.

Programatically it works perfect

And what is your question? How are you doing it at the moment? What doesn't work? — jrturton
Thank you jrturton for your replay let me more clarify Answer 1: I want to use storyboard autolayout constraints (mean arranging those images using autolayout on storyboard). Answer2: When screen rotates it will also manage same spacing and resize height and width respective to device screen. Answer3: When i am apply constraints on these images it's height and width not adjust according to device. — Kiran Patel

Sandeep Sandeep · Accepted Answer · 2014-05-17T12:41:18

This is quite easy to do it with autolayout in interfacebuilder as well. But, there are few things which you might have to sacrifice when using autolayout in interface builder. You would want to arrange items the items in storyboard. The steps to do it are as follows:

Add three views to interface builder, like so,

enter image description here

Select all three pictures and add new constraint in interface builder with the button like this |---|, and select equal width and equal height.

enter image description here

Then, again select all three views and then from the menu select Editor -> Align -> Top Edges

enter image description here

Select the left most view and give it some offset to the left,

enter image description here

Select the right most view and give it some offset to the right,

enter image description here

Select one of the view and give some offset at the top and bottom.

enter image description here

Select second view control + drag it to first and select the horizontal separation and give some constant value and do the same for the second and third view.

enter image description here

Now, the constraints is complete. It could happen that when you select the multiple views at the same time and add some constraint, it might not have been added to one of the views. So might have to resolve this looking error and seeing the constraints for the view, if all those constraints we added is there.
You could keep the constraint that separate the view from the top margin or bottom margin and create outlet for it and then change to suit your need or you could set some parameter in storyboard itself.

Here is the screenshot from my ipad simulator for the horizontal orientation.

Verical Orientation

And here is for vertical orientation,

enter image description here

I hope I have answered your question. Do let me know if you have something with this.

iPhone auto layout images arrangement issue

2 Answers