【转】IOS AutoLayout详解（三）用代码实现(附Demo下载)
转载自：blog.csdn.net/hello_hwc
IOS SDK详解
前言：
在开发的过程中，有时候创建View没办法通过Storyboard来进行，又需要AutoLayout，这时候用代码创建就派上用场了，这篇文章我会详解用代码实现的两个主要函数，然后讲解一个Demo，最后Demo我会附上下载链接。
用代码实现的函数一
第一个函数通过描述两个view的参考线之间的约束来创建约束，例如有一个label和一个textfield。约束这样描述
label的右边参考线和textfield的右边参考线距离恒定为10
函数
1 + (instancetype)constraintWithItem:(id)view1 2 attribute:(NSLayoutAttribute)attr1 3 relatedBy:(NSLayoutRelation)relation 4 toItem:(id)view2 5 attribute:(NSLayoutAttribute)attr2 6 multiplier:(CGFloat)multiplier 7 constant:(CGFloat)c
参数的意义：
| 参数 | 意义 |
|---|---|
| view1 | 左手边的受约束视图 |
| attr1 | 左手边的受约束视图的参考参数 |
| relation | 约束的关系 |
| view2 | 右手边的受约束视图 |
| multiplier | The constant multiplied with the attribute on the right-hand side of the constraint as part of getting the modified attribute. |
| attr2 | The constant added to the multiplied attribute value on the right-hand side of the constraint to yield the final modified attribute. |
通常，multiplier的值为1.0。这个不太好翻译，我举个例子就懂了 。
举个例子
如果，我想要一个View的宽度为另一个View的一半，则
1 [NSLayoutConstraint 2 constraintWithItem:self.view1 3 attribute:NSLayoutAttributeWidth 4 relatedBy:NSLayoutRelationEqual 5 toItem:self.view2 6 attribute:NSLayoutAttributeWidth 7 multiplier:0.5 8 constant:0.0]];
这里有个计算公式
attribute1 == multiplier × attribute2 + constant
也就是说，在这里
view1.width = view2.width * 0.5 + 0.0
这样，更能够理解上述函数中两个参数的含义了吧。
再举个例子：
我想让一个View距离右上角（30，30）并且保持自己的长宽不变。实现代码
1 NSLayoutConstraint * h_c = [NSLayoutConstraint constraintWithItem:self.view 2 attribute:NSLayoutAttributeRight 3 relatedBy:NSLayoutRelationEqual 4 toItem:self.testview 5 attribute:NSLayoutAttributeRight 6 multiplier:1.0 7 constant:30]; 8 NSLayoutConstraint * v_c = [NSLayoutConstraint constraintWithItem:self.testview 9 attribute:NSLayoutAttributeTop 10 relatedBy:NSLayoutRelationEqual 11 toItem:self.view 12 attribute:NSLayoutAttributeTop 13 multiplier:1.0 14 constant:30]; 15 NSLayoutConstraint * e_w = [NSLayoutConstraint constraintWithItem:self.testview 16 attribute:NSLayoutAttributeWidth 17 relatedBy:NSLayoutRelationEqual 18 toItem:nil 19 attribute:NSLayoutAttributeWidth 20 multiplier:1.0 constant:CGRectGetWidth(self.testview.frame)]; 21 NSLayoutConstraint * e_h = [NSLayoutConstraint constraintWithItem:self.testview 22 attribute:NSLayoutAttributeHeight 23 relatedBy:NSLayoutRelationEqual 24 toItem:nil 25 attribute:NSLayoutAttributeHeight 26 multiplier:1.0 constant:CGRectGetHeight(self.testview.frame)]; 27 [self.view addConstraints:@[h_c,v_c,e_h,e_w]];
效果如图:
用代码实现的方法二
方法二 使用可视化语言VFL
可视化语言的Apple文档链接如下 :
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html
利用到的函数为:
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views参数的的意义
| 参数 | 意义 |
|---|---|
| format | NSString类型的可视语言描述 |
| opts | 描述可视化语言中对象的layout方向 |
| metrics | 描述可视化语言中String代表的常量值，字典类型，key为String，value为NSNumber类型 |
| views | 描述可视化语言中String代表的对象，字典类型，key为String，value为layout约束的对象 |
举个例子就懂了，例如，惰性初始化下面一个View，不难看出，这个View我没有指定大小，大小我要用约束来创建
1 -(UIView *)testview{ 2 if (!_testview) { 3 _testview = [[UIView alloc] init]; 4 _testview.backgroundColor = [UIColor blueColor]; 5 } 6 return _testview; 7 } 8 9 - (void)viewDidLoad { 10 [super viewDidLoad]; 11 [self.view addSubview:self.testview]; 12 }
然后，我用约束的方式，让View的大小恒定为100＊100
1 NSArray *c_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testview(==100)]" 2 options:0 3 metrics:nil 4 views:@{@"testview":self.testview}]; 5 6 NSArray *c_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview(==100)]" 7 options:0 8 metrics:nil 9 views:@{@"testview":self.testview}]; 10 11 [self.view addConstraints:c_h]; 12 [self.view addConstraints:c_v];
然后，我再把View约束到距离右上角（30＊30）的位置
1 NSArray *l_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hdistance-[testview]" 2 options:0 3 metrics:@{@"hdistance":@(30)} 4 views:@{@"testview":self.testview}]; 5 6 NSArray *l_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview]-vdistance-|" 7 options:0 8 metrics:@{@"vdistance":@(30)} 9 views:@{@"testview":self.testview}];
这样，约束后的效果如图 :
关于可视化语言的建议:
个人而言，比较喜欢用可视化语言的方式来出创建约束。而且也不用刻意去学，一开始使用的时候打开一个链接放在旁边，不会的时候参考下。多用几次，自然就会了。
三 一个Demo
我用上述两种方式实现类似的同一组约束，效果如下 :
这里，ImageView的中心始终在view的中心，两个button分别距离ImageView距离为标准距离8，并且分别左右对齐。
用方式一实现的代码：
1 [self.view addSubview:self.imageview]; 2 [self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO]; 3 NSLayoutConstraint * hc = [NSLayoutConstraint 4 constraintWithItem:self.view 5 attribute:NSLayoutAttributeCenterX 6 relatedBy:NSLayoutRelationEqual 7 toItem:self.imageview 8 attribute:NSLayoutAttributeCenterX 9 multiplier:1.0 10 constant:0.0]; 11 NSLayoutConstraint * vc = [NSLayoutConstraint constraintWithItem:self.view 12 attribute:NSLayoutAttributeCenterY 13 relatedBy:NSLayoutRelationEqual 14 toItem:self.imageview 15 attribute:NSLayoutAttributeCenterY 16 multiplier:1.0 17 constant:0.0]; 18 NSLayoutConstraint * equalW = [NSLayoutConstraint constraintWithItem:self.imageview 19 attribute:NSLayoutAttributeWidth 20 relatedBy:NSLayoutRelationEqual 21 toItem:nil 22 attribute:0 23 multiplier:1.0 24 constant:CGRectGetWidth(self.imageview.frame)]; 25 NSLayoutConstraint * equalH = [NSLayoutConstraint constraintWithItem:self.imageview 26 attribute:NSLayoutAttributeHeight 27 relatedBy:NSLayoutRelationEqual 28 toItem:nil 29 attribute:0 30 multiplier:1.0 31 constant:CGRectGetHeight(self.imageview.frame)]; 32 [self.view addConstraints:@[hc,vc,equalH,equalW]]; 33 [self.view addSubview:self.button_1]; 34 [self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO]; 35 NSLayoutConstraint * b1_image_v = [NSLayoutConstraint constraintWithItem:self.imageview 36 attribute:NSLayoutAttributeTop 37 relatedBy:NSLayoutRelationEqual 38 toItem:self.button_1 39 attribute:NSLayoutAttributeBottom 40 multiplier:1.0 41 constant:8.0]; 42 NSLayoutConstraint * b1_image_h = [NSLayoutConstraint constraintWithItem:self.button_1 43 attribute:NSLayoutAttributeLeft 44 relatedBy:NSLayoutRelationEqual 45 toItem:self.imageview 46 attribute:NSLayoutAttributeLeft 47 multiplier:1.0 48 constant:0.0]; 49 50 [self.view addConstraints:@[b1_image_h,b1_image_v]]; 51 52 [self.view addSubview:self.button_2]; 53 [self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO]; 54 NSLayoutConstraint * b2_image_v = [NSLayoutConstraint constraintWithItem:self.button_2 55 attribute:NSLayoutAttributeTop 56 relatedBy:NSLayoutRelationEqual 57 toItem:self.imageview 58 attribute: NSLayoutAttributeBottom 59 multiplier:1.0 60 constant:8.0]; 61 NSLayoutConstraint * b2_image_h = [NSLayoutConstraint constraintWithItem:self.button_2 62 attribute:NSLayoutAttributeRight 63 relatedBy:NSLayoutRelationEqual 64 toItem:self.imageview 65 attribute:NSLayoutAttributeRight 66 multiplier:1.0 67 constant:0.0]; 68 69 [self.view addConstraints:@[b2_image_h,b2_image_v]];
用可视化语言VFL的代码
1 [self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO]; 2 NSArray * v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[superview]-(<=1)-[imageview]" 3 options:NSLayoutFormatAlignAllCenterX 4 metrics:nil 5 views:@{@"superview":self.view,@"imageview":self.imageview}]; 6 NSArray * h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[superview]-(<=1)-[imageview]" 7 options:NSLayoutFormatAlignAllCenterY 8 metrics:nil 9 views:@{@"superview":self.view,@"imageview":self.imageview}]; 10 NSArray * ew = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageview(==imageviewWidth)]" 11 options:0 12 metrics:@{@"imageviewWidth":@(CGRectGetHeight(self.imageview.frame))} 13 views:@{@"imageview":self.imageview}]; 14 NSArray * eh = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageview(==imageviewHeight)]" 15 options:0 16 metrics:@{@"imageviewHeight":@(CGRectGetWidth(self.imageview.frame))} 17 views:@{@"imageview":self.imageview}]; 18 [self.view addConstraints:v]; 19 [self.view addConstraints:h]; 20 [self.view addConstraints:ew]; 21 [self.view addConstraints:eh]; 22 23 [self.view addSubview:self.button_1]; 24 [self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO]; 25 NSArray * b1_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button1]-[imageview]" 26 options:NSLayoutFormatAlignAllLeft 27 metrics:nil 28 views:@{@"button1":self.button_1, 29 @"imageview":self.imageview}]; 30 [self.view addConstraints:b1_image]; 31 32 33 [self.view addSubview:self.button_2]; 34 [self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO]; 35 NSArray * b2_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button2]-[imageview]" 36 options:NSLayoutFormatAlignAllRight 37 metrics:nil 38 views:@{@"button2":self.button_2, 39 @"imageview":self.imageview}]; 40 [self.view addConstraints:b2_image];
最后，附上Demo的下载链接 ：
CSDN下载
前两两篇关于如何在Storyboard上创建AutoLayout的详解
http://blog.csdn.net/hello_hwc/article/details/43982003
http://blog.csdn.net/hello_hwc/article/details/43967561
