IOS开发学习笔记039-autolayout 代码实现
2024-03-22 21:08:07
本文转载至 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];
最新文章
- hdu2068RPG的错排
- Replication的犄角旮旯（六）-- 一个DDL引发的血案(上)（如何近似估算DDL操作进度）
- AndroidStudio里面怎么取消与SVN的关联
- C语言补码作用
- 制作登录界面，登录成功后把用户名放在session里，在第3个页面读取session显示用户名
- SVM2---核函数的引入
- 【转】GitHub删除一个仓库——2013-08-27 21
- 关于php优化的方法
- DBI && MySQL lock
- OC中ARC forbids explicit message send of release错误（转）
- [html5] 学习笔记- 编辑API之Range对象（二）
- PHP 用session与gd库实现简单验证码生成与验证的类
- ABAP 数值四舍五入函数
- vue路由--网站导航功能
- SDL 开发实战（三）：使用 SDL 绘制基本图形
- C#动态操作DataTable(新增行、列、查询行、列等)
- https及证书
- 前端框架之Vue(9)-组件基础&vue-cli
- ionic环境配置
- Python 为什么要用yield