iOS--- Autolayout 基础
来源:互联网 发布:eq一卡通网络连接失败 编辑:程序博客网 时间:2024/06/14 09:02
Autolayout 基础
Archives
iOS
如果您觉得我的博客对您有帮助,请通过关注我的新浪微博 MicroCai 支持我,谢谢!
这两天自学的时候,复习了下 autolayout。本来想来写一篇文章记录下学习内容,搜了一下写的人真不少,也写得挺不错的。照理我就不用写了,但心里总有那么一点点遗憾,这么流行的东西,我博客里怎么能没有呢?既然如此,那就多写点基础内容。
警告:博主为博文贴了十几张图片,查克拉耗尽,生命垂危,关注 MicroCai 或者送香吻一个就能唤醒博主,好人一生平安。
- Autolayout 基础
- Interface Builder 介绍
- Align对齐
- Pin设置相对大小和位置
- Resolve Auto Layout Issues解决 autolayout 问题
- Resizing Behavior
- SizeClass
- 重写布局
- 使用 Xcode 6 预览
- VFLVisual Format Language
- Autolayout 常见问题
- Masonry替代 Autolayout
- 内容目录
- Interface Builder 介绍
Interface Builder 介绍
在 storyboard 界面的右下角,有这么一排图标
鼠标放上去停留一小段时间,就会告诉你它们的作用,从左至右依次是:
- Align:用来设置对齐相关的约束;
- Pin:设置相对大小和位置;
- Resolve Auto Layout Issues:解决 autolayout 问题;
- Resizing Behavior:设置重置大小会如何影响其他对象;
Align(对齐)
下面这些是两个视图层次中同一级的 View 的对齐。
Leading Edges:头对齐
Trailing Edges:尾对齐
Top Edges:顶部对齐
Bottom Edges:底部对齐Horizontal Centers:水平中心对齐
Vertical Centers:垂直中心对齐
BaseLines:基准线(默认 View 底部位置)水平对齐,用来对齐有文字的控件,如 UILabel、UIButton 等
下面这些是 SuperView 和 SubView 的对齐,SuperView 是 SubView 的 Container
Horizontal Center in Container:View 的水平中心和容器的水平中心的相对距离
Vertical Center in Container:View 的垂直中心和容器的垂直中心的相对距离
在对齐数值的白色输入框内,点击右侧下拉框可以选择“Use Current Canvas Value”,意思是使用当前 Xib/Storyboard 内的差值。
最后一个 Update Frames 表示如何更新 frame,有三个选项,默认为 None 不更新
None:不更新 frame
Items of New Constraints:更新新添加的 frame
All Frames in Container:更新容器内所有的 frame
Pin:设置相对大小和位置
最上面有四个矩形框和四条虚线,原来用过 auto resizing 的童鞋应该会比较眼熟。矩形框里的数字表示当前的 View 到最近的 View (注意:不是 SuperView)边缘的距离。
在矩形框下面有一行灰色字的可选项“Constrain to margins”,意思是在设置上述约束是相对于 margins 设置的,而 margin 默认距离是 16。如和上边缘距离 306,加上 16,所以 View 的顶部和它上边最近的 View 的距离是 312。
其他的选项
Width:设置宽度
Height:设置高度Equal Widths:设置两个同级 View 的宽度关系
Equal Heights:设置两个同级 View 的高度关系
Aspect Ratio:设置 View 自身宽高比例Align:和前面所讲的 Align 一致。那为什么 Align 还会出现在这边呢?估计和 Pin 有关系,故而也放到这边。
Resolve Auto Layout Issues:解决 autolayout 问题
可以选择要处理的 Views:当前选中的 Views 或 Controller 内所有的 Views
Update Frames:更新 frame
Update Constraints:更新约束
Add Missing Constraints:添加遗漏的约束
Reset to Suggested Constraints:重置约束
Clear Constraints:清除约束
Resizing Behavior
设置重置大小会如何影响其他对象,有两个选项(默认已勾选)
Sublings and Ancestors:影响同级兄弟 Views 和祖先 Views
Descendants:影响后代 Views
(这个地方我也没弄明白,我查了文档和一些博客,都只是做了简单文字说明,然后自己试了下勾选和未勾选的情况,还是找不到有什么区别,所以也没明白具体是如何影响。)
SizeClass
SizeClass 中文意思可以理解为尺寸等级,就是在 autolayout 的基础上,加上屏幕尺寸类型的定义。SizeClass 的宽高有三种类型:Compact(紧凑)、Any(任意)、Regular(普通)
不同设备屏幕的宽高类型
当你具体选择尺寸时, IB 会显示出当前选择的屏幕尺寸的相关信息,如宽高类型,屏幕尺寸类型,这个尺寸适用于哪些设备等。
重写布局
如果你设置的某种类型屏幕的约束布局,在其他类型屏幕下出现不符合意图的布局时,可以重写布局,即重新设置该屏幕类型下的布局。
如图的 UIView 设置了 wAny|hAny 上下左右四个约束
点击这个 UIView,查看 Attribute Inspector 有个 install 选项被勾选上了。
Installed/UnInstalled 表示的意思是当前布局是否被安装在什么类型的屏幕上。Installed/UnInstalled 前面如果没有东西,表示布局是安装在 wAny|hAny 类型的屏幕上。现在如果我们要单独设置某种类型屏幕的布局可以点击加号,选择屏幕类型
将新的屏幕类型的勾选取消掉,则当前布局在该类型下不起作用,此时就可以切换类型,重新设置所有约束。
若只想修改一条约束,也可以点击 Size Inspector
选择 Constraints —— All 显示所有约束,双击任意一条约束,会出现一个和之前类似的界面
Installed 前面也有个加号,估计你也该猜到了,这里的修改和之前也是类似的。
如果 Xcode 的 Inspector 一些选项前面有加号,就表明它可以被重写,比如刚刚这幅图中,Installed
选项上方的 Constant 前面也有加号,说明它也是可以被重写的。类似的还有 UILabel 的 font,但是:与重写布局不同,在不同的 size class 中改变文字的属性始终会影响基础布局中的文字。它不能像布局一样,在不同的size class中设置不同的属性值。我们通过下面的方法来解决这一问题。 参考:Swift自适应布局(Adaptive Layout)教程(二)。
使用 Xcode 6 预览
在屏幕类型多了这么多之后,做不同类型的屏幕适配也是需要花不少功夫。如果每次适配一种类型屏幕后,都要运行后才能查看效果,效率简直太低下了。Xcode 6 提供了 preview 预览功能,针对这个问题可以节省不少时间。
点击 Xcode Tool Bar 的 Assistant Editor 按钮,显示另一个窗口
选择 Preview 展示预览界面
如果想在预览中同时显示不同类型的屏幕,可以在预览界面的左下角点击加号,选择更多设备
如果想要查看横屏/竖屏,点击设备下方的旋转按钮即可
VFL(Visual Format Language)
不得不说,VFL 的语法比手写 Constraints 的量少了很多,也有象形文字的感觉,但是和普通的 Swift 语法风格比起来实在不搭调。这个内容直接看 官方文档 吧,都用图表示出来,说明的挺清楚的。
Autolayout 常见问题
设置了 autolayout 之后,在代码中还能用 self.someView.frame 修改 frame 吗?
不能为什么有些控件只设置 x、y 值约束,也不会出错?
UIKit 的一些控件如 UILabel、UIImageView 等有自适应特性,会根据内容自适应尺寸,所以不需要再约束其宽高。同样的约束用在 UIScrollView 和 UIImageViwe 上,为什么会出现错误?
参考 Nonomori 的文章:ScrollView 与 Autolayout
Masonry:替代 Autolayout
Masonry 是目前为止公认的 autolayout 最好的替代方案,语法简洁、直观,不会出现各种意外之外的布局。根据网上了解到的一些情况,Masonry 在大型项目中的效果比 autolayout 好很多。
举个简单的例子:要使一个 subview 填充 superview,但和 superview 的边界间距(inset) 10 个像素。使用 NSLayoutConstraints 是这么写的
<ol class="linenums" style="box-sizing: border-box;"><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="typ" style="box-sizing: border-box;">UIView</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;"><span style="box-sizing: border-box;"></span></span><span class="pln" style="box-sizing: border-box;">superview </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" style="box-sizing: border-box;">self</span><span class="pun" style="box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="typ" style="box-sizing: border-box;">UIView</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;"></span><span class="pln" style="box-sizing: border-box;">view1 </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[[</span><span class="typ" style="box-sizing: border-box;">UIView</span><span class="pln" style="box-sizing: border-box;"> alloc</span><span class="pun" style="box-sizing: border-box;">]</span><span class="pln" style="box-sizing: border-box;"> init</span><span class="pun" style="box-sizing: border-box;">];</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;">view1</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">translatesAutoresizingMaskIntoConstraints </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> NO</span><span class="pun" style="box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;">view1</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">backgroundColor </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="typ" style="box-sizing: border-box;">UIColor</span><span class="pln" style="box-sizing: border-box;"> greenColor</span><span class="pun" style="box-sizing: border-box;">];</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L5" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pun" style="box-sizing: border-box;">[</span><span class="pln" style="box-sizing: border-box;">superview addSubview</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">view1</span><span class="pun" style="box-sizing: border-box;">];</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L6" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L7" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="typ" style="box-sizing: border-box;">UIEdgeInsets</span><span class="pln" style="box-sizing: border-box;"> padding </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" style="box-sizing: border-box;">UIEdgeInsetsMake</span><span class="pun" style="box-sizing: border-box;">(</span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L8" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L9" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pun" style="box-sizing: border-box;">[</span><span class="pln" style="box-sizing: border-box;">superview addConstraints</span><span class="pun" style="box-sizing: border-box;">:@[</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="com" style="box-sizing: border-box;">//view1 constraints</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="typ" style="box-sizing: border-box;">NSLayoutConstraint</span><span class="pln" style="box-sizing: border-box;"> constraintWithItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">view1</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeTop</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> relatedBy</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutRelationEqual</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L5" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> toItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">superview</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L6" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeTop</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L7" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> multiplier</span><span class="pun" style="box-sizing: border-box;">:</span><span class="lit" style="box-sizing: border-box;">1.0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L8" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> constant</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">top</span><span class="pun" style="box-sizing: border-box;">],</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L9" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="typ" style="box-sizing: border-box;">NSLayoutConstraint</span><span class="pln" style="box-sizing: border-box;"> constraintWithItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">view1</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeLeft</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> relatedBy</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutRelationEqual</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> toItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">superview</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeLeft</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L5" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> multiplier</span><span class="pun" style="box-sizing: border-box;">:</span><span class="lit" style="box-sizing: border-box;">1.0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L6" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> constant</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">left</span><span class="pun" style="box-sizing: border-box;">],</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L7" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L8" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="typ" style="box-sizing: border-box;">NSLayoutConstraint</span><span class="pln" style="box-sizing: border-box;"> constraintWithItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">view1</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L9" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeBottom</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> relatedBy</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutRelationEqual</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> toItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">superview</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeBottom</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> multiplier</span><span class="pun" style="box-sizing: border-box;">:</span><span class="lit" style="box-sizing: border-box;">1.0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> constant</span><span class="pun" style="box-sizing: border-box;">:-</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">bottom</span><span class="pun" style="box-sizing: border-box;">],</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L5" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L6" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">[</span><span class="typ" style="box-sizing: border-box;">NSLayoutConstraint</span><span class="pln" style="box-sizing: border-box;"> constraintWithItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">view1</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L7" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeRight</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L8" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> relatedBy</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutRelationEqual</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L9" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> toItem</span><span class="pun" style="box-sizing: border-box;">:</span><span class="pln" style="box-sizing: border-box;">superview</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> attribute</span><span class="pun" style="box-sizing: border-box;">:</span><span class="typ" style="box-sizing: border-box;">NSLayoutAttributeRight</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> multiplier</span><span class="pun" style="box-sizing: border-box;">:</span><span class="lit" style="box-sizing: border-box;">1</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> constant</span><span class="pun" style="box-sizing: border-box;">:-</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">right</span><span class="pun" style="box-sizing: border-box;">],</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">]];</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li></ol>
一个简单的布局竟然写了这么多代码,有种要死的感觉。用 Masonry 又是什么样子呢?
<ol class="linenums" style="box-sizing: border-box;"><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="typ" style="box-sizing: border-box;">UIEdgeInsets</span><span class="pln" style="box-sizing: border-box;"> padding </span><span class="pun" style="box-sizing: border-box;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" style="box-sizing: border-box;">UIEdgeInsetsMake</span><span class="pun" style="box-sizing: border-box;">(</span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" style="box-sizing: border-box;">10</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pun" style="box-sizing: border-box;">[</span><span class="pln" style="box-sizing: border-box;">view1 mas_makeConstraints</span><span class="pun" style="box-sizing: border-box;">:^(</span><span class="typ" style="box-sizing: border-box;">MASConstraintMaker</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;"><span style="box-sizing: border-box;"></span></span><span class="pln" style="box-sizing: border-box;">make</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L3" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> make</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">top</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equalTo</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">superview</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">mas_top</span><span class="pun" style="box-sizing: border-box;">).</span><span class="kwd" style="box-sizing: border-box;">with</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">offset</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">top</span><span class="pun" style="box-sizing: border-box;">);</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" style="box-sizing: border-box;">//with is an optional semantic filler</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L4" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> make</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">left</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equalTo</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">superview</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">mas_left</span><span class="pun" style="box-sizing: border-box;">).</span><span class="kwd" style="box-sizing: border-box;">with</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">offset</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">left</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L5" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> make</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">bottom</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equalTo</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">superview</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">mas_bottom</span><span class="pun" style="box-sizing: border-box;">).</span><span class="kwd" style="box-sizing: border-box;">with</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">offset</span><span class="pun" style="box-sizing: border-box;">(-</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">bottom</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L6" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> make</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">right</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equalTo</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">superview</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">mas_right</span><span class="pun" style="box-sizing: border-box;">).</span><span class="kwd" style="box-sizing: border-box;">with</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">offset</span><span class="pun" style="box-sizing: border-box;">(-</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">right</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L7" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;">}];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li></ol>
代码少了至少一半以上,终于能缓过气来了。但是还不够,还能更少。
<ol class="linenums" style="box-sizing: border-box;"><li class="L0" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pun" style="box-sizing: border-box;">[</span><span class="pln" style="box-sizing: border-box;">view1 mas_makeConstraints</span><span class="pun" style="box-sizing: border-box;">:^(</span><span class="typ" style="box-sizing: border-box;">MASConstraintMaker</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;"></span><span class="pln" style="box-sizing: border-box;">make</span><span class="pun" style="box-sizing: border-box;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" style="box-sizing: border-box;">{</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L1" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;"><span class="pln" style="box-sizing: border-box;"> make</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">edges</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">equalTo</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">superview</span><span class="pun" style="box-sizing: border-box;">).</span><span class="kwd" style="box-sizing: border-box;">with</span><span class="pun" style="box-sizing: border-box;">.</span><span class="pln" style="box-sizing: border-box;">insets</span><span class="pun" style="box-sizing: border-box;">(</span><span class="pln" style="box-sizing: border-box;">padding</span><span class="pun" style="box-sizing: border-box;">);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li><li class="L2" style="box-sizing: border-box;"><code class="has-numbering" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 0px;font-size:undefined; color: inherit; background-color: transparent; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal;">}];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul></li></ol>
至尊宝:整个世界都清净了!!!
Masonry 的 Github 地址
内容目录
- Autolayout 基础
- Interface Builder 介绍
- Align对齐
- Pin设置相对大小和位置
- Resolve Auto Layout Issues解决 autolayout 问题
- Resizing Behavior
- SizeClass
- 重写布局
- 使用 Xcode 6 预览
- VFLVisual Format Language
- Autolayout 常见问题
- Masonry替代 Autolayout
- 内容目录
- Interface Builder 介绍
- Autolayout 基础
- About-Blog 1
- MicroCai 的博客
- Archives 18
- * 客户端实现负载均衡
- 问题记录:iOS 用户行为统计代码的剥离
- [译] 照片框架
- Autolayout 基础
- ARC 下内存泄露的那些点
- KVO 和 KVC 的使用和实现
- iOS Events and Responder Chain
- 两个超大整数相加
- Effective Objective-C Notes:GCD 实现同步锁
- Effective Objective-C Notes:理解类对象
- Effective Objective-C Notes:理解消息传递机制
- Effective Objective-C Notes:Objective-C命名规范
- Effective Objective-C Notes:概览
- block没那么难(三):block和对象的内存管理
- block没那么难(二):block和变量的内存管理
- block没那么难(一):block的实现
- iOS 集合的深复制与浅复制
- [译] Block 小测验
- iOS 17
- * 客户端实现负载均衡
- 问题记录:iOS 用户行为统计代码的剥离
- [译] 照片框架
- Autolayout 基础
- ARC 下内存泄露的那些点
- KVO 和 KVC 的使用和实现
- iOS Events and Responder Chain
- Effective Objective-C Notes:GCD 实现同步锁
- Effective Objective-C Notes:理解类对象
- Effective Objective-C Notes:理解消息传递机制
- Effective Objective-C Notes:Objective-C命名规范
- Effective Objective-C Notes:概览
- block没那么难(三):block和对象的内存管理
- block没那么难(二):block和变量的内存管理
- block没那么难(一):block的实现
- iOS 集合的深复制与浅复制
- [译] Block 小测验
- 翻译 2
- [译] 照片框架
- [译] Block 小测验
- 计算机基础 5
- 进程间通信的方式
- 排序算法整理
- 算法的时间复杂度
- HTTP 请求基础
- RESTful 与 HTTP
- 趣味题 1
- 两个超大整数相加
- iOS Autolayout基础-Masonry
- iOS--- Autolayout 基础
- Autolayout 基础
- Autolayout 基础
- Autolayout 基础
- Autolayout 基础
- Autolayout 基础
- ios AutoLayout
- ios AutoLayout
- iOS-AutoLayout
- IOS autolayout
- iOS AutoLayOut
- iOS AutoLayout
- ios autolayout
- iOS autoLayout
- iOS AutoLayout
- IOS学习之路AutoLayout(自动布局)--基础认识
- AutoLayout自定义布局基础
- Cocos2dx 动画的创建运行
- iOS/OS X内存管理:借助工具解决内存问题
- Linux ALSA声卡驱动之二:声卡的创建
- 内核模式下的注册表操作
- 二维码扫描AVFoundation
- iOS--- Autolayout 基础
- final关键字那点事
- PAM模板
- 内核模式下的文件操作
- linux环境下安装mysql
- Linux ALSA声卡驱动之三:PCM设备的创建
- 数据库基本知识
- leetcode176---Second Highest Salary
- iOS---开发技巧(系列十五:autolayout自动布局)