Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to implement autolayout programatically in iOS?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 399
    Comment on it

     


    Hi Reader’s,

    This blog includes the concept of implementing autolayout programatically. This can be done in two ways:-
    1.NSLayoutConstraint Class
    2.VisualFormat

     

    Below is an example which includes a UITextField creation and than implementing auto layout in two ways :-

     

    
    
        UITextField *txtName=[[UITextField alloc]init];
        txtName.placeholder=@"Name";
        txtName.contentMode = UIViewContentModeScaleAspectFit;
        txtName.translatesAutoresizingMaskIntoConstraints = NO;
        txtName.backgroundColor = [UIColor redColor];
        txtName.font = [UIFont systemFontOfSize:20.0];
        txtName.leftViewMode = UITextFieldViewModeAlways;
        [self.view addSubview:txtName];
        
    //Autolayout by using NSLayoutConstraint class
    
        NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:txtName attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:50];
        NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:txtName attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-50];
        NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:txtName attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:40];
        
        [self.view addConstraints:@[top,left,right]];
    
    
    //Autolayout by using VisualFormat which include string to define constraints.
    
        NSDictionary *metrics = @{@"height":@50.0};
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[txtName]-50-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:NSDictionaryOfVariableBindings(txtName)]];
        [self.view addConstraints: [NSLayoutConstraint
                                    constraintsWithVisualFormat:@"V:|-offsetTop-[txtName]"
                                    options:0
                                    metrics:@{@"offsetTop": @40}
                                    views:NSDictionaryOfVariableBindings(txtName)]];
    
    
    


    Above mentioned VisualFormat string can be explained as:-
    |:- Superview
    -:- Space
    offsetTop:- Space from top
    So this format will create 50 leading and 50 trailing space and 40 top space from  superview.

        
    Hope this blog will help you all to understand the auto layout concept programatically.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: