作者:Mitchell
一、代码添加约束顺序###
- 创建控件
- 将控件添加到父控件中
- 关闭需要添加约束的控件的Autoresizing属性
- 创建约束
二、注意约束添加到哪里###
- 如果是自身的属性,如宽高,添加到自身
- 如果是关于父视图的约束,添加到父视图
- 如果是两个控件,添加到两个控件共同的父视图。
三、需求案例###
// 1.创建一个控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 1.如果是通过代码添加Autolayout, 那么必须在添加约束之前禁用Autoresizing
// 2.禁用Autoresizing时, 必须是给谁添加就禁用谁的, 也就是说如果禁用了父控件无效
// 3.添加约束之前, 必须保证被约束的控件已经添加到父控件中了
// self.view.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO;
// 2.创建约束对象
/*
Item == 第一个控件
attribute == 第一个控件的什么属性
relatedBy == 等于/小于等于/大于等于
toItem == 第二个控件
attribute == 第二个控件的什么属性
multiplier == 乘以多少
constant == 加上多少
*/
// 2.1顶部约束
NSLayoutConstraint *topCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
[self.view addConstraint:topCos];
// 2.1左边约束
NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftCos];
// 2.1底部约束
NSLayoutConstraint *bottomCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
[self.view addConstraint:bottomCos];
// 2.1右边约束
NSLayoutConstraint *rightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:rightCos];
// 写在这里不行, 必须在设置约束之前添加
// [self.view addSubview:redView];
// 1.创建两个控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
// 2.将两个控件添加到父控件中
[self.view addSubview:redView];
[self.view addSubview:blueView];
// 3.关闭需要添加约束的控件的Autoresizing属性
redView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.translatesAutoresizingMaskIntoConstraints = NO;
// 4.创建约束
// 4.1蓝色约束
// 4.1.1顶部约束
NSLayoutConstraint *blueTopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
[self.view addConstraint:blueTopCos];
// 4.1.2左边约束
NSLayoutConstraint *blueLeftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:blueLeftCos];
// 4.1.3右边约束
NSLayoutConstraint *blueRightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:blueRightCos];
// 4.1.4高度约束
NSLayoutConstraint *blueHeightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
[blueView addConstraint:blueHeightCos];
// 4.2红色约束
// 4.2.1顶部约束
NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:redTopCos];
// 4.2.2右边约束
NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:redRightCos];
// 4.2.3高度约束
NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
[self.view addConstraint:redHeightCos];
// 4.2.4宽度约束
NSLayoutConstraint *redWidthCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
[self.view addConstraint:redWidthCos];