上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类。这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束。

创建布局约束

创建布局约束的方式

iOS 中使用Auto Layout构建布局约束的方式有三种:

  • 用IB设计界面。IB能够生成帮助开发人员高速布局你的约束,你能够在可视化编辑器中定制你的约束集合
  • 为每个视图提供一个约束,来构建NSLayoutConstraint类的实例对象
  • 使用可视化格式语言(VFL)描写叙述约束,进行UI布局

    对于以上三种创建布局约束的方式,作者在开发中经经常使用到是VFL

创建布局约束的规则

不管是哪有一种方式创建布局约束。读者都应该明确哪些视图之间是能够创建约束的。

当约束引用两个视图的时候,这两个视图一定要属于同一视图层次结构。即:

  1. 一个视图是另外一个视图的父视图
  2. 两个视图是必须是兄弟视图

在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轴方向,view1view2的间隔20个像素点,且view2的宽度等于width,当中width为44。

VFL语法结构

(<orientation>:)?(<superView><connection>)?<view>(<connection><view>)*(<connection><superView>)?

?

代表可选项

*代表该项会出现0次或者多次

从上面的语法结构定义来看,三个字:看不懂!然而其实写起来灰常简单。

  1. 方向orientation:VFL的開始是从一个可选方向開始的,能够是H:,代表水平方向;也能够是V:,代表垂直方向。

    如这种一个语法格式:H:[view1]-30-[view2],表示在水平方向上,view1的右边距离view2的左边30个像素。又如这种一个语法格式:V:[view1]-30-[view2],表示在垂直方向上,view1的下边距离view2的上边30个像素。假设不写H:或者V:,那么系统会默觉得H:,可是作者并不建议这样做。

  2. 视图名称:视图的名称被一对方括号包围。如:[view1]。当然view1不是随便取的。它须要和你控件对象的变量名要一样。

  3. 链接符:-

解释到这里大家对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之创建布局约束的更多相关文章

  1. (iOS)使用auto layout进行复杂布局时,UILabel的相关trick

    本文转载至 http://blog.csdn.net/madongchunqiu/article/details/47960745  本文首发于CSDN:http://blog.csdn.net/ma ...

  2. 从 Auto Layout 的布局算法谈性能

    这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...

  3. Auto Layout 使用心得

    此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了. 简介 Auto ...

  4. 【转】Auto Layout 进阶

    原文:http://blog.csdn.net/ysy441088327/article/details/12558097   引言: Auto Layout是iOS6发布后引入的一个全新的布局特性, ...

  5. Auto Layout简单应用——以编码的方式实现Auto Layout自动布局(二)

    在上一篇文章iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)中我们简单的介绍了使用Visual Format Language创建布局约束来实现自动布局,这种方法创建的布局约 ...

  6. Beginning Auto Layout Tutorial in iOS 7: Part 6

    Gallery example 屏幕有四个分开的相同的矩形,每个矩形有一个label和一个image view.创建一个Gallery的项目.在Main.storyboard中,拖拉一个view大小为 ...

  7. iOS 开发实践之 Auto Layout

    原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自 ...

  8. ios8来了,屏幕更大,准备好使用 iOS Auto Layout了吗?

    引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Au ...

  9. [Android开发学iOS系列] Auto Layout

    [Android开发学iOS系列] Auto Layout 内容: 介绍什么是Auto Layout. 基本使用方法 在代码中写约束的方法 Auto Layout的原理 尺寸和优先级 Auto Lay ...

随机推荐

  1. [CF526G]Spiders Evil Plan

    题目大意: 给出一个$n(n\leq 10^5)$个结点的带边权的树,$q(q\leq 10^5)$个询问,每次询问用$y$条路径覆盖整棵树且覆盖$x$至少一次,最多能覆盖的道路长度是多少? 强制在线 ...

  2. [android]加载大量图片避免OOM

    原理是事先取得图片的长宽,直接读出缩略图. BitmapFactory.Options options = new BitmapFactory.Options(); options.inPreferr ...

  3. tc: 模拟网络异常的工具-----------鸟窝

    http://colobu.com/2017/04/21/tc-introduction/

  4. Springboot默认加载application.yml原理以及扩展

    Springboot默认加载application.yml原理以及扩展 SpringApplication.run(...)默认会加载classpath下的application.yml或applic ...

  5. WEB-INF有关的目录路径问题总结

    1.资源文件只能放在WebContent下面,如 CSS,JS,image等.放在WEB-INF下引用不了. 2.页面放在WEB-INF目录下面,这样可以限制访问,提高安全性.如JSP,html 3. ...

  6. C#设计模式---观察者模式简单例子

    在开发过程中经常遇到一个模块中的 一个方法调用了其他模块中相关的方法 比如说在一个系统中,如果出现了错误,就调用专门进行错误处理的模块中的方法进行错误处理 而因为错误处理的操作有很多,所以将这些具体的 ...

  7. 怎样允许其他电脑连接本机MySQL

    2017-04-20 1.***\bin\>MySQL -h localhost -u root -p  这样应该可以进入MySQL服务器  执行代码如下: MySQL>use mysql ...

  8. [Debug] Diagnose a Slow Page Using Developer Tools

    Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happenin ...

  9. perl学习笔记一

    标量数据 标量:数字.字符.可以存储在标量变量中也可以从文件和设备中读取. 数字:所有数字内部格式相同——双精度浮点数. 浮点数直接量:程序员在程序中直接键入的数字. 整数直接量:6129804028 ...

  10. 【BIEE】BIEE 11g BI Publisher报表开发实例

    环境准备 JDK下载地址:直接去百度软件中心下载即可 BIPublisher下载地址:http://pan.baidu.com/s/1bpk03Jh 本例子中以win7 32位操作系统为例 1.安装已 ...