iOS开发之Auto Layout入门(转)
随着iPhone6与iOS8的临近，适配的问题讲更加复杂，最近学习了一下Auto Layout的使用，与大家分享。
什么是Auto Layout？
Auto Layout是iOS6发布后引入的一个全新的布局特性，其目的是弥补以往Autoresizing在布局方面的不足之处，以及未来面对更多尺寸适配时界面布局可以更好的适应。
为什么要用Auto Layout？
Autolayout能解决不同屏幕（iPhone4，iPhone5，iPad...）之间的适配问题。
在iPhone4时代开发者只需要适配一种屏幕尺寸，相比与Android阵营的相对布局，iOS开发者们最长用的做法是使用绝对布局，坐标和大小只要写死就ok了。随后iPhone5出了，对于两种屏幕尺寸，就需要考虑一个新的问题，屏幕适配。苹果其实很早就考虑到了这一点Autoresizing技术，诚然Autoresizing有所不足，苹果在iOS6发布后引入了Autolayout特性，适应更广泛场景下的布局需求。当然了iPhone5由于和iPhone4在屏幕宽度上一致，即便不用上这些技术适配起来也不麻烦（笔者再之前也只用到了Autoresizing），不过在iPhone6即将推出，即将面临更复杂的屏幕适配时，Auto Layout能帮助我们很好地解决这个问题，此外也能解决横屏竖屏切换，iPad的适配问题。
下面是本文事例代码在横竖屏切换下的效果：
如何使用Auto Layout？
Auto Layout的基本概念
Auto Layout的核心是约束（constraint），通过对view的约束（view的大小，view与view之间的关系）使得view能够自己计算出尺寸和坐标。
Visual Format Language，在Auto Layout中使用的形象描述约束的一种语言规则。
Auto Layout的使用还是比较复杂的，一开始用可能会感觉云里雾里的，用的多了习惯VFL的写法之后就会感觉到它的方便了。
在代码中使用Auto Layout
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor greenColor];
UIView *viewTopLeft = [[UIView alloc] init];
UIView *viewTopRight = [[UIView alloc] init];
UIView *viewBottom = [[UIView alloc] init];
[viewTopLeft setBackgroundColor:[UIColor blueColor]];
[viewTopRight setBackgroundColor:[UIColor redColor]];
[viewBottom setBackgroundColor:[UIColor blackColor]];
//添加约束之前必须讲view添加到superview里
[self.view addSubview:viewTopRight];
[self.view addSubview:viewTopLeft];
[self.view addSubview:viewBottom];
//对于要使用Auto Layout的控件需要关闭Autoresizing
[viewTopLeft setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewTopRight setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewBottom setTranslatesAutoresizingMaskIntoConstraints:NO];
//使用VFL
#if 1
//dict和metrics相当于vfl中的名称与对象和数值的映射
NSDictionary *dict = NSDictionaryOfVariableBindings(viewTopLeft, viewTopRight, viewBottom);
//相当于这么写 NSDictionary *dict = @[@"viewTopLeft":viewTopLeft, @"viewTopRight":viewTopRight, @"viewBottom",viewBottom];不一定名称要与对象名一致
NSDictionary *metrics = @{@"pad":@10};
//水平关系(H:，可省略如vfl1），"|"相当与superview，"-"是连接符，表示两者间的间距也可以没有表示无间距
//转化正自然语言的描述就是：superview的左边界间隔pad距离是viewTopLeft(宽度与viewTopRight相等）再间隔默认距离是viewTopRight再间隔10的距离是superview的右边界。
NSString *vfl0 = @"H:|-pad-[viewTopLeft(==viewTopRight)]-[viewTopRight]-10-|";
NSString *vfl1 = @"|[viewBottom]|";
//垂直关系（V:）
NSString *vfl2 = @"V:|-[viewTopLeft(==viewBottom)]-[viewBottom]-pad-|";
NSString *vfl3 = @"V:|-[viewTopRight]-[viewBottom]-pad-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl0 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:0 metrics:metrics views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl3 options:0 metrics:metrics views:dict]];
//不使用VFL
#else
//viewTopLeft的leading与其superview的leading（左侧）对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:-10]];
//viewTopLeft的top与其superview的top对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:-10]];
//viewTopRight的top与viewTopLeft的top对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
//viewTopRight的leading与viewTopLeft的trailing（右侧）对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTrailing multiplier:1 constant:10]];
//viewTopRight的trailing与其superview的右侧对其
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];
//viewTopRight的宽与viewTopLeft宽相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
//viewTopRight的高与viewTopLeft高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopLeft attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
//viewBottom的top与viewTopRight的bottom对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeBottom multiplier:1 constant:10]];
//viewBottom的bottom与superview的bottom对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10]];
//viewBottom的leading与viewTopLeft的leading对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:0]];
//viewBottom的高与viewTopLeft的高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
//viewBottom的宽与其superview的高相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:-20]];
#endif
//更新约束
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded];
}
|
