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)