iOS apps with AutoLayout using NSLayoutConstraint programmatically

Auto Layout was first introduced in Mac OS X Lion and after a year Apple introduced it in iOS 6 . . It is a easy way to create layouts that will support different screen sizes and orientations . You need to write the code only once and apply some constraints to each view. Then it will support different views and orientations.

Constraint is a kind of simple linear equation that will decide the dimensions of a view in different devices and orientations.

To create a constraint you can use any of the following method :

  1. constraintsWithVisualFormat:options:metrics:views:
  2. constraintWithItem: attribute: relatedBy: toItem: attribute: multiplier: constant:

The first method uses Visual Format language. It requires less code but more understanding.The second method is more friendly to use but requires too much code.We will continue with the first method.To understand Visual Format language follow this link:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/….

Here I am going to continue with an example which will be having portrait view in iPhone 4 as 

iOS Simulator Screen shot 26-Nov-2013 11.59.22 AM

The same view in landscape mode will look like this

 

iOS Simulator Screen shot 26-Nov-2013 11.59.26 AM

 

 

Coding

Create Buttons

Create all the four buttons with different colour and different name. Create buttons in                    “viewWillAppear” method. I defined all the buttons as global variables.Here  is the code for that

topButton=[[UIButton alloc]init];
[topButton setTitle:@"Top" forState:UIControlStateNormal];
topButton.backgroundColor=[UIColor blueColor];
topButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:topButton];

It is mandatory to set

topButton.translatesAutoresizingMaskIntoConstraints = NO;

Create other three buttons in the similar way. (leftButton, rightButton, bottomButton)

 

Creating Dictionary

Create a dictionary which will be having all the four buttons. I defined the dictionary as global variable.

viewDict=NSDictionaryOfVariableBindings(topButton,leftButton,rightButton,bottomButton);

 

Creating Layout For Top Button

self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=110,<=175)-[topButton(>=100,<=130)]-(>=110,<=175)-|" options:0 metrics:0 views:viewDict]];
self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=10,<=40)-[topButton(>=50,<=60)]-(>=260,<=360)-|" options:0 metrics:0 views:viewDict]];

The string visible in purple colour is constraints equation. It is composed of various constraints, Here i would like to discuss about them. First code is adjusting Horizontal location and second code is adjusting Vertical part . Its format is like this:-

(H/V) : (superview) – (left or top margin) – (button width or height) – (right or bottom margin) – (superview)

Lets discuss  second equation

V:|-(>=10,<=40)-[topButton(>=50,<=60)]-(>=260,<=360)-|

V                         ->  For representing vertical adjustment. (By Default it is horizontal)

|                         ->  Representing superview (self.view is superview here)

(>=10,<=40)      ->  Top margin is greater than or equal to 10 OR is less than or equal to 40 .

[topButton(>=50,<=60)] -> Button Height is greater than or equal to 50 OR is less than or                                                      equal to 60 .

(>=260,<=360)  -> Bottom margin is greater than or equal to 260 OR is less than or equal to 36 .

This way , you can define ranges for the views. Then they will appear differently for different devices and orientation.

 

Creating Layout For Left Button

self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=10,<=20)-[leftButton(==topButton)]-(>=210,<=310)-|" options:0 metrics:0 views:viewDict]];
self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=125,<=200)-[leftButton(==topButton)]-(>=125,<=200)-|" options:0 metrics:0 views:viewDict]];

Here you can see a new Constraint is used ‘==’.You can even equalise the things with fixed value with no range. You can equalise things with other views also. Lets discuss that:-

[leftButton(==topButton)]  -> This will make the size of leftButton same as topButton.

 

Creating Layout For Right Button

self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=210,<=330)-[rightButton(==topButton)]-(<=20,>=10)-|" options:0 metrics:0 views:viewDict]];
self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=125,<=200)-[rightButton(==topButton)]-(>=125,<=200)-|" options:0 metrics:0 views:viewDict]];

 

Creating Layout For Bottom Button

self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=110,<=175)-[bottomButton(==topButton)]-(>=110,<=175)-|" options:0 metrics:0 views:viewDict]];
self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=240,<=360)-[bottomButton(==topButton)]-(>=10,<=40)-|" options:0 metrics:0 views:viewDict]];

 

 

Now you run the code. It will display the results like above snapshots have. Auto Layout Guide have more constraint that will be useful for complex views.So start experimenting with those also.

Once you understand the logic , it will be very easy for you to create complex view for different devices with different orientations with very less amount of code.

Happy Coding…..

 

The following two tabs change content below.