Content hugging和Content compression resistance

本文举了3个比较有“特点”的Autolayout例子，源于微博上好友的提问，感觉比较有意思，也比较有代表性，就写了出来，分享给大家~

至于为什么用Masonry，那是因为它好用啊！（被问到过有关Masonry的问题，就索性用它来实现吧=。=）。

效果图



Github地址

https://github.com/zekunyan/AutolayoutExampleWithMasonry

关于例子工程结构

实现的时候采用的是用StoryBoard拖拽约束+Masonry手写代码相结合的方式实现。最关键的地方是用Masonry，为了更好地突出重点。其它的无关紧要的空间约束，直接就拖拽了。

关于Autolayout

刚开始学习Autolayout的时候，什么“Leading Edges”、“Horizontal Centers”，好多啊，感觉一下子适应不来，有时候面对一个界面布局上的需求，可能都无从下手。

总的来说，我觉得Autolayout的关键就是“Constraint（约束）”。其实就是一下两点：

从显式设置frame的属性，到利用约束控制View的大小、位置。

思考如何布局时，重点从单个的View，到整体所有View之间的相互关系。

既然没有了具体设置View的frame属性，也就是说，系统会在运行时，通过我们设定的“约束”，计算出每个View的frame，再去绘制屏幕内容。

也就是说，我们设置的Constraint，要能体现出View的位置（x、y坐标）、大小（宽高）。无论是用IB拖拽约束，还是手写代码，只要从这个角度去思考，很多问题就都能解决。

有关Autolayout的知识，网上有很多，在这里就不详细列出了，但是有个公式倒是可以贴出来：

关于Masonry

好用！

Case 1: 并排两个label，宽度由内容决定。父级View宽度不够时，优先显示左边label的内容

遇到这种跟内容压缩、优先级有关的布局，就不得不提Autolayout中的两个重要的属性“Content Compression Resistance”和“Content Hugging”。

Content Compression Resistance = 不许挤我！

对，这个属性说白了就是“不许挤我”=。=

这个属性的优先级（Priority）越高，越不“容易”被压缩。也就是说，当整体的空间装不小所有的View的时候，Content Compression Resistance优先级越高的，现实的内容越完整。

Content Hugging = 抱紧！

这个属性的优先级越高，整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

分析

根据要求，可以将约束分为两个部分：

整体空间足够时，两个label的宽度由内容决定，也就是说，label的“Content Hugging”优先级很高，而且没有固定的Width属性。

整体空间不够时，左边的label更不容易被压缩，也就是“Content Compression Resistance”优先级更高。

重点：

label不设置具体的宽度（width）属性，宽度由内容决定。

显示的优先级由“Content Compression Resistance”属性的高低决定。

约束示例图



关键代码

关键的代码如下：（label1是左边的label，label2是右边的）

设置位置

设置内容约束

小节

灵活运用“Content Compression Resistance”和“Content Hugging”属性。

Case 2: 四个ImageView整体居中，可以任意显示、隐藏

先看看示例的截图：



下面的四个Switch控件分别控制上面对应位置的图片是否显示。

分析

首先就是整体居中，为了实现这个，最简单的办法就是将四个图片“装进”一个容器View里面，然后让这个容器View在整个页面中居中即可。这样就不用控制每个图片的居中效果了。

然后就是显示与隐藏。在这里我直接控制图片ImageView的宽度，宽度为0的时候不就“隐藏”了吗。

约束示例图



解释

之所以这么设置，主要目的有以下几点：

尽量减少无效的约束，保证约束不多也不少。

内部的每个imageView约束其实都只有四个：left、centerY、width和height，这样有个好处，就是可以写个函数，专门为View一次性添加这几个约束，大大减少代码量。

最右边的imageView还要单独设置跟容器View的右边约束，是为了不用设置容器View的width，保证容器View是刚好包含内部的View的，这样整体才是居中的。

关键代码

先看看设置每个imageView约束的函数：

接着就是设置容器View的代码：

最后是内部imageView的约束：

控制ImageView显示、隐藏的时候，直接让其宽度等于0就行：

小节

有时候用个“容器View”管理内部的View，往往会起到事半功倍的效果。而且在组织约束的时候，尽量的将约束统一起来，这样可以用一个函数去设置，减少代码量。

Case 3: 子View的宽度始终是父级View的一半（或者任意百分比）

其实这个很简单=。= 再看看这个公式：

这个是Autolayout里面一个约束的不同属性的基本组合关系，替换成宽度的话，就是下面这样：

在Masonry里面，其实有个函数“multipliedBy”，就是用来设置multipler属性的（跟原本的NSLayoutConstraint的对应）。

关键代码

如下：

接着，只要控制父级View的宽度，子View的宽度就会随着变化了。

小节

multipliedBy在Masonry的Github主页里面没有=。=

所以要养成读头文件的习惯~