AutoLayout进阶 之 Hugging & Compression Resistance

AutoLayout是在ios6中引入的，极大的简化了页面布局，成为xib开发必备神器。然而，想要用好AutoLayout并不是一件简单的事，其中有二个很实用的约束在各类书籍和资料里都很少提及，那就是hugging 和 compression resistance约束。下面就来说说什么是 hugging 和 compression resistance约束。

我们可以在这个位置找到Hugging 和 Compression Resistance约束

autoLayout3.png

Hugging约束

---

Hugging priority 确定view有多大的优先级阻止自己变大。这么讲还是比较抽象，那么用UILabel举例，通俗的讲就是 “有两个隐形的力将UILabel尽力向里挤压，直到刚好显示出文字为止”
该约束的默认优先级为251。如果还是不明白的话，可以看看下面的例子。

image

我对UILabel设置了上下左右4个约束（hugging约束是UILabel自带的，用箭头表示），由于左右两边的设置的约束距离较短，左右两边的约束优先级值为1000，大于hugging约束的251，因此，label的宽度并不是正好与文字宽度相等，而是被拉开了一点，如红色方框所示。
下面我将做一点变化，我将右侧的约束的优先值改成250，小于hugging约束，如图所示：

autoLayout2.png

由于右侧的约束优先级为250，小于hugging的约束251，因此， UILabel成功被挤压，直到正好显示内容的字体。

Compression Resistance约束

---

如果理解了hugging约束，那么理解起来Compression Resistance约束就不困难了，通俗得讲，Compression Resistance约束就是[“有两个隐形的力将UILabel尽力向外拉，直到刚好显示出文字为止”]该约束的默认优先级默认为750。正好与hugging约束相反。

autoLayout4.png

我们将约束调整，由于现在设置的约束不足以让Label显示出完整内容，因此，UIlabel的内容变成了“...”显示。下面同样将右侧的约束优先值修改为749，小于Compression Resistance约束默认的750。

autoLayout5.png

可以看到，UILabel成功被 “撑开”了，直到完整得显示出所有内容。

Hugging约束和Compression Resistance约束的实际运用

---

文章一开始我就讲了这个2个约束很有用，但是直到现在还没有说明其到底有什么用。下面我就来说说这2个约束的实际运用。
在我做项目的时候，产品经理有一个需求，有2个Label,左边是商品标题，右边是单价，这两个Label排成一行，优先显示单价，左边显示不下就换行显示，而不能用"..."显示。大致布局大概就像这样。

autoLayout6.png

一般的解决方法就是通过计算，算出左右两边的Label的宽度，再布局，这样就要写很多代码，其实只要通过修改Hugging约束就能解决。

我们要做的，只要把左边Label的Hugging约束的优先值设为250，小于右边Label的hugging约束的优先值，再把左边Label的Line设成0就解决上述要求啦。

最终效果

---

autoLayout8.png

autoLayout9.png