Auto Layout in iOS 6: Keep Aspect Ratio of Image

Before iOS6, layout was mainly by autosizing, also known as the "springs and struts" method. In iOS6, we will use AutoLayout, which will make it easier to design interfaces for various sceen sizes. In this tutorial we will using AutoLayout to keep the aspect ratio of a image while rotating the device.

Open Xcode and create a new Single View Application. For product name, use ImageAspectRatioDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox is deselected and Use Automatic Reference Counting checkbox is selected.

In ViewController.m in the interface section declare the following property.

@interface ViewController ()

@property (nonatomic, strong) UIImageView *imageView;


Change the viewDidLoad method to


- (void)viewDidLoad
[super viewDidLoad];

UIImage *image = [UIImage imageNamed:@"can_of_cola.png"];

self.imageView = [[UIImageView alloc] initWithImage:image];
self.imageView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.imageView];

We load an image into the imageview. The translatesAutoresizingMaskIntoConstraints property is set to NO, so our constraints will not conflict with the old "springs and struts" method.

Build and Run to see what our initial screen will look like.

In Landscape mode the view look like this

Add the following Constraint at the bottom of the viewDidLoad method

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];

[self.view addConstraint:constraint];

constraint = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];

[self.view addConstraint:constraint];

constraint = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:1.0f constant:0.0f];

[self.view addConstraint:constraint];

The constraints centers the image View and make the height equal to the screen size. Build and Run

When you rotate the view, the aspect ratio of the view is wrong, because of the height constraint

To fix this we will add a constraint to keep the aspect ratio of our image. When you view the File inspector of the image you  can see the size is 241x400. So the aspect ratio is 400:241 = 1,66. Add the constraint at the bottom of the viewDidLoad method.

constraint = [NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.imageView attribute:NSLayoutAttributeWidth multiplier:1.66f constant:0.0f];

[self.imageView addConstraint:constraint];

Build and Run, rotate the view to Landscape mode. As you can see, the Aspect Ratio is now fixed.

You can download the source code of the ImageAspectRatioDemo at the ioscreator repository on github.