iOS编程(双语版)-视图-Autolayout代码初步-白红宇

一谈到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 = falsev3.translatesAutoresizingMaskIntoConstraints = falsev1.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))

运行效果:

(竖屏)

(横屏)

看了以上代码后，你肯定要疯了，那么多约束。。。

下面，我们就来逐一分析：

我们先来看一下这段代码

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。