×


iOS UIView Autolayout


What is UIView Autolayout ?

UIView Autolayout is an very interesting concept in iOS App development. Autolayout takes care of responsive design. iPhone comes with different screen sizes every time . With the help of Autolayouts you do not have to create your App design each time . Autolayout takes care of responsive design .

I will provide one simple library which you can use freely for Autolayouts. See Autolayouts code in given example, it's too lengthy. So we Simplified code in next Tutorial. But to understand this category you have to clear the basic concepts of Constraints.

What are constraints ?

Note:- To use AutoLayout you have to define Constarints.

Constraints are the specific rules you should assign to particular View like ....

1) No matter whch iPhone screen size is , Give 20px spacing from left.

2) No matter whch iPhone screen size is , Give 20px spacing from right.

3) No matter whch iPhone screen size is , Give 20px spacing from top.

4) No matter whch iPhone screen size is , Give 20px spacing from bottom.

That means there is one view in which there is spacing or padding of 20 px from left, right, bottom and top .

Syntax for writing Constraints:-

NSLayoutConstraint *contraint = [NSLayoutConstraint constraintWithItem:SpecificUIElement attribute:AttributeName relatedBy:LayoutRelation toItem:superview attribute:AttributeName multiplier:1 constant:12];
   
[superView addConstraint:contraint];

Always remember ,

1) Suppose label1 is added to view1 then view1(orangeColor View) will be superview of label1.


2) Suppose view1 is added to boxView then boxView will be superview of view1.

3) Suppose boxView is added to superBoxView then superBoxView will be superview of boxView

Various Constraints Attributes Used Mostly are :-

1) NSLayoutAttributeLeading

2) NSLayoutAttributeTrailing

3) NSLayoutAttributeTop

4) NSLayoutAttributeBottom

5) NSLayoutAttributeLeft

6) NSLayoutAttributeRight

Final Output :-


We create one UIView which contains 12px space from left , 12px space from top , 12px space from right. Then we will create one label and add it to UIView. Label will be 12px from left , 12px from top. But we will do this now with the help of Autolayouts so that in any iPhone mobile you will see the same effect.


Following Example will clears the concept of Autolayout. Write this code in viewDidLoad() method

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor colorWithRed:240.0/255.0 green:240.0/255.0 blue:245.0/255.0 alpha:1.0];
   
    /* Remember we did not give a frame to a UIView now */
    /* Let's do it with Autolayout */
    
    UIView *boxView = [[UIView alloc]init];
    [self.view addSubview:boxView];
   
    [boxView setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    /* Leading Constarint */
    NSLayoutConstraint *leadingBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:12];
    
    [self.view addConstraint:leadingBoxViewContraint];
    
    /* Trailing Constraint */
    NSLayoutConstraint *trailingBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-12];
    
    [self.view addConstraint:trailingBoxViewContraint];
   
    /* Top Constraint */
    NSLayoutConstraint *topBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:12];
    [self.view addConstraint:topBoxViewContraint];
    
    boxView.backgroundColor = [UIColor whiteColor];
    
    
    /* Height Constarint */
    NSLayoutConstraint *widthBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:1 constant:-400];
    
    [self.view addConstraint:widthBoxViewContraint];
    

    /* Label Email */
    UILabel *labelEmail = [[UILabel alloc]init];
    [boxView addSubview:labelEmail];
    labelEmail.backgroundColor = [UIColor redColor];
    labelEmail.text = @"Email";
    labelEmail.textColor = [UIColor blackColor];
    labelEmail.font = [UIFont fontWithName:@"Helvetica" size:16.0];
    
    [labelEmail setTranslatesAutoresizingMaskIntoConstraints:NO]; 

    /* Leading Constarint */
    NSLayoutConstraint *leadingEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeLeading multiplier:1 constant:12];
    
    [boxView addConstraint:leadingEmailLabelContraint];
    
    /* Trailing Constraint */
    NSLayoutConstraint *widthEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeWidth multiplier:1 constant:-280];
    
    [boxView addConstraint:widthEmailLabelContraint];
 
    /* Top Constraint */
    NSLayoutConstraint *topEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeTop multiplier:1 constant:12];
    
    [boxView addConstraint:topEmailLabelContraint];
    
}

Firstly , we allocated boxView but this time not with frames . Here we applied certain constraints to boxView .Let's explore each constraint one by one

setTranslatesAutoresizingMaskIntoConstraints:NO
This is most important statement in autolayouts. You have to Translate the autoresizing mask so that code knows you gonna use autolayouts not frames to position the UIElements. 

In case of boxView, we did this by

[boxView setTranslatesAutoresizingMaskIntoConstraints:NO];

In case of labelEmail, we did this by

[labelEmail setTranslatesAutoresizingMaskIntoConstraints:NO];

1) NSLayoutAttributeLeading :-

/* Leading Constarint */
NSLayoutConstraint *leadingBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:12];
    
[self.view addConstraint:leadingBoxViewContraint];

The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeLeading attibute to boxView from self.view" . Constant value is 12 . So boxView will be added from 12px left as you see in final Output fig. You have to add the constraint to superView which is self.view in this case.

2) NSLayoutAttributeTrailing :-

 /* Trailing Constraint */
NSLayoutConstraint *trailingBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-12];
    
[self.view addConstraint:trailingBoxViewContraint];
The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeTrailing attibute to boxView from self.view" .Constant value is -12 . So boxView will be added from 12px right as you see in final Output fig. You have to add the constraint to superView which is self.view in this case.

3) NSLayoutAttributeTop :-

 /* Top Constraint */
NSLayoutConstraint *topBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:12];
[self.view addConstraint:topBoxViewContraint];
The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeTop attibute to boxView from self.view" .Constant value is -12 . So boxView will be added from 12px top as you see in final Output fig. You have to add the constraint to superView which is self.view in this case.

4) NSLayoutAttributeHeight :-

 /* Height Constraint */
NSLayoutConstraint *heightBoxViewContraint = [NSLayoutConstraint constraintWithItem:boxView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:1 constant:-400];
    
[self.view addConstraint:heightBoxViewContraint];
The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeHeight attibute to boxView from self.view" .Constant value is 400px . So boxView's height will become -400px as you see in final Output fig. You have to add the constraint to superView which is self.view in this case. You have to give minus here because it's height will be considered from bottom of screen . try giving only 400px and see the result.

In case of labelEmail, we did this by

[labelEmail setTranslatesAutoresizingMaskIntoConstraints:NO];

Note* :- Remember we always add constraint to their superViews.

 In Case of labelEmail superview is boxView. And in case of boxView superView is self.view.

1) NSLayoutAttributeLeading :- (in case of labelEmail)

/* Leading Constraint */
 NSLayoutConstraint *leadingEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeLeading multiplier:1 constant:12];
    
[boxView addConstraint:leadingEmailLabelContraint];

The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeLeading attibute to labelEmail from boxView" . Constant value is 12 . So labelEmail will be added from 12px left of boxView as you see in final Output fig. You have to add the constraint to superView which is boxView in this case.

2) NSLayoutAttributeTrailing :- (in case of labelEmail)

 /* width Constraint */
NSLayoutConstraint *widthEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeWidth multiplier:1 constant:-280];
    
[boxView addConstraint:widthEmailLabelContraint];
The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeWidth attibute to labelEmail from boxView" .Constant value is -280 . So labelEmail's width will be 280 from boxView as you see in final Output fig. You have to add the constraint to superView which is boxView in this case.

3) NSLayoutAttributeTop :- (in case of labelEmail)

 /* Top Constraint */
NSLayoutConstraint *topEmailLabelContraint = [NSLayoutConstraint constraintWithItem:labelEmail attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:boxView attribute:NSLayoutAttributeTop multiplier:1 constant:12];
    
[boxView addConstraint:topEmailLabelContraint];
The given Constraint statement says, "Hey constraintWithItem give NSLayoutAttributeTop attibute to labelEmail from boxView" .Constant value is 12 . So labelEmail will be added from 12px top of BoxView as you see in final Output fig. You have to add the constraint to superView which is boxView in this case.