iOS - Auto Layouts - iOS (iPhone, iPad) Tutorial

Auto-layouts were presented in iOS 6.0. When we use auto-layouts, our implementation focus on should be 6.0 and greater. Auto-layouts help us make connections that can be used for several orientations and several gadgets.

Goal of Our Example

We will add two control buttons that will be placed in a certain range from the middle of the display. We will also try to add a resizable written text area that will be placed from a certain range from above the control buttons.

Our Approach

We will add a written text area and two control buttons in the rule along with their restrictions. The restrictions of each UI Components will be designed and included to the extremely perspective. We will have to turn off auto-resizing for each of the UI elements we add to be able to get the preferred outcome.

Steps Involved

Step 1. Build a easy view-based program.

Step 2. We will modify only ViewController.m and it is as follows −

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIButton *leftButton;
@property (nonatomic, strong) UIButton *rightButton;
@property (nonatomic, strong) UITextField *textfield;

@end
@implementation ViewController

- (void)viewDidLoad{
    [super viewDidLoad];
    UIView *superview = self.view;
    /*1. Create leftButton and add to our view*/
    self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
    [self.view addSubview:self.leftButton];    
    /* 2. Constraint to position LeftButton's X*/
    NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
    constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
    /* 3. Constraint to position LeftButton's Y*/
    NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint 
    constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];   
    /* 4. Add the constraints to button's superview*/
    [superview addConstraints:@[ leftButtonXConstraint,
    leftButtonYConstraint]];    
    /*5. Create rightButton and add to our view*/
    self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
    [self.view addSubview:self.rightButton];    
    /*6. Constraint to position RightButton's X*/
    NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint 
    constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];
    /*7. Constraint to position RightButton's Y*/
    rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
    NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint 
    constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
    NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
    [superview addConstraints:@[centerYMyConstraint,
    rightButtonXConstraint]];
   //8. Add Text field
    self.textfield = [[UITextField alloc]initWithFrame:
    CGRectMake(0, 100, 100, 30)];
    self.textfield.borderStyle = UITextBorderStyleRoundedRect;
    self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.textfield];
    //9. Text field Constraints
    NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview 
    attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
    NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
    relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton 
    attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
    NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
    NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint 
    constraintWithItem:self.textfield attribute:NSLayoutAttributeRight 
    relatedBy:NSLayoutRelationEqual toItem:superview attribute:
    NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
    [superview addConstraints:@[textFieldBottomConstraint ,
    textFieldLeftConstraint, textFieldRightConstraint, 
    textFieldTopConstraint]];   
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

Points to Note

In actions noticeable 1, 5, and 8, we just programmatically included two control buttons and a written text area respectively.

In the relax of the actions, we designed restrictions and included those restrictions to the specific extremely opinions, which are actually self-views. The restrictions of one of the remaining control buttons is as proven below −

NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

We have constraintWithItem and toItem which choose between which UI components we are developing the restriction. The feature chooses on what foundation the two components are connected together. "relatedBy" chooses how much impact the features have between the components. Multiplier is the multiplication aspect and continuous will be included to the multipler.

In the above example, the X of leftButton is always higher than or similar to -60 p based on the middle of the extremely perspective. In the same way, other restrictions are described.