通过代码实现约束 NSLayoutConstraint + VFL添加约束

//1.禁止auturezing
// self.view.translatesAutoresizingMaskIntoConstraints = NO;

// 2.添加两个视图到父试图上
// 2.1 添加蓝色View

UIView *blueView = [[UIView alloc]init];

blueView.backgroundColor = [UIColor blueColor];

[self.view addSubview:blueView];

blueView.translatesAutoresizingMaskIntoConstraints = NO;

// 2.2 添加红色View

UIView *redView = [[UIView alloc]init];

redView.backgroundColor = [UIColor redColor];

[self.view addSubview:redView];

redView.translatesAutoresizingMaskIntoConstraints = NO;

// 3.添加约束
// 3.1 添加蓝色View到父试图左边的距离固定为20

/*

1.Item = fist item 需要设置约束的空间

2.attribute == 等于需要设置的属性

3.relatedBy == relation 等于

4.toItem == second item 被参照的空间

5.attribute == 需要设置的约束

6.multiplier == multiplier 乘于多少

7.constant== constant 加上多少

*/

NSLayoutConstraint *lefeCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];

[self.view addConstraint:lefeCos];

// 3.2 添加蓝色View到父试图右边的距离固定为20

NSLayoutConstraint *rightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];

[self.view addConstraint:rightCos];

// 3.3 添加蓝色View到父试图顶部的距离固定为20

NSLayoutConstraint *TopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];

[self.view addConstraint:TopCos];

// 3.4 添加蓝色View的高度为50

NSLayoutConstraint *heightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];

[blueView addConstraint:heightCos];

// 4.设置红色的约束
// 红色的高度和蓝色的一样 高度

NSLayoutConstraint *redheightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];

[self.view addConstraint:redheightCos];
// 红色的右边和蓝色的右边对其 X

NSLayoutConstraint *rightRedCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];

[self.view addConstraint:rightRedCos];

// 红色顶部和蓝色的底部固定 Y

NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];

[self.view addConstraint:redTopCos];

// 设置红色的宽度是蓝色的一半

NSLayoutConstraint *wideRedCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

[self.view addConstraint:wideRedCos];

=================================================
VFL添加约束

nH:[cancelButton(72)]-12-[acceptButton(50)]
pcanelButton宽72，acceptButton宽50，它们之间间距12
n
nH:[wideView(>=60@700)]
pwideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
n
nV:[redBox]-[yellowBox(==redBox)]
p竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
n
nH:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

p水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

//1.禁止auturezing

// self.view.translatesAutoresizingMaskIntoConstraints = NO;

// 2.添加两个视图到父试图上

// 2.1 添加蓝色View

UIView *blueView = [[UIView alloc]init];

blueView.backgroundColor = [UIColor blueColor];

[self.view addSubview:blueView];

blueView.translatesAutoresizingMaskIntoConstraints = NO;

// 2.2 添加红色View

UIView *redView = [[UIView alloc]init];

redView.backgroundColor = [UIColor redColor];

[self.view addSubview:redView];

redView.translatesAutoresizingMaskIntoConstraints = NO;

// 3.添加约束

/*

1.lFormat 存放VFL语句

2.options 对齐方法

3.metrics VFL 中用到变量

4.views VFL 语句中用到得控件

*/

//设置蓝色View左边和右边有20 的间距 X 宽

NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];

[self.view addConstraints:blueViewH];

//设置蓝色View距离顶部20的间距，并且高度等于50 y 和 宽

// 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度

// 并且设置红色和蓝色右对齐

NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];

[self.view addConstraints:blueViewV];

// 注意: 在VFL语句中, 是不支持乘除法

// NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];

// [self.view addConstraints:redVeiwH];

NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redVeiwW];