一. 为什么要使用自动布局
Frame
iPhone4S 320*480
iPhone5 5S 320*568
iPhone6 375*667
iPhone6plus 414*736
AutoLayout
针对不同屏幕的大小, 只需要使用同一份代码
- 系统自动布局的几种实现方式
1. 纯代码:
1. 添加一个个约束(约束: 用来描述视图相对于另外一个视图的位置). 因为屏幕的大小和视图控制器的view的bounds固定, 因此任何视图的位置只要相对于上面两个位置来设置即可
2. NSLayoutConstraint: 一个视图的某一个属性相对于另外一个视图的某一个属性的关系; 上述的属性包括left, right, bottom, width, height, 上述的关系: 二元一次表达式(y = kx + b)
2. 代码方式: 添加一个约束组, 用可视化语言的方式(理解略难, 不是所有的约束都可以用这种方式描述)
3. XIB的方式
1. priority: 优先级, 在0-1000之间, 默认为1000, 优先级越高, 当两个约束相互影响时, 默认选择优先级高的约束
2. 约束的直线显示蓝色才表示约束设置正确, 否则有错误
二. 系统布局怎么使用
- 一个视图的显示
- 设置frame的方式: (30, 100, 80, 60)
- 视图居中显示
- 两个视图的显示
- 多个视图的显示
三. Masonry
二. 系统布局怎么使用
一个视图的显示(注意点:添加约束之前一定要将这个视图添加到父视图之上)
-
设置frame的方式
**********************使用纯代码的方式**********************a. 创建一个视图(不用设置frame)
UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor];b. 不将Autoresize转化为AutoLayout的约束
redView.translatesAutoresizingMaskIntoConstraints = NO;c. 添加到父视图上
[self.view addSubview:redView];d. 添加约束(添加约束之前一定要将这个视图添加到父视图之上)
// 1) x相对于self.view.frame的x // redView.x == self.view.x * 1 + 30 /* 第一个参数: 第一个视图对象 第二个参数: 第一个视图对象的某一个属性 第三个参数: 第一个视图的属性相对于第二个视图的属性的关系(== >= <=) 第四个参数: 第二个视图对象 第五个参数: 第二个视图对象的属性 第六个参数: 线性表达式的系数 第七个参数: 线性表达式的常量 */ // 第一个视图对象(参数1)的属性(参数2) 关系(参数3) 第二个视图对象的属性(参数5) * 系数(参数6) + 常量(参数7) // (参1.参2) 参3 (参6.参2)*参5+参7 NSLayoutConstraint *xConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:30]; // 2) y // redView.y == self.view.y * 1 + 100 NSLayoutConstraint *yConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:100]; // 3) width // redView.width = 80 NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:80]; // 4) height // redView.height = 60 NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:60];e. 将该视图的约束添加到父视图或者间接父视图上面
[self.view addConstraint:xConstraint]; [self.view addConstraint:yConstraint]; [self.view addConstraints:@[widthConstraint,heightConstraint]];**********************使用可视化语言的方式**********************
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 用可视化语言的方式布置布局 // 1. 创建视图, 添加到父视图, 不将Autoresize转化为AutoLayout的约束 UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; redView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:redView]; // 2. 创建约束 // 可视化语言的方式, 每个视图一般只要在水平方向和垂直方向分别添加一个约束组就可以 /* 第一个参数: 可视化语言描述的字符串 第二个参数: 一些选项(通常可以忽略) 第三个参数: 可视化字符串里面的变量值 第四个参数: 可视化字符串里面的对象的值 */ // "H:"表示水平方向(horizontal) "V:"表示垂直方向(vertical) 如果不写默认是水平方向 // "|"表示父视图 // "redView", 表示一个视图对象, 对象的变量名为redView, 用[]扩起来 // "-30-"表示视图之间的间距 // (==80)表示宽度是80 NSArray *horConstrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[redView(==80)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]; // 参数是变量的状况 // CGFloat width = 100; // NSArray *horConstrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[redView(==mywidth)]" options:0 metrics:@{@"mywidth":[NSNumber numberWithFloat:width]} views:NSDictionaryOfVariableBindings(redView)]; // 垂直方向 NSArray *verContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[redView(60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]; // 3. 添加约束 [self.view addConstraints:horConstrains]; [self.view addConstraints:verContrains]; }**********************使用XIB的方式**********************
Leading Space to SuperviewTop Space to SuperviewWidthHeight -
居中显示
**********************使用纯代码的方式**********************
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.// 代码方式实现自动布局 // 1. 创建视图, 添加到父视图 UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; blueView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:blueView]; // 2. 创建约束 // center.x // blueView.center.x == self.view.center.x * 1 + 0 NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]; // center.y // blueView.center.y == self.view.center.y * 1 + 0 NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]; // width NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0 constant:200]; // height NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100]; // 视图添加约束 [self.view addConstraints:@[centerXConstraint, centerYConstraint, widthConstraint, heightConstraint]]; }**********************使用XIB的方式**********************
水平中心的设置垂直中心的设置
2. 两个视图的显示
**********************使用纯代码的方式**********************
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1. 创建两个视图, 添加到父视图
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
// 2个视图的约束
// blueView
// Left
NSLayoutConstraint *blueLeftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
// Top
NSLayoutConstraint *blueTopConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:40];
// Bottom
NSLayoutConstraint *blueBottomConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-200];
// redView
// Top
NSLayoutConstraint *redTopConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:80];
// Right
NSLayoutConstraint *redRightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-30];
// blueView和redView两个视图间的关系
// 横向间距
NSLayoutConstraint *xConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1 constant:-30];
// width相等
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
// 高度相等
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
[self.view addConstraints:@[blueLeftConstraint, blueTopConstraint, blueBottomConstraint, redTopConstraint, redRightConstraint, xConstraint, widthConstraint, heightConstraint]];
}
**********************使用可视化语言的方式**********************
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1. 创建两个视图, 添加到父视图
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
// 2. 创建约束
// x轴上
NSArray *horizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-30-[redView(==blueView)]-30-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, redView)];
// y轴上: (分开写)
NSArray *blueVerticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[blueView]-200-|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blueView)];
// y轴上: 右边不需要加|(条件已足够)
NSArray *redVerticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[redView(==blueView)]" options:0 metrics:0 views:NSDictionaryOfVariableBindings(redView, blueView)];
[self.view addConstraints:horizontalConstraint];
[self.view addConstraints:blueVerticalConstraint];
[self.view addConstraints:redVerticalConstraint];
}
**********************使用XIB的方式**********************
1.新建2个View, 为它们添加水平和垂直方向上的约束
2.设置2个View宽度相等
3.设置2个View高度相等
4.更新2个View的约束
5.修改约束里的系数和常量
