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