【转】使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
原文:http://www.cocoachina.com/ios/20141209/10549.html
本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。
一:API介绍
NSLayoutConstraint API
1 NSLayoutConstraint constraintsWithVisualFormat: options:0 metrics:nil views:NSDictionaryOfVariableBindings();
参数介绍:
format:此参数为你的vfl语句,比如:@"H:|-[button]-|"
opts:枚举参数,默认写0,具体跟据你所实现的需求去选择你想要的枚举
metrics: 这里是一个字典,当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为 width,那么这个参数去哪里找呢?就是在这个字典里面找到key对就的值,如果没有找到这个值,app就会crash.
views:顾 名思义,这是传所有你在vfl中使用到的view,那在上面这句例子中的应该怎么传呢?结果是这样 的:NSDictionaryOfVariableBindings(button).如果你使用到了多个view,就可以这样 NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数 format中的一一对应,缺一不可.
2.UIView API
- (void)addConstraints:(NSArray *)constraints;
在 上面1中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。 如果你有多个VFL,你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起,然后再调用addConstraints:方法。
二:简单的使用
1.单控件的使用(没有与其他控制有关联,比如空隙等)
新建一个单页面项目Single View Application),在项目里面加上下面这段代码代码
1 #import "ViewController.h" 2 @interface ViewController () 3 4 @end 5 6 @implementation ViewController 7 8 - (void)viewDidLoad { 9 [super viewDidLoad]; 10 UIButton *button=[[UIButton alloc]init]; 11 [button setTitle:@"点击一下" forState:UIControlStateNormal]; 12 button.translatesAutoresizingMaskIntoConstraints=NO; 13 [button setBackgroundColor:[UIColor blackColor]]; 14 [self.view addSubview:button]; 15 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 16 options:0 17 metrics:nil 18 views:NSDictionaryOfVariableBindings(button)]; 19 20 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 21 options:0 22 metrics:nil 23 views:NSDictionaryOfVariableBindings(button)]; 24 25 [self.view addConstraints:constraints1]; 26 [self.view addConstraints:constraints2]; 27 28 29 } 30 31 @end
运行程序,效果图如下:
可以看到,我们新建的button已经出来,证明上面的自动布局语句(VFL)已经生效。那么我们来详细看看这些语句的意义是什么。
1 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 2 options:0 3 metrics:nil 4 views:NSDictionaryOfVariableBindings(button)];
这 里的意思是:button在水平方向上距离它的superView,左右各20px,比如在这里他的大小就是320-20*2=280.在@"H:|- [button]-|"这个语句中,其中"H:"是表示这是水平方向上的约束,"|"是表示superView,"-"表示一个间隔空间,这个间隔如果是 如superView之间的,那么就是20px,如果是两个同级别的view,比如@"[button]-[button1]",那么这里表示的是 8px.
1 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 2 options:0 3 metrics:nil 4 views:NSDictionaryOfVariableBindings(button)];
跟 上面有点不同,@"V:|-20-[button(==30)]",其中"V:"中代表这是垂直方向上的约束,"|-20-"这里的意思就是距离头部为 20px,相当于y坐标为20。后面的"[button(==30)]",是指定这个button的高度为30px.y坐标固定了,高度固定了,那这个 view的约束就完成了。如果你有需要,你的高度值(或者其他同类型的)可以使用>=,==,<=来表示,甚至你可以组合来用,像上面的 30,你可以指定一个区别,比如:(>=30,<=40),这同样也是可以的。如果你想表达他的优先级别,可以使用@"V:|-20- [button(==30@1000)]",这个@1000,就是他的级别了。你可以适配XIB或者SB对它的优先级做更多的处理.
PS:值得注意的是,在用代码创建的UIView在,一定要加上下面这句代码
button.translatesAutoresizeingMaskIntoConstraints = NO;
如果没有上面这一行,你的约束将不生效,控制台会输出一连串的错误.
2:多控件之间关联使用
基于上面的代码上,我们重新加了一段代码,现在的全部代码如下:
1 #import "ViewController.h" 2 @interface ViewController () 3 4 @end 5 6 @implementation ViewController 7 8 - (void)viewDidLoad { 9 [super viewDidLoad]; 10 UIButton *button=[[UIButton alloc]init]; 11 [button setTitle:@"点击一下" forState:UIControlStateNormal]; 12 button.translatesAutoresizingMaskIntoConstraints=NO; 13 [button setBackgroundColor:[UIColor blackColor]]; 14 [self.view addSubview:button]; 15 NSArray *constraints1=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button]-|" 16 options:0 17 metrics:nil 18 views:NSDictionaryOfVariableBindings(button)]; 19 20 NSArray *constraints2=[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[button(==30)]" 21 options:0 22 metrics:nil 23 views:NSDictionaryOfVariableBindings(button)]; 24 25 [self.view addConstraints:constraints1]; 26 [self.view addConstraints:constraints2]; 27 28 29 UIButton *button1=[[UIButton alloc]init]; 30 button1.translatesAutoresizingMaskIntoConstraints=NO; 31 [button1 setTitle:@"请不要点击我" forState:UIControlStateNormal]; 32 [button1 setBackgroundColor:[UIColor redColor]]; 33 [self.view addSubview:button1]; 34 35 NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|" 36 options:0 37 metrics:nil 38 views:NSDictionaryOfVariableBindings(button1)]; 39 40 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 41 options:0 42 metrics:nil 43 views:NSDictionaryOfVariableBindings(button1,button)]; 44 45 [self.view addConstraints:constraints3]; 46 [self.view addConstraints:constraints4]; 47 48 }
运行的效果图如下:
通过代码对比,可以看出,在button1的垂直方向约束上,我们做了一点改变。水平方向上跟button一样,这里就不多作解释。我们来看看垂直方向上的。
1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==30)]" 2 options:0 3 metrics:nil 4 views:NSDictionaryOfVariableBindings(button1,button)];
VFL 语句为:@"V:[button]-[button1(==30)]",这里用到了两个view在VFL语句里面。刚才我们也说到,"-"在同一级别的 View上使用的时候表示的间距为8个像素点,整一句的意思就是button1的y坐标离button有8个像素点.在不使用auto layout的时候,可以这样表达CGRectGetMaxY(button.frame)+8.
我再改一下上面这一句VFL
1 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]" 2 options:0 3 metrics:@{@"height":@30} 4 views:NSDictionaryOfVariableBindings(button1,button)];
再次运行,你会发现,效果是一样的。这样你就知道怎么动态去给view加上高度或者宽度,或是其他间距了吧?
那么,如何做到两个View,或是多个View之间等高,或者等宽呢?能用VFL可以做到吗?除了通过上面的直接赋值宽高的数值外,VFL还提供了另外一种写法用于等宽等高上。
还是上面的Demo,我们改一下代码
1 NSArray *constraints3=[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1(button)]" 2 options:0 3 metrics:nil 4 views:NSDictionaryOfVariableBindings(button1,button)]; 5 6 NSArray *constraints4=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(button)]" 7 options:0 8 metrics:nil 9 views:NSDictionaryOfVariableBindings(button1,button)];
通过@"H:|-[button1(button)]",@"V:[button]-[button1(button)]",这两句就可以轻松实现等宽等高了!
三:最后对格式的字符串作一个总结介绍
功能 表达式
水平方向 H:
垂直方向 V:
Views [view]
SuperView |
关系 >=,==,<=
空间,间隙 -
优先级 @value
关于constraintsWithVisualFormat:函数介绍:
constraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定,参数定义一般如下:
V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离
若是要定义水平方向,则将V:改成H:即可
在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定;
options:字典类型的值;这里的值一般在系统定义的一个enum里面选取
metrics:nil;一般为nil ,参数类型为NSDictionary,从外部传入 //衡量标准
views:就是上面所加入到NSDictionary中的绑定的View
在这里要注意的是 AddConstraints 和 AddConstraint 之间的区别,一个添加的参数是NSArray,一个是NSLayoutConstraint
使用规则
|: 表示父视图
-:表示距离
V: :表示垂直
H: :表示水平
>= :表示视图间距、宽度和高度必须大于或等于某个值
<= :表示视图间距、宽度和高度必须小宇或等于某个值
== :表示视图间距、宽度或者高度必须等于某个值
@ :>=、<=、== 限制 最大为 1000
1.|-[view]-|: 视图处在父视图的左右边缘内
2.|-[view] : 视图处在父视图的左边缘
3.|[view] : 视图和父视图左边对齐
4.-[view]- : 设置视图的宽度高度
5.|-30.0-[view]-30.0-|: 表示离父视图 左右间距 30
6.[view(200.0)] : 表示视图宽度为 200.0
7.|-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内
8. V:|-[view(50.0)] : 视图高度为 50
9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离
为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。
10: [wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700
11: 如果没有声明方向默认为 水平 V:
希望对各位读者有所帮助,如果不妥的地方还望指出.
转载于:https://www.cnblogs.com/A--G/p/4666763.html
【转】使用Auto Layout中的VFL(Visual format language)--代码实现自动布局相关推荐
- 转载:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...
- IOS使用Auto Layout中的VFL适配
做登录页面,之前做都是用frame做,今天想着用Auto Layout中的VFL来做.觉得做的效果还是可以的(自恋一下下). 首先看下效果图和标记图 自己在做的过程中也遇到了好多问题,不过也一个一个的 ...
- IOS开发高手课第三篇 App Auto Layout 是怎么进行自动布局的,性能如何?
03 | Auto Layout 是怎么进行自动布局的,性能如何? Auto Layout ,是苹果公司提供的一个基于约束布局,动态计算视图大小和位置的库,并且已经集成到了 Xcode 开发环境里. ...
- 深入理解Auto Layout 第一弹
form:https://zhangbuhuai.com/auto-layout-part-1/ By 张不坏 2015-07-16 更新日期:2015-07-17 文章目录 1. 写在前面 2. i ...
- Auto Layout和UILabel
前段时间千牛iOS版本也从iOS 6.0开始支持,所以可以正式引入Auto Layout来进行界面布局. 这里记录下在UILabel上应用Auto Layout进行布局的过程. 一.业务场景 用三个U ...
- 深入剖析Auto Layout,分析iOS各版本新增特性
先前写到的一篇Masonry心得文章里已经提到了很多AutoLayout相关的知识,这篇我会更加详细的对其知识要点进行分析和整理. 来历 一般大家都会认为Auto Layout这个东西是苹果自己搞出来 ...
- Advanced Auto Layout:Programmatically Creating Constraints
Programmatically Creating Constraints以编程方式创建约束 Whenever possible, use Interface Builder to set your ...
- Advanced Auto Layout Toolbox
原文地址:https://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/ Auto Layout was introduced in ...
- Unity/Auto Layout -- 理解Layout Elements(布局元素)
前言 在UGUI1中,Canvas下的每个GameObject都会自动添加 Rect Transform 组件来控制自身的位置和大小.通常情况下,基于Rect Transform的布局系统已经足够灵活 ...
最新文章
- 叶明回归IBM 负责大中华区合作伙伴业务
- boost::container实现emplace进位的程序
- JSON JsonArray和JsonObject学习资料
- 下午去银行办理按揭手续,不得已调休半天
- FreeModbus串行传输初始化
- jQuery中兄弟元素、子元素和父元素的获取
- [USACO2006][poj3182]The Grove(巧妙的BFS)
- python重写和装饰器_Python | 老司机教你 5 分钟读懂 Python 装饰器
- wordpress电商独立站模板
- 修改 UITabBar的背景颜色
- 安卓版本与adb的问题
- html文件用ppt打开,ppt文件怎么打开?ppt是什么?
- javascript 多行文本 function处理方法 及实践应用
- 从实际问题看 SwiftUI 和 Widget 编程
- 转置矩阵,逆矩阵和倒转置矩阵
- PS mac版的下载地址,百度软件中心
- c51中断优先级c语言,51单片机中断优先级设置,中断优先级如何设置
- 未知病毒提交的分析方法
- velcoity使用说明:foreach指令
- Tomcat7 与 maven
热门文章
- 数据结构之图:加权无向图与寻找最小生成树,Python——27
- 数据结构之图:用图解决案例,Python代码实现——24
- TypeError: object of type 'zip' has no len()、'zip' object is not subscriptable
- python tkinter 输入数字 小数_Python3 tkinter基础 Entry validate isdigit 只能输入数字的输入框...
- LeetCode 1733. 需要教语言的最少人数(哈希+枚举)
- 天池 在线编程 三等分(模拟)
- LeetCode 1638. 统计只差一个字符的子串数目(DP)
- LeetCode 651. 4键键盘(DP,Ctrl+CV)
- python3经典实例_Python3十大经典错误及解决办法
- 取多补少C语言,leetcode题目: 数字的补数 的C语言解法