IOS开发学习笔记039-autolayout 代码实现
本文转载至 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];
IOS开发学习笔记039-autolayout 代码实现的更多相关文章
- iOS开发学习笔记:基础篇
iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...
- ios开发学习笔记(1)
objective-c基础总结 第一二章 1.application:didiFinishLauchingWithOptions:程序启动后立即执行 2.启动界面代码格式:self.window = ...
- IOS开发学习笔记037-九宫格代码实现
九宫格布局,用手机输入法时经常见到.先按3行3列写. 代码的实现主要是计算插入图片的位置. 每一张图片的位置和所在的行列密切相关.分析过程如下: 界面: 代码实现 1.把需要的图片资源添加进来 然后给 ...
- iOS开发学习笔记
1 常用的第三方工具 1.1 iPhone Simulator 测试程序需要模拟器iPhone Simulator 1.2 设计界面需要Interface Builder,Interface Buil ...
- ios开发学习笔记(这里一定有你想要的东西,全部免费)
1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现clear Color无法使用). 其实在代码里还是可以设置的,那就是删除背景view [ ...
- ios开发学习笔记040-autolayout 第三方框架Masonry
不管是是界面创建约束还是代码创建约束,苹果官方提供的方式都比较繁琐.所以出现了第三方框架. Masonry 在github地址如下: https://github.com/SnapKit/Masonr ...
- IOS开发学习笔记017-第一个IOS应用
第一个IOS应用程序,就从最简单的开始吧. 1.先了解一下开发环境,Xcode的相关组成 2.还有模拟器 3.运行与停止按钮 4.新建一个工程 5.看看main函数里都有啥 6.现在来添加一个控件 1 ...
- IOS开发学习笔记041-UITableView总结1
一.UITableView的常用属性 1.分割线 // 分割线 self.tableView.separatorColor = [UIColorredColor]; // 隐藏分割线 self.tab ...
- IOS开发学习笔记038-autolayout 自动布局 界面实现
在storyboard/xib文件中实现自动布局 autolayout 1.注意事项 autolayout和frame属性是有冲突的,所以如果准备使用autolayout,就不要再代码中对控件的fra ...
随机推荐
- 【转载】安装mysql8.0.11以及修改root密码、连接navicat for mysql。
1.1. 下载: 官网下载zip包,我下载的是64位的: 下载地址:https://dev.mysql.com/downloads/mysql/ 下载zip的包: 下载后解压:(解压在哪个盘都可以的) ...
- tp读取器和写入器
一.读取器 控制器调用如下: //以ID的方式查询数据$user=User::get(3);//查询ID为3的单条数据echo $user->username;//以对象的方式显示对应的字段值 ...
- 常用的SQL
--时间计算: select GETDATE() ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) ,GETDATE()) --查 ...
- Spring Boot中使用Spring-data-jpa
在实际开发过程中,对数据库的操作无非就“增删改查”.就最为普遍的单表操作而言,除了表和字段不同外,语句都是类似的,开发人员需要写大量类似而枯燥的语句来完成业务逻辑. 为了解决这些大量枯燥的数据操作语句 ...
- ARM开发工具软件命令具体解释---嵌入式回归第三篇
先从bootloader開始,由于临时眼下这些都会是裸机程序相关. 本人这里是VMwarm10.0上安装的红帽linux虚拟机.从以下的截图中能够看出 裸机开发流程: 这里先做第三步(第一步第二步已提 ...
- QT实现右键快捷菜单
[转自]:http://blog.csdn.net/rolland1989/article/details/5754575 QWidget及其子类都可有右键菜单,因为QWidget有以下两个与右键菜单 ...
- c语言中各种数据类型的长度
在32位平台和64位平台上,同一种数据类型可能有不同的数据长度: 类型 32位平台 64位平台 char 1 1 short 2 2 int 4 4 long 4 8 long long 8 8 fl ...
- [svc]ip routing和no ip routing
ip routing: 查路由表, 如果ping的目的在RT中没有,不发出任何包(arp也不会发出) 如果RT中存在,则arp 下一跳,相当于no ip routing+配置网关 注: 静态路由: 指 ...
- 改善用户体验,用图片的自身变化以及进度通知摆脱传统的进度条,okhttp,Canvas,Paint实现
转载请注明出处:王亟亟的大牛之路 从最開始的白页面等待,到后来的进度条告知用户.到如今的WebBO/微信这样的先下缩略图点击才又一次下大图的方式,我们开发人员对用户感知的注意度越来越高.昨天刷微博的时 ...
- cnblogs博客迁移到hexo
cnblogs博客备份 备份地址:https://i.cnblogs.com/BlogBackup.aspx?type=1 备份文件为xml格式,打开备份文件,如下所示: <?xml versi ...