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]; }