IOS开发学习笔记039-autolayout 代码实现
浏览数：28 /
时间：2015年06月11日
本文转载至 http://www.cnblogs.com/songliquan/p/4548206.html
1、代码实现比较复杂
-
代码实现Autolayout的步骤
-
利用NSLayoutConstraint类创建具体的约束对象
-
添加约束对象到相应的view上
-
1 - (void)addConstraint:(NSLayoutConstraint *)constraint; 2 3 - (void)addConstraints:(NSArray *)constraints;
-
代码实现Autolayout的注意点
-
要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO; -
添加约束之前，一定要保证相关控件都已经在各自的父控件上
-
不用再给view设置frame
-
-
一个NSLayoutConstraint对象就代表一个约束
// 创建约束对象的常用方法
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
view1:要约束的控件
attr1:约束的类型（做怎样的约束）
relation:与参照控件之间的关系
view2:参照的控件
attr2:约束的类型（做怎样的约束）
multiplier:乘数
c:常量
-
自动布局的核心计算公式
view1.attr1 =（view2.attr2 * multiplier）+ c ;
-
约束添加规则
- 对于两个同层级view之间的约束关系，添加到它们的父view上。
-
对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
-
对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
2、简单练习:一个view
- 实现一个大小为100*200的redView显示到view中，距离左边和顶部间距都是20
1 // 实现一个大小为100*200的redView显示到view中，距离左边和顶部间距都是20 2 UIView *redView = [[UIView alloc] init]; 3 redView.backgroundColor = [UIColor redColor]; 4 // 关闭控件的自动添加约束功能 5 redView.translatesAutoresizingMaskIntoConstraints = NO; 6 // 先把控件添加到父控件才能接着添加约束 7 [self.view addSubview:redView]; 8 // 设置宽度 9 NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0 constant:100]; 10 [redView addConstraint:widthConstraint]; 11 // 设置高度 12 NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0 constant:200]; 13 [redView addConstraint:heightConstraint]; 14 // 设置尺寸:距离顶部20 15 NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20]; 16 [self.view addConstraint:topConstraint]; 17 // 距离左边约束20 18 NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20]; 19 [self.view addConstraint:leftConstraint];
3、练习：两个view
-
在控制器view顶部添加2个view，1个蓝色，1个红色
-
2个view高度永远相等
-
红色view和蓝色view右边对齐
-
蓝色view距离父控件左边、右边、上边间距相等
-
蓝色view距离红色view间距固定
-
红色view的左边和父控件的中点对齐
-
1 UIView *redView = [[UIView alloc] init]; 2 redView.backgroundColor = [UIColor redColor]; 3 // 关闭控件的自动添加约束功能 4 redView.translatesAutoresizingMaskIntoConstraints = NO; 5 // 先把控件添加到父控件才能接着添加约束 6 [self.view addSubview:redView]; 7 8 UIView *blueView = [[UIView alloc] init]; 9 blueView.backgroundColor = [UIColor blueColor]; 10 // 关闭控件的自动添加约束功能 11 blueView.translatesAutoresizingMaskIntoConstraints = NO; 12 // 先把控件添加到父控件才能接着添加约束 13 [self.view addSubview:blueView]; 14 15 /** 16 * - 在控制器view顶部添加2个view，1个蓝色，1个红色 17 - 2个view高度永远相等 18 - 红色view和蓝色view右边对齐 19 - 蓝色view距离父控件左边、右边、上边间距相等 :20 20 - 蓝色view距离红色view间距固定 21 - 红色view的左边和父控件的中点对齐 22 */ 23 24 /**************blue*********************************************************/ 25 // blueHeight 26 NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:0 constant:40]; 27 [self.view addConstraint:blueHeight]; // 同级控件之间的约束要添加到共同的父控件 28 29 //蓝色view距离父控件左边、右边、上边间距相等 :20 30 NSLayoutConstraint *blueViewRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20]; 31 [self.view addConstraint:blueViewRight]; 32 33 NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20]; 34 [self.view addConstraint:blueViewTop]; 35 36 NSLayoutConstraint *blueViewLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20]; 37 [self.view addConstraint:blueViewLeft]; 38 39 /**************red*********************************************************/ 40 // - redview与blueview等高 41 NSLayoutConstraint *equalHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem: blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0]; 42 [self.view addConstraint:equalHeight]; // 43 44 // - redview的左边和父控件的中点对齐 45 NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]; 46 [self.view addConstraint:centerX]; // 47 48 // - redview距离blueView间距20 49 NSLayoutConstraint *margin = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20]; 50 [self.view addConstraint:margin]; // 51 52 //- 红色view和蓝色view右边对齐 53 NSLayoutConstraint *equalRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1 constant:0]; 54 [self.view addConstraint:equalRight]; //
4、使用VFL语言简化代码
visual Format Lauguage ,可视化格式语言
可以使用VFL实现自动布局代码的简化。
VFL的使用
- 使用VFL来创建约束数组
1 + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views; 2 3 format ：VFL语句 4 opts ：约束类型 5 metrics ：VFL语句中用到的具体数值 6 views ：VFL语句中用到的控件
- 创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)
NSDictionaryOfVariableBindings(abc);
返回一个字典对象，内容为{@"abc" : abc};
4.1、VFL示例1：一个View
1 代码示例
2 UIView *redView = [[UIView alloc] init];
3 redView.backgroundColor = [UIColor redColor];
4 // 关闭控件的自动添加约束功能
5 redView.translatesAutoresizingMaskIntoConstraints = NO;
6 // 先把控件添加到父控件才能接着添加约束
7 [self.view addSubview:redView];
8 NSString *vfl = @"H:[redView(100)]-20-|"; // 设置宽度100，距离右边20
9 NSDictionary *view = @{@"redView" : redView};
10 // 水平方向约束
11 NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view];
12 [self.view addConstraints:constraint];
13 // 垂直方向约束
14 vfl = @"V:|-100-[redView(200)]"; // 设置高度200，距离顶部100
15 NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:nil views:view];
16 [self.view addConstraints:constraint2 ];
4.2、VFL示例2：居中显示
// 居中显示
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
// 关闭控件的自动添加约束功能
redView.translatesAutoresizingMaskIntoConstraints = NO;
// 先把控件添加到父控件才能接着添加约束
[self.view addSubview:redView];
NSNumber *margin = @100;
NSString *vfl = @"H:|-margin-[redView]-margin-|"; // 设置宽度100，距离右边20
NSDictionary *view = @{@"redView" : redView};
NSDictionary *metric = @{@"margin" : margin};
// 水平方向约束
NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterX metrics:metric views:view];
[self.view addConstraints:constraint];
// 垂直方向约束
NSDictionary *view2 = NSDictionaryOfVariableBindings(redView);
NSDictionary *metric2 = NSDictionaryOfVariableBindings(margin);
vfl = @"V:|-margin-[redView]-margin-|"; // 设置高度200，距离顶部100
NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllCenterY metrics:metric2 views:view2];
[self.view addConstraints:constraint2 ];
4.3、VFL示例：并排显示
1 UIView *blueView = [[UIView alloc] init]; 2 blueView.backgroundColor = [UIColor blueColor]; 3 // 不要将AutoresizingMask转为Autolayout的约束 4 blueView.translatesAutoresizingMaskIntoConstraints = NO; 5 [self.view addSubview:blueView]; 6 7 UIView *redView = [[UIView alloc] init]; 8 redView.backgroundColor = [UIColor redColor]; 9 // 不要将AutoresizingMask转为Autolayout的约束 10 redView.translatesAutoresizingMaskIntoConstraints = NO; 11 [self.view addSubview:redView]; 12 13 // 间距 14 NSNumber *margin = @20; 15 // 添加水平方向的约束 16 NSString *vfl1 = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|"; 17 18 NSDictionary *views = NSDictionaryOfVariableBindings(blueView,redView); 19 NSDictionary *mertics = NSDictionaryOfVariableBindings(margin); 20 NSArray *cons = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:NSLayoutFormatAlignAllBottom | NSLayoutFormatAlignAllTop metrics:mertics views:views]; 21 22 [self.view addConstraints:cons]; 23 // 添加竖直方向的间距 24 // 高度 25 NSNumber *height = @100; 26 NSString *vfl2 = @"V:[blueView(height)]-margin-|"; 27 NSDictionary *views2 = NSDictionaryOfVariableBindings(blueView); 28 NSDictionary *mertics2 = NSDictionaryOfVariableBindings(margin,height); 29 NSArray *cons2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertics2 views:views2]; 30 [self.view addConstraints:cons2];
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
