iPhone auto layout images arrangement issue - ios

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

Answer 1

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,
Select all three pictures and add new constraint in interface builder with the button like this |---|, and select equal width and equal height.
Then, again select all three views and then from the menu select Editor -> Align -> Top Edges
Select the left most view and give it some offset to the left,
Select the right most view and give it some offset to the right,
Select one of the view and give some offset at the top and bottom.
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.
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.
And here is for vertical orientation,
I hope I have answered your question. Do let me know if you have something with this.

Answer 2

(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
// i assume here that you have three imageviews img1, img2, img3
float viewWidth = [UIScreen mainScreen].bounds.size.width;
float viewHeight = [UIScreen mainScreen].bounds.size.height;
if (toInterfaceOrientation == UIInterfaceOrientationPortrait){
// your portrait mode code here
}
else{
NSLog(#"bounds are (%f,%f)", viewHeight,viewWidth);
img1.width = viewHeight/3; //i used "viewHeight" because of landscape mode
img2.width = viewHeight/3;
img3.width = viewHeight/3;
// and then set centre of imageview according to your requirement
}
}