一谈到Autolayout,初学者肯定想到的是IB中使用拖拽啊，pin啊各种鼠标操作来进行添加各种约束。
今天我们要聊得是如何利用代码来添加视图间的约束。
我们来看一个例子：
(Objective-C代码)
UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(100, 111, 132, 194)]; v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1]; UIView* v2 = [UIView new]; v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1]; UIView* v3 = [UIView new]; v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1]; [mainview addSubview: v1]; [v1 addSubview: v2]; [v1 addSubview: v3]; v2.translatesAutoresizingMaskIntoConstraints = NO; v3.translatesAutoresizingMaskIntoConstraints = NO; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeLeft relatedBy:0 toItem:v1 attribute:NSLayoutAttributeLeft multiplier:1 constant:0]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeRight relatedBy:0 toItem:v1 attribute:NSLayoutAttributeRight multiplier:1 constant:0]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeTop relatedBy:0 toItem:v1 attribute:NSLayoutAttributeTop multiplier:1 constant:0]]; [v2 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:10]]; [v3 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeWidth relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:20]]; [v3 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:20]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeRight relatedBy:0 toItem:v1 attribute:NSLayoutAttributeRight multiplier:1 constant:0]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeBottom relatedBy:0 toItem:v1 attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];
(Swift代码 iOS9)
let v1 = UIView(frame:CGRectMake(100, 111, 132, 194)) v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1) let v2 = UIView() v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1) let v3 = UIView() v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) mainview.addSubview(v1) v1.addSubview(v2) v1.addSubview(v3) v2.translatesAutoresizingMaskIntoConstraints = false v3.translatesAutoresizingMaskIntoConstraints = false v1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Leading, relatedBy: .Equal, toItem: v1, attribute: .Leading, multiplier: 1, constant: 0) ) v1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Trailing, relatedBy: .Equal, toItem: v1, attribute: .Trailing, multiplier: 1, constant: 0) ) v1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Top, relatedBy: .Equal, toItem: v1, attribute: .Top, multiplier: 1, constant: 0) ) v2.addConstraint( NSLayoutConstraint(item: v2, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 10) ) v3.addConstraint( NSLayoutConstraint(item: v3, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20) ) v3.addConstraint( NSLayoutConstraint(item: v3, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20) ) v1.addConstraint( NSLayoutConstraint(item: v3, attribute: .Trailing, relatedBy: .Equal, toItem: v1, attribute: .Trailing, multiplier: 1, constant: 0) ) v1.addConstraint( NSLayoutConstraint(item: v3, attribute: .Bottom, relatedBy: .Equal, toItem: v1, attribute: .Bottom, multiplier: 1, constant: 0) )
运行效果:
(竖屏)
(横屏)
看了以上代码后，你肯定要疯了，那么多约束。。。
下面，我们就来逐一分析：
我们先来看一下这段代码
OC
v3 = [[UIView alloc] initWithFrame:CGRectMake(v1.bounds.size.width-20, v1.bounds.size.height-20, 20, 20)];
Swift
let v3 = UIView(frame:CGRectMake( v1.bounds.width-20, v1.bounds.height-20, 20, 20))
这段代码很清楚地表达了：v3是宽高各20，并且位置在v1的右下角，其原点距离v1的右下角
坐标x,y各偏移20，也就是我们上图中看到的大红色矩形。
约束的API语句有时候是很冗长的，看上去很难懂。
为此，Apple发明了可视化格式(Visual Format)来便于理解。
看看下面的这个例子：
@"V:|[v2(10)]"
上面的表达式中，V:表示是垂直方向上的约束，同理，H:表示水平方向上约束。
管道符|代表父视图。
中括号内是要添加约束的视图变量名。
所以，这里的约束清晰地表达： v2和父视图顶端对齐，并且v2的高度是10。