iOS 开发实践之 Auto Layout

叶辰飞 發表於 2021-3-28 17:55:00

<blockquote>
本文为迁移文章，原发布时间为 2014-08-17 22:35:00
</blockquote>

2018.09.21 更新：
修复了死链。 
距离本文最初发布已经过去 4 年多了，Auto Layout 发生了一些变化，许多重要的特性被引入，比以前更加强大了。但这篇文章依然没有过时，如果你希望学习并理解 Auto Layout，希望这篇文章能够帮到你。


2015.11.11 更新：
由于 Masonry 强大的特性，建议大家优先考虑使用它。

本文是博主 iOS 开发实践系列中的一篇，主要讲述 iOS 中 Auto Layout（自动布局）在实际项目中的使用。
Auto Layout 在 2012 年的 iOS 6 中发布，距今已经 2 年多了，如果从 2011 年在 Mac OS X 上发布的 Auto Layout 开始算起，已经超过 3 年了。如果你的简历上写着 2 年以上工作经验，而竟然不会使用 Auto Layout，真有点不可思议。
本文将会通过若干个 Demo 进行讲解，通过实践来理解 Auto Layout 到底是什么，该如何使用（包括在 Xib 中使用以及手动编码）。
<h2 id="auto-layout-是什么">Auto Layout 是什么?</h2>
我的理解：Auto Layout 是一种基于约束的布局系统，它可以根据你在元素（对象）上设置的约束自动调整元素（对象）的位置和大小。
官方的说明：
<blockquote>
Auto Layout 是一个系统，可以让你通过创建元素之间关系的数学描述来布局应用程序的用户界面。——《Auto Layout Guide》
</blockquote>
<blockquote>
Auto Layout 是一种基于约束的，描述性的布局系统。——《Taking Control of Auto Layout in Xcode 5 - WWDC 2013》
</blockquote>
这里有几个关键字：
<ul>
<li>元素</li>
<li>关系</li>
<li>约束</li>
<li>描述</li>
</ul>
<h3 id="元素element">元素（Element）</h3>
低头看看你电脑的键盘，你可以把每一个按键当做一个元素；对于 iOS 系统来说，你可以把桌面上每一个应用图标当做一个元素；对于某一款 iOS 应用来说，你可以把视图中的每一个子视图当做一个元素。
事实上，你也可以把整个键盘、桌面或者视图当做一个元素。
<h3 id="关系relation">关系（Relation）</h3>
元素之间可以有关系。例如在键盘上 <code>Q</code> 键和 <code>W</code> 键之间有关系。是什么关系呢？有很多，例如 <code>Q</code> 键在 <code>W</code> 键的左边，<code>W</code> 键在 <code>Q</code> 键的右边，<code>Q</code> 键和 <code>W</code> 键之间相距 0.5 厘米等等。
不理解？试着把键盘想象成 <code>View</code>，把按键想象成 <code>Button</code>，再思考一遍。
<h3 id="约束constraint">约束（Constraint）</h3>
元素之间关系的限制。约束是 Auto Layout 系统中最重要的概念。我们上面提到的 <code>左边</code>、<code>右边</code> 以及 <code>相距 0.5 厘米</code> 等这些都是约束，它们限制了元素之间的关系。
<h3 id="描述description">描述（Description）</h3>
定义约束来限制元素之间的关系。描述定义了元素之间的关系及约束。
{% raw %} 
继续用键盘举例，<code>Q</code> 键的长宽均为 1 厘米，左边距离键盘的左边缘 10 厘米，上边距离键盘的顶部 5 厘米。这句话就可以定位 <code>Q</code> 键在键盘中的位置，很轻松就可以计算出 <code>Q</code> 键的 <code>frame</code> 为 <code>{{10.0, 5.0}, {1.0, 1.0}}</code>。
现在 <code>Q</code> 键的坐标已经确定，那么 <code>W</code> 键的坐标可以这样描述：顶部和 <code>Q</code> 键对齐，大小和 <code>Q</code> 键相等，位于 <code>Q</code> 键右侧 0.5 厘米处。仔细想想，这句话中包含了元素间的关系，关系间的约束，可以直接计算出 <code>W</code> 键的 <code>frame</code>。
<h2 id="忘掉传统的-springs--struts-布局方式">忘掉传统的 Springs & Struts 布局方式</h2>
事实上如果你用传统的设置 frame 的布局方式的思维来理解上面的 <code>Q</code> 键和 <code>W</code> 键的布局也说的通。
因为在 Auto Layout 中，当你描述完之后， Auto Layout 会自动帮你计算出 frame。换句话说，你的描述告诉了 Auto Layout 如何帮你计算出 frame。所以，你也可以理解为你间接的设置了 frame。为什么要这么做呢？为什么不直接设置 frame？这是因为使用 Auto Layout 有很多好处：
<ul>
<li>多数情况下旋转屏幕不用再做额外的处理</li>
<li>更容易适配不同尺寸的屏幕</li>
<li>上手后布局非常简单容易，布局逻辑更清晰</li>
</ul>
Auto Layout 和传统布局很大的不同之处在于它是一种相对的布局方式。怎么理解这句话？上面提到
<blockquote>
<code>W</code> 键位于 <code>Q</code> 键右侧 0.5 厘米处。
</blockquote>
传统的布局无法直接表示，你必须把这种布局手动转换为传统布局代码。例如上面的 <code>Q</code> 键和 <code>W</code> 键的传统布局代码看起来可能是这样：
<pre><code class="language-objc">q.frame = CGRectMake(CGRectGetMinX(keyBoard.frame) + 10.f, CGRectGetMinY(keyBoard.frame) + 5.f, 1.f, 1.f);
w.frame = CGRectMake(CGRectGetMaxX(q.frame) + 0.5f, CGRectGetMinY(q.frame), CGRectGetWidth(q.frame), CGRectGetHeight(q.frame));
</code></pre>
使用 Auto Layout 的布局代码看起来像这样：
<pre><code class="language-objc">// 伪代码
q.width = 1.f;
q.height = 1.f;
q.left = keyboard.left + 10.f;
q.top = keyboard.top + 5.f;

w.top = q.top;
w.width = q.width;
w.height = q.height;
w.left = q.right + .5f;
</code></pre>
Auto Layout 不仅能轻松表示这种布局，而且相对于传统的布局更清晰简洁易懂，还免费附赠很多优点，有什么理由不使用 Auto Layout 呢？
实践中我发现对于很多新手来说，Auto Layout 这种布局方式比较容易理解接受，相反很多对传统布局很熟练的人却不太容易理解，总是用传统布局的思维来思考，所以如果可能的话，我建议你暂时忘掉传统的布局方式。
<h3 id="autoresizing-mask">Autoresizing Mask</h3>
事实上我不打算讲这个东西，以及它和 Auto Layout 的区别和联系。如果你不知道，对学习 Auto Layout 不会有什么影响。
你唯一需要注意的是在使用 Auto Layout 时，首先需要将视图的 <code>translatesAutoresizingMaskIntoConstraints</code> 属性设置为 <code>NO</code>。这个属性默认为 <code>YES</code>，如果你是使用 Xib 的话，这个属性会自动帮你设置为 <code>NO</code>。当它为 <code>YES</code> 时，运行时系统会自动将 Autoresizing Mask 转换为 Auto Layout 的约束，这些约束很有可能会和我们自己添加的产生冲突。
<h2 id="auto-layout-基础知识">Auto Layout 基础知识</h2>
无论是在 Xib 中还是代码中使用 Auto Layout，你都需要了解 Auto Layout 的一些必要知识。这些你现在不理解没有关系，后面我们会详细讲述。
<h3 id="约束-constraint">约束（Constraint）</h3>
Auto Layout 中约束对应的类为 <code>NSLayoutConstraint</code>，一个 <code>NSLayoutConstraint</code> 实例代表一条约束。
<code>NSLayoutConstraint</code> 有两个方法，第一个是
<pre><code class="language-objc">+ (id)constraintWithItem:(id)view1
 attribute:(NSLayoutAttribute)attribute1
 relatedBy:(NSLayoutRelation)relation
 toItem:(id)view2
 attribute:(NSLayoutAttribute)attribute2
 multiplier:(CGFloat)multiplier
 constant:(CGFloat)constant;
</code></pre>
不要被这个方法的参数吓到，实际上它只做一件事，就是让 <code>view1</code> 的某个 <code>attribute</code> 等于 <code>view2</code> 的某个 <code>attribute</code> 的 <code>multiplier</code> 倍加上 <code>constant</code>，
这里的 <code>attribute</code>可以是上下左右宽高等等。
精简后就是下面这个公式：
<pre><code>view1.attribute1 = view2.attribute2 × multiplier + constant
</code></pre>
还有一个参数是 <code>relation</code>，这是一个关系参数，它标明了上面这个公式两边的关系，它可以是<code>小于等于 (≤)</code>，<code>等于 (=)</code>和<code>大于等于 (≥)</code>。上面的公式假定了这个参数传入的是 <code>=</code>，根据参数的不同，公式中的关系符号也不同。
需要注意的是，<code>≤</code> 或 <code>≥</code> 优先会使用 <code>=</code> 关系，如果 <code>=</code> 不能满足，才会使用 <code><</code> 或 <code>></code>。例如设置一个 <code>≥ 100</code> 的关系，默认会是 100，当视图被拉伸时，100 无法被满足，尺寸才会变得更大。
例子：
1、我们要实现一个如下图的布局。
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175305410-890449043.jpg" alt="" loading="lazy">
布局代码如下：
<pre><code class="language-objc">UIView *view = ;
];
;

CGRect viewFrame = CGRectMake(50.f, 100.f, 150.f, 150.f);

// 使用 Auto Layout 布局
;

// `view` 的左边距离 `self.view` 的左边 50 点.
NSLayoutConstraint *viewLeft = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeLeading
 relatedBy:NSLayoutRelationEqual
 toItem:self.view
 attribute:NSLayoutAttributeLeading
 multiplier:1
 constant:CGRectGetMinX(viewFrame)];
// `view` 的顶部距离 `self.view` 的顶部 100 点.
NSLayoutConstraint *viewTop = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeTop
 relatedBy:NSLayoutRelationEqual
 toItem:self.view
 attribute:NSLayoutAttributeTop
 multiplier:1
 constant:CGRectGetMinY(viewFrame)];
// `view` 的宽度是 60 点.
NSLayoutConstraint *viewWidth = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeWidth
 relatedBy:NSLayoutRelationGreaterThanOrEqual
 toItem:nil
 attribute:NSLayoutAttributeNotAnAttribute
 multiplier:1
 constant:CGRectGetWidth(viewFrame)];
// `view` 的高度是 60 点.
NSLayoutConstraint *viewHeight = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeHeight
 relatedBy:NSLayoutRelationGreaterThanOrEqual
 toItem:nil
 attribute:NSLayoutAttributeNotAnAttribute
 multiplier:1
 constant:CGRectGetHeight(viewFrame)];
// 把约束添加到父视图上.
];
</code></pre>
实现一个如此简单的布局竟然要写这么多的代码，这显然难于推广使用。于是 UIKit 团队发明了另外一种更简便的表达方式进行布局，这个我们后面再讲，现在先看看这段代码。
首先我把 <code>view</code> 的 <code>translatesAutoresizingMaskIntoConstraints</code> 设为了 <code>NO</code>，禁止将 Autoresizing Mask 转换为约束。
然后在设置 <code>viewLeft</code> 这个约束时，<code>attribute</code> 参数使用了 <code>NSLayoutAttributeLeading</code> 而不是 <code>NSLayoutAttributeLeft</code>，这两个参数值都表示左边，但它们之间的区别在于 <code>NSLayoutAttributeLeft</code> 永远表示左边，但 <code>NSLayoutAttributeLeading</code> 是根据习惯区分的，例如在某些文字从右向左阅读的地区，例如阿拉伯，<code>NSLayoutAttributeLeading</code> 表示右边。换句话说，<code>NSLayoutAttributeLeading</code> 是表示文字开始的方向。在英文、中文这种从左往右阅读的文字中它表示左边，在像阿拉伯语、希伯来语这种从右往左阅读的文字中它表示右边。通常情况下，除非你明确要限制在左边，否则你都应该使用 <code>NSLayoutAttributeLeading</code> 表示左边。相对的，表示右边也类似这样。这对于我们的本地化工作有很大的帮助。
然后在设置 <code>viewWidth</code> 和 <code>viewHeight</code> 这两个约束时，<code>relatedBy</code> 参数使用的是 <code>NSLayoutRelationGreaterThanOrEqual</code> 而不是 <code>NSLayoutRelationEqual</code>。
因为 Auto Layout 是相对布局，所以通常你不应该直接设置宽度和高度这种固定不变的值，除非你很确定视图的宽度或高度需要保持不变。
如果一定要设置高度或宽度，特别是宽度，在没有显式地设置内容压缩优先级（Content Hugging Priority，后面会讲到）和内容抗压缩优先级（Content Compression Resistance Priority，后面会讲到）的情况下，尽量不要使用 <code>NSLayoutRelationEqual</code> 这种绝对的关系，这会带来许多潜在的问题：
<ul>
<li>根据内容决定宽度的视图，当内容改变时，外观尺寸无法做出正确的改变</li>
<li>在本地化时过长的文字无法显示，造成文字切断，或文字过短，宽度显得过宽，影响美观</li>
<li>添加了多余的约束时，约束之间冲突，无法显示正确的布局</li>
</ul>
所带来的问题不仅仅局限与这几条，这里只是简单列出几条。
如何正确的设置宽度或高度？给出一些 Tips：
<ul>
<li>如果宽度和高度布局可以改变，使用固有内容尺寸（Intrinsic Content Size，后面会讲到）设置约束（即 size to fit size）。</li>
<li>如果宽度和高度布局不可以改变，改变约束的关系为 <code>≥</code>。</li>
<li>调整压缩优先级和内容抗压缩优先级</li>
</ul>
最后我把所有约束都添加到了 <code>view</code> 的父视图 <code>self.view</code> 上。<code>view</code> 的约束为什么不添加到自身而添加到别的视图上去呢？这是由于约束是根据视图层级自下而上更新的，也就是从子视图到父视图。所以 Auto Layout 添加约束有一套自己的规则，如下：
<ul>
<li>两个同层级间视图的约束，添加到它们共同的父视图上</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175316515-43618822.jpg" alt="" loading="lazy">
<ul>
<li>两个不同层级间视图的约束，添加到它们最近的共同的父视图上</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175326351-1846915136.jpg" alt="" loading="lazy">
<ul>
<li>两个有层级关系的视图的约束，添加到层次较高的视图上（父视图）上</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175337138-960104419.jpg" alt="" loading="lazy">
因为我们属于最后一种情况，所以子视图 <code>view</code> 的约束添加到了父视图 <code>self.view</code> 上。
接下来是第二个方法
<pre><code class="language-objc">+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
 options:(NSLayoutFormatOptions)opts
 metrics:(NSDictionary *)metrics
 views:(NSDictionary *)views;
</code></pre>
这个方法是我们实际编程中最常用的方法。它会根据我们指定的参数返回一组约束。 
这个方法很重要，所以我会详细解释每个参数的用途。
<h4 id="format">format</h4>
这个参数存放的是布局逻辑，布局逻辑是使用 可视化格式语言 (VFL) 编写的。实际编程中我们也是使用 <code>VFL</code> 编写布局逻辑，因为第一个方法明显参数过多，一个简单的布局要写很多代码。
上一个布局使用 <code>VFL</code> 来重构的话，代码如下：
<pre><code class="language-objc">....
;
NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view);
" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
哗，代码量减少了很多。首先我们使用 <code>NSDictionaryOfVariableBindings(...)</code> 宏创建了一个字典 <code>views</code>，这个宏会自动把传入的对象的键路径作为字典的键，把对象作为字典的值。所以 <code>views</code> 字典的内容就像这样：
<pre><code class="language-objc">{@"self.view": self.view, @"view", view}
</code></pre>
<code>VFL</code> 就是这两句：
<code>H:|-50-</code>
<code>V:|-100-</code>
第一句是在水平方向布局，表示 <code>view</code> 左边距离父视图左边 50 点，宽度至少 150 点。（水平方向是宽度）
第二句是在垂直方向上布局，表示 <code>view</code> 顶部距离父视图顶部 100 点，宽度至少 150 点。（垂直方向是高度）
分解说明如下：
<code>H</code> / <code>V</code> 表示布局方向。<code>H</code> 表示水平方向（Horizontal），<code>V</code> 表示垂直方向（Vertical），方向后要紧跟一个 <code>:</code>，不能有空格。
<code>|</code> 表示父视图。通常出现在语句的首尾。
<code>-</code> 有两个用途，单独一个表示标准距离。这个值通常是 8 ；两个中间夹着数值，表示使用中间的数值代替标准距离，如第一句的 <code>-50-</code>，就是使用 50 来代替标准距离。
<code>[]</code> 表示对象，括号中间需要填上对象名，对象名必须是我们传入的 <code>views</code> 字典中的键。对象名后可以跟小括号 <code>()</code>，小括号中是对此对象的尺寸和优先级约束。水平布局中尺寸是宽度，垂直布局中尺寸是高度。如第一句中的 <code>(>=150)</code> 就是对 <code>view</code> 尺寸的约束，因为是水平方向布局，所以它表示宽度大于或等于 150 点。而 150 前面的 <code>>=</code> 就是我们上面第一个方法中提到的关系参数。至于为什么这里使用 <code>>=</code>，上面已经解释过了。括号中可以包含多条约束，如果我们想再加一条约束，保证 <code>view</code> 的宽度最大不超过 200 点，我们可以这样写：<code>H:|-50-</code>。还可以添加优先级约束，这个我们后面再讲。
<code>VFL</code> 语法有几点需要注意：
<ul>
<li>布局语句中不能包含空格</li>
<li>和关系一样，没有 <code>></code>、<code><</code> 这种约束</li>
</ul>
然后下面是一些例子，增加你对 <code>VFL</code> 语法的理解。
例一：
我们在 <code>view</code> 右侧添加另一个视图 <code>view2</code>，效果如图：
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175349336-482257789.jpg" alt="" loading="lazy">
代码如下：
<pre><code class="language-objc">UIView *view = ;
];
;

UIView *view2 = ;
];
;

;
;

NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view, view2);
" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];

-" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
我们讲讲最后的两条新的 <code>VFL</code> 语句：
<code>H:-</code>
从开始的 <code>H:</code> 我们可以判断出这是水平方向的布局，换句话说就是设置视图的 <code>x</code> 和 <code>width</code>。接着的 <code></code>，说明后面的所有视图都是在 <code>view</code> 的右侧；接着是 <code>-</code>，说明后一个视图和 <code>view</code> 之间有一个标准距离的间距；也就是说 x 等于 <code>view</code> 的右侧再加上标准距离，即 <code>CGRectGetMaxX(view) + 标准距离</code>。最后是 <code></code>，这里可以看出后一个视图是 <code>view2</code>，并且它的宽度不小于 50 点。整一句翻译成白话就是说：在水平方向上，<code>view2</code> 在 <code>view</code> 右侧的标准距离位置处，并且它的宽度不小于 50 点。
<code>V:|-100-</code>
从开始的 <code>V:</code> 我们可以判断出这是垂直方向的布局，换句话说就是设置视图的 <code>y</code> 和 <code>height</code>。接着的 <code>|</code> 说明是后一个视图是相对于父视图进行布局；接着是 <code>-100-</code>，说明垂直方向和父视图（顶部）相距 100 点，也就是说 y 等于 100 点。最后是 <code></code>，这和上一句相同，只是因为是垂直方向，所以 50 是设置高度而不是宽度。整一句翻译成白话就是说：在垂直方向上，<code>view2</code> 在相对于父视图(顶部) 100 点的位置处，并且它的高度不小于 50 点。
实际上我们的代码还可以简化：
<pre><code class="language-objc">......
NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view, view2);
-" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
因为两个视图水平方向上是并排（从左到右）的，所以我们可以将水平方向布局的代码合并到一起。而垂直方向我们并非并排的，所以垂直方向的布局代码我们不能合并。这里所讲的并排的意思是后一个在前一个的后面，水平方向上明显是这样，但垂直方向上两个视图的 <code>y</code> 是相同的，所以无法合并在一起布局。
例二：我们继续添加一个视图 <code>view3</code> 填补 <code>view</code> 右下方的空缺，效果如图：
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175401401-455903986.jpg" alt="" loading="lazy">
代码如下：
<pre><code class="language-objc">UIView *view = ;
];
;

UIView *view2 = ;
];
;

UIView *view3 = ;
];
;

;
;
;

NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view, view2, view3);
-" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
-" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
你可能注意到我把每个间距都使用小括号阔了起来，这是可选的，你完全可以直接写间距，这么写只是告诉你还有这种语法。实际上没什么必要这么写，因为 <code>VFL</code> 语法并不支持运算，例如把 <code>(50)</code> 切分为 <code>(10+40)</code> 或 <code>(5*10)</code> 都是不合法的。
最后两行是 <code>view3</code> 的布局代码，简单解释一下：
<code>H:-</code>
水平方向布局，<code>view3</code> 在 <code>view</code> 右侧标准距离处，并且宽度不小于 50 点。
<code>V:|-(100)-</code>
垂直方向布局，<code>view2</code> 距离父视图（顶部）100 点，并且高度不小于 50 点；<code>view3</code> 紧挨着 <code>view2</code> 底部（没有 <code>-</code>），并且高度不小于 100 点。
<h4 id="options">options</h4>
这个参数的值是位掩码，使用频率并不高，但非常有用。它可以操作在 <code>VFL</code> 语句中的所有对象的某一个属性或方向。例如上面的例一，水平方向有两个视图，它们的垂直方向到顶部的距离相同，或者说顶部对齐，我们就可以给这个参数传入 <code>NSLayoutFormatAlignAllTop</code> 让它们顶部对齐，这样以来只需要指定两个视图的其中一个的垂直方向到顶部的距离就可以了。代码：
<pre><code class="language-objc">......
NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view, view
-" options:NSLayoutFormatAlignAllTop metrics:nil views:views]];
" options:0 metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
它的默认值是 <code>NSLayoutFormatDirectionLeadingToTrailing</code>，根据当前用户的语言环境进行设置，比如英文中就是从左到右，希伯来语中就是从右到左。
这个值符合我们常用的选项。<code>NSLayoutFormatDirectionLeadingToTrailing</code> 的值是 <code>0 << 16</code>，所以我们可以直接传入 <code>0</code> 使用此值。
因为是位掩码，所以我们可以使用 <code>|</code> 进行多选，例如例一，我们希望在现有约束的基础上让两个视图的高度相等，那代码可以这样写：
<pre><code class="language-objc">......
NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view, view2);
-" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:views]];
" options:0 metrics:nil views:views]];
</code></pre>
指定两个视图的顶部和底部约束相同，然后只设置其中一个视图的相关约束即可。
灵活使用此参数可以节省不少时间，但这个参数内容太多，如果你有兴趣了解，可以看看我的另一篇博文：《Auto Layout 中的排列选项》
<h4 id="metrics">metrics</h4>
这是一个字典，字典的键必须是出现在 <code>VFL</code> 语句中的字符串，值必须是 <code>NSNumber</code> 类型，作用是将在 <code>VFL</code> 语句中出现的键替换为相应的值。例如本文中的第一个布局的例子，使用了这个参数后代码就变成了这样：
<pre><code class="language-objc">UIView *view = ;
];
;

;

CGRect viewFrame = CGRectMake(50.f, 100.f, 150.f, 150.f);

NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view);

NSDictionary *metrics = @{@"left": @(CGRectGetMinX(viewFrame)),
 @"top": @(CGRectGetMinY(viewFrame)),
 @"width": @(CGRectGetWidth(viewFrame)),
 @"height": @(CGRectGetHeight(viewFrame))};

" options:0 metrics:metrics views:views]];
" options:0 metrics:metrics views:views]];
</code></pre>
聪明的你看了这段代码后肯定已经明白这个参数的用途了，虽然使用频率不高，但依然很有用，特别是要动态计算约束值的时候非常有用。
实际上这个参数也可以使用 <code>NSDictionaryOfVariableBindings(...)</code> 宏来快速创建，代码如下：
<pre><code class="language-objc">......
;

NSNumber *left = @50.f;
NSNumber *top = @100.f;
NSNumber *width = @150.f;
NSNumber *height = @150.f;

NSDictionary *views = NSDictionaryOfVariableBindings(self.view, view);
NSDictionary *metrics = NSDictionaryOfVariableBindings(left, top, width, height);

" options:0 metrics:metrics views:views]];
" options:0 metrics:metrics views:views]];
</code></pre>
<h4 id="views">views</h4>
又是一个字典，包含了 <code>VFL</code> 语句中用到的视图。字典的键必须是出现在 <code>VFL</code> 语句中的视图名称，值必须视图的实例。这个字典我们在讲 <code>format</code> 时已经讲过，也用过很多次，相信你早已明白是怎么回事了。
讲了这么多，可能你也发现了，只要学会了 <code>VFL</code> 语法，就可以方便地使用 Auto Layout 了，其他的知识都属于辅助选项，会的话，布局更轻松一些，不会也没关系，实践多了，自然就会了。
<h3 id="优先级-priority-level">优先级（Priority level）</h3>
约束条件有优先级，高优先级约束会比低优先级约束优先得到满足，系统内置了 4 个优先级：
<pre><code class="language-objc">enum {
UILayoutPriorityRequired = 1000,
UILayoutPriorityDefaultHigh = 750,
UILayoutPriorityDefaultLow = 250,
UILayoutPriorityFittingSizeLevel = 50,
};
typedef float UILayoutPriority;
</code></pre>
<ul>
<li>UILayoutPriorityRequired 这是默认值，这意味着这个约束条件必须被精确地满足。</li>
<li>UILayoutPriorityDefaultHigh</li>
<li>UILayoutPriorityDefaultLow</li>
<li>UILayoutPriorityFittingSizeLevel 这是内置的最低优先级。</li>
</ul>
相信你已经看到每个等级的数值了，优先级的取值在 <code>0 ~ 1000</code> 之间，取值越大，优先级越高，越会被优先满足。
每个约束的默认优先级就是 <code>UILayoutPriorityRequired</code>，这意味着你给出的所有约束都必须得到满足，一旦约束间发生冲突，你的应用就会 Crash。这也是在使用 Auto Layout 时经常会犯的错误：没有给约束设置适当的优先级。
举个例子说明优先级设置不当的情况，给我们首次使用 Auto Layout 时的例子再添加一个约束：
<pre><code class="language-objc">......

// `view` 的高度是 60 点.
NSLayoutConstraint *viewHeight = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeHeight
 relatedBy:NSLayoutRelationGreaterThanOrEqual
 toItem:nil
 attribute:NSLayoutAttributeNotAnAttribute
 multiplier:1
 constant:CGRectGetHeight(viewFrame)];
// `view` 紧贴着 `self.view` 的左边.
NSLayoutConstraint *marginLeft = [NSLayoutConstraint constraintWithItem:view
 attribute:NSLayoutAttributeLeading
 relatedBy:NSLayoutRelationEqual
 toItem:self.view
 attribute:NSLayoutAttributeLeading
 multiplier:1
 constant:0];

// 把约束添加到父视图上.
];
</code></pre>
运行看看效果，程序 Crash 了！控制台 Log 中有这么一段信息：
<pre><code>"<NSLayoutConstraint:0xXXXXXXX H:|-(50)- (Names: '|':UIView:0xXXXXXX )>",
"<NSLayoutConstraint:0xXXXXXXX H:|-(0)- (Names: '|':UIView:0xXXXXXX )>"
</code></pre>
可以看到第一条是 <code>viewLeft</code> 这个约束，它限制了 <code>view</code> 的左边距离父视图的左边 50 点。
第二条是新添加的 <code>marginLeft</code> 这个约束，它限制了 <code>view</code> 的左边距离父视图的左边 0 点，也就是紧贴着父视图的左边。
很明显这两个约束是冲突的，当系统尝试根据优先级进行布局时，发现它们的优先级也相同，无法满足两个冲突的约束，所以抛出了异常。
我们只需要给两个约束设置不同的优先级即可解决。添加下面一行代码：
<pre><code class="language-objc">;
</code></pre>
因为默认所有约束的优先级都是 <code>UILayoutPriorityRequired</code>，所以我们只需要将 <code>viewLeft</code> 的优先级设置得比默认的低即可。
效果：
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175412628-502384532.jpg" alt="" loading="lazy">
需要注意的一点是，约束的优先级必须在它添加到视图上之前设置，如果约束已经添加到视图上后去尝试改变它的优先级，将会得到一个异常。
<h2 id="提高效率">提高效率</h2>
Auto Layout 虽然很好，但无论是直接使用 <code>NSLayoutConstraint</code> 还是使用 <code>VFL</code> 来编写布局的代码都比较麻烦。
好消息是有大量的开源库帮助我们提高编写布局代码的效率。比较流行的有：
<ul>
<li>Masonry</li>
<li>PureLayout（前 UIView-AutoLayout）</li>
<li>FLKAutoLayout</li>
<li>KeepLayout</li>
</ul>
我最初使用 <code>UIView-AutoLayout</code>，但因为它不支持 OSX，所以后来使用过一段时间的 <code>Masonry</code>，当 <code>UIView-AutoLayout</code> 的原作者发布 <code>PureLayout</code> 后，我就转向了 <code>PureLayout</code> 并使用至今。
在我看来，<code>Masonry</code> 和 <code>PureLayout</code> 差别并不大，PureLayout 的语法更偏向Objective-C。
下面是一个 Instagram 页面截图，我们使用 <code>PureLayout</code> 来实现这个布局。
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175423273-996951864.jpg" alt="" loading="lazy">
我把它分为头像、昵称、时间标识、时间、赞标识、赞的数量、赞按钮、评论按钮、更多按钮以及中间的图片视图。
声明以下属性：
<pre><code>@property (nonatomic, strong) UIImageView *avatarImageView;
@property (nonatomic, strong) UILabel *nicknameLabel;
@property (nonatomic, strong) UIView *timestampIndicator;
@property (nonatomic, strong) UILabel *timestampLabel;
@property (nonatomic, strong) UIImageView *contentImageView;
@property (nonatomic, strong) UIView *likeIndicator;
@property (nonatomic, strong) UILabel *likesLabel;
@property (nonatomic, strong) UIButton *likeButton;
@property (nonatomic, strong) UIButton *commentButton;
@property (nonatomic, strong) UIButton *moreButton;
</code></pre>
布局代码如下：
<pre><code>// 头像左边距离父视图左边 10 点.
;

// 头像顶边距离父视图顶部 10 点.
;

// 设置头像尺寸
;

// 昵称的左边位于头像的右边 10 点的地方.
;

// 根据昵称的固有内容尺寸设置它的尺寸
];

// 时间标识的右边位于时间视图左边 -10 点的地方, 从右往左、从下往上布局时数值都是负的。
;

// 根据时间标识的固有内容尺寸设置它的尺寸
;

// 时间视图的右边距离父视图的右边 10 点.
;

// 根据时间视图的固有内容尺寸设置它的尺寸
];

// 头像、昵称、时间标识、时间视图水平对齐。（意思就是说只需要设置其中一个的垂直约束（y）即可）
[@ autoAlignViewsToAxis:ALAxisHorizontal];

// 内容图片视图顶部距离头像的底部 10 点.
;

// 内容图片视图左边紧贴父视图左边
;

// 内容图片视图的宽度等于父视图的宽度
;

// 内容图片视图的高度等于父视图的宽度
;

// 赞标识与头像左对齐
;

// 赞标识的顶部距离内容图片视图底部 10 点.
;

// 设置赞标识的尺寸
;

// 赞数量视图与赞标识水平对齐
;

// 赞数量视图的左边距离赞标识的右边 10 点.
;

// 以下请自行脑补...
];

NSArray *buttons = @;
;
;
;
;
;

;
;

;
;
</code></pre>
效果完成： 
<img src="https://img2020.cnblogs.com/blog/440819/202103/440819-20210328175433793-1561239595.jpg" alt="" loading="lazy">
Demo 工程下载 
来源：https://www.cnblogs.com/VincentXue/p/14589333.html

頁: [1]

琼殿技术论坛's Archiver

iOS 开发实践之 Auto Layout