Auto Layout之创建布局约束
上篇文章给大家介绍了AutoLayout
的由来及OC中关于AutoLayout
的类。这篇文章将向大家介绍,在iOS
编程中怎样使用Auto Layout
构建布局约束。
创建布局约束
创建布局约束的方式
在iOS
中使用Auto Layout
构建布局约束的方式有三种:
- 用IB设计界面。IB能够生成帮助开发人员高速布局你的约束,你能够在可视化编辑器中定制你的约束集合
- 为每个视图提供一个约束,来构建
NSLayoutConstraint
类的实例对象 使用可视化格式语言(
VFL
)描写叙述约束,进行UI布局对于以上三种创建布局约束的方式,作者在开发中经经常使用到是
VFL
。
创建布局约束的规则
不管是哪有一种方式创建布局约束。读者都应该明确哪些视图之间是能够创建约束的。
当约束引用两个视图的时候,这两个视图一定要属于同一视图层次结构。即:
- 一个视图是另外一个视图的父视图
- 两个视图是必须是兄弟视图
在Interface Builder上使用AutoLayout布局
对于厌烦手动编写代码的程序猿来讲,在IB中使用来AutoLayout布局,无疑是喜闻乐见的。
其实。对于在IB中使用来AutoLayout布局效率也是极高,可是前提你要知道IB上的元素以及IB为开发人员提供的组件。
鉴于在IB中使用来AutoLayout布局。无法用文字描写叙述。作者非常贴心的为各位读者录制了教学视频。大家能够观看。
VFL
对于为每个视图提供一个约束。来构建NSLayoutConstraint
类的实例对象,因而进行AutoLayout
布局的这种方式,无疑会让咱们代码会非常长非常长,这种方式在实际开发中并不适用。苹果官方的建议,相较于基于代码的方案,优先使用IB。其次使用VFL
,最后考虑构建NSLayoutConstraint
类的实例对象来为每个视图构建约束。
那么什么是VFL
?
VFL介绍
可视化格式语言有一个描写叙述视图布局的文本字符串组成。
开发人员仅仅须要依据UI中视图出现的顺序依次列出它们,中间加上对应的符号。这些符号指定了视图间的间隔、不等量和优先级。其实。可视化格式语言将我们的UI设计界面形象地表现为一个简短的字符串。
以下我们来看一个代码演示样例:
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1]-20-[view2(==width)]" options:0 metrics:@{@"width":[NSNumber numberWithFloat:44]} views:NSDictionaryOfVariableBindings(view1,view2)];
上面一段代码就是向大家介绍怎样使用VFL
构建约束。
当中H:[view1]-20-[view2(==width)]
就是VFL
。那么问题来了,这段火星文究竟是什么意思呢?其实意思非常easy:在水平方向。即x轴方向,view1
和view2
的间隔20个像素点,且view2
的宽度等于width
,当中width
为44。
VFL语法结构
(<orientation>:)?(<superView><connection>)?<view>(<connection><view>)*(<connection><superView>)?
?
代表可选项
*
代表该项会出现0次或者多次
从上面的语法结构定义来看,三个字:看不懂!然而其实写起来灰常简单。
方向
orientation
:VFL的開始是从一个可选方向開始的,能够是H:
,代表水平方向;也能够是V:
,代表垂直方向。如这种一个语法格式:
H:[view1]-30-[view2]
,表示在水平方向上,view1的右边距离view2的左边30个像素。又如这种一个语法格式:V:[view1]-30-[view2]
,表示在垂直方向上,view1的下边距离view2的上边30个像素。假设不写H:
或者V:
,那么系统会默觉得H:
,可是作者并不建议这样做。视图名称:视图的名称被一对方括号包围。如:[view1]。当然view1不是随便取的。它须要和你控件对象的变量名要一样。
链接符:
-
解释到这里大家对VFL
语法依旧不是非常懂。那么以下就列一个表格系统给大家解释.
类型 | 格式 | 演示样例 |
---|---|---|
方向 | H: V: |
H: 表示水平方向 V: 表示垂直方向 |
视图 | [item] | [view1] |
父视图 | | |
H:|-30-[view1]-30-| 表示view1的前后距离父视图的间距都为30 |
关系 | == <= >= |
H:[view1]-(>=20)-[view2] 表示view2的前面距离view1的后面至少20个像素 |
固定的宽度 | [item(width)] |
H:[view1(44)] |
固定的高度 | [item(height)] |
V:[view1(44)] |
最大或最小宽度/高度 | [item(<=size)] [item(>=size)] |
H:[view1(>=44)] V:[view1(>=44)] |
与还有一个视图匹配宽度或高度 | [item1(==item2)] [item1(>=item2)] [item1(<=item2)] |
H:[view1(==view2)] 表示view1和view2的宽度相等 V:[view1(==view2)] 表示view1和View2的高度相等 |
优先级(0-100) | @value | H:[view1(<=50@20)] 表示view1的宽度不大于50像素。优先级为20 |
希望童鞋将这些语法点记在心里,后面将为大家解说几个演示样例,来告诉大家怎样使用VFL
。敬请期待下篇博客!
Auto Layout之创建布局约束的更多相关文章
- (iOS)使用auto layout进行复杂布局时,UILabel的相关trick
本文转载至 http://blog.csdn.net/madongchunqiu/article/details/47960745 本文首发于CSDN:http://blog.csdn.net/ma ...
- 从 Auto Layout 的布局算法谈性能
这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...
- Auto Layout 使用心得
此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了. 简介 Auto ...
- 【转】Auto Layout 进阶
原文:http://blog.csdn.net/ysy441088327/article/details/12558097 引言: Auto Layout是iOS6发布后引入的一个全新的布局特性, ...
- Auto Layout简单应用——以编码的方式实现Auto Layout自动布局(二)
在上一篇文章iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)中我们简单的介绍了使用Visual Format Language创建布局约束来实现自动布局,这种方法创建的布局约 ...
- Beginning Auto Layout Tutorial in iOS 7: Part 6
Gallery example 屏幕有四个分开的相同的矩形,每个矩形有一个label和一个image view.创建一个Gallery的项目.在Main.storyboard中,拖拉一个view大小为 ...
- iOS 开发实践之 Auto Layout
原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自 ...
- ios8来了,屏幕更大,准备好使用 iOS Auto Layout了吗?
引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Au ...
- [Android开发学iOS系列] Auto Layout
[Android开发学iOS系列] Auto Layout 内容: 介绍什么是Auto Layout. 基本使用方法 在代码中写约束的方法 Auto Layout的原理 尺寸和优先级 Auto Lay ...
随机推荐
- 访问控制技术- 扩展IP访问列表
1.设置pc IP 网关 192.168.1.1 192.168.1.254 192.168.1.2 192.169.1.254 192.168.3.1 192.168.3.254 192.168.3 ...
- adb devices 找不到设备怎么办 --- 2
问题现象:在电脑上安装好手机驱动后,手机进入设置---->应用程序---->开发----->勾选USB调试后连接电脑,,在CMD命令中输入adb devices发现没有设备. 解决方 ...
- Python学习笔记——常量和变量
数字常量 如下是python的一些常量表示形式: 2 整数 3.23 浮点数 52.3e-4 科学技术法表示的浮点数 -5 -4.6j ...
- JAVA中使用freemark生成自定义文件(json、excel、yaml、txt)
原文:http://blog.csdn.net/jinzhencs/article/details/51461776 场景:在我们工作中,有时需要生成一些文件,可能它不是一种标准的格式,比如JSON. ...
- [Android Traffic] 根据网络类型更改下载模式
转载自: http://blog.csdn.net/kesenhoo/article/details/7396321 Modifying your Download Patterns Based on ...
- [置顶]
kubernetes资源对象--ConfigMap
原理 很多生产环境中的应用程序配置较为复杂,可能需要多个config文件.命令行参数和环境变量的组合.使用容器部署时,把配置应该从应用程序镜像中解耦出来,以保证镜像的可移植性.尽管Secret允许类似 ...
- [置顶]
zabbix通过lykchat发送告警信息配置过程
本文介绍zabbix通过lykchat发送告警信息配置过程. lykchat代码在https://github.com/lykops/lykchat/ 步骤 编写脚本 1).查看服务器端的配置文件et ...
- ubuntu配置 测试环境 记录
1 更新源 进入 /etc/apt/sources.list sudo vim进入, 更改为如下源 # See http://help.ubuntu.com/community/UpgradeNot ...
- apache只记录指定URI的日志
我的需求是,把类似请求 www.aaa.com/aaa/... 这样的请求才记录日志.在httpd.conf 或者 相关的虚拟主机配置文件中添加SetEnvIf Request_URI "^ ...
- Hibernate3和4版本的不同
hibernate4的改动较大只有spring3.1以上版本能够支持,Spring3.1取消了HibernateTemplate,因为Hibernate4的事务管理已经很好了,不用Spring再扩展了 ...