iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析

本篇博客的内容也不算太复杂，算是AutoLayout的一些高级的用法。本篇博客咱们主要经过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content Compression Resistance Priority这两个优先级。下方咱们先来简单的看一下这两个优先级的涵义：

• Content Hugging Priority：直译成中文就是“ 内容拥抱优先级”，从字面意思上来看就是两个视图，谁的“内容拥抱优先级”高，谁就优先环绕其内容。稍后咱们会根据一些示例进行介绍。

• Content Compression Resistance Priority：该优先级直译成中文就是“ 内容压缩阻力优先级”。也就是视图的“内容压缩阻力优先级”越大，那么该视图中的内容越难被压缩。而该优先级小的视图，则内容优先被压缩。稍后咱们也会经过相应的实例来看一下这个优先级的具体表现。

接下来咱们就经过相应的实例来看一下这两个优先级的使用场景以及做用。

 

 

1、总述

首先在第一部分咱们先来总体的看一下Content Hugging Priority与Content Compression Resistance Priority这两个AutoLayout的优先级属性。这两个属性是能够在Storyboard中直接设置的，选中要设置的控件，在右边约束一栏里边就有Content Hugging Priority以及Content Compression Resistance Priority的设置地方。Content Hugging Priority的水平和竖直方向的默认值都是250，而Content Compression Resistance Priority的水平和竖直的默认值是750。咱们能够在此对该值进行设置。

　　

 

固然，在代码中也是能够设置这两个代码的优先级的。下方是使用代码的方式为咱们的控件设置相应的优先级而且咱们能够获取到相应优先级的值。具体代码以下所示：

　　

 

 

2、Content Hugging Priority

接下来咱们就来结合实例来看一下Content Hugging Priority的使用场景以及使用方式。

假如咱们有一个需求，须要两个Label并列显示，咱们暂且称之为Label1和Label2。Label1和Label2中的显示内容是从网络获取的，而且内容长度不定。咱们要求优先显示Label1。也就是说以Label1的宽度为准，不过Label1会有一个最大宽度，当Label1显示到最大宽度时，Label1的内容会被压缩，剩下的部分显示Label2。固然，当Label1没有显示到最大值时，剩下的部分仍然显示Label2。Label2显示不全的也会被压缩。

接下来咱们按照上述的描述添加相应的约束，首先咱们为Label1添加约束，以下所示。咱们为Label1添加了Top、Left、Width和Height四个约束，这四个约束足以来肯定该Label的位置了。不过须要注意的一点该Label的Width是小于等于某一个值得，此处咱们指定的Width <= 200。也就是该Label的Width的最大值为200。约束添加后以下所示：

　　

 

接下来咱们来为并列第二个Label添加约束。由于要求前面Label内容显示完成后，剩下的部分就显示右边Label的内容，因此咱们为Label2添加了Left、Top、Right以及Height的约束。固然Left是以右边的Label为基准的，而Right则是以父视图为基准的。

　　

 

从下方截图中咱们能够看出，有些约束添加完是红色的，这就是约束有冲突了。也就是当前添加的约束不能确实当前控件的位置。从上述的约束咱们不难发现，横向来看，两个Label的宽度都是不肯定的，因此会报错。

　　

 

咱们能够点击下方这个红色的报错箭头查看相应的报错信息。点击该红色箭头会显示下方这个界面，该界面中会提示相应的错误信息。从下面的对话框中咱们能够看到具体的错误信息是“Content Priority Ambiguity”，也就是说“内容优先级是模棱两可的”。点击这个红色的圆圈，会给出相应的解决方案：

• Decrease horizontal hugging of "Second Label" from 251 to 250 to make it grow before other views。

意思大致就是说：须要减少Second Label的水平拥抱优先级，从如今的251换成250。换句话说，也就是将“Second Label”的Content Hugging Priority从251换成250后，下方的问题就会被解决了。“to make it grow before other views”，这句话的意思是下降这个优先级目的是为了让该视图在其余视图以前生长。

翻译的有些晦涩，咱们来用大白话说一下。形成下方错误的缘由是水平放置的两个Label的宽度都不肯定，并且其内容环抱的优先级又是一致的，因此在运行是咱们没法肯定是先肯定第一个Label的宽度仍是先肯定第二个Label的宽度，解决方案是将右边的Label的Content Hugging Priority的优先级调低，固然第一个Label的Content Hugging Priority相对就高了。因此左边的Label会优先的环绕其内容，也就是说该Label会优先的肯定其宽度。当左边Label的宽度肯定了，那么右边Label的宽度也就是随着肯定了，因此下方的错误也就解决了。

　　

 

下方就是咱们将右边的Label的Content Hugging Priority改为250后的结果。能够看出以前的报错被解决了。固然，也能够将左边的Label的Content Hugging Priority的优先级修改为比右边的高便可。此处咱们仅讨论了Content Hugging的水平方向上的优先级，竖直方向上的优先级是同样的，在此就不作过多赘述了。

　　

 

上面约束添加完以及优先级添加完毕后，咱们就能够看一下运行效果了。为了动态的看一下约束的效果，咱们为每一个Label添加了一个Step控件，从下方运行效果咱们不难看出，该控件主要是用来控制对应Label的大小的。下方的运行效果是符合咱们以前的预期的。左边的Label的长度是有一个最大值得，当左边的Label显示完成后，右边剩下的空间就显示第二个Label的内容了。

　　

 

 

3、Content Compression Resistance Priority （内容压缩阻力优先级）

聊完“内容拥抱优先级”后，接下来咱们就来看一下Content Compression Resistance Priority 。内容压缩阻力优先级，从字面意思上看，该优先级越大则说明内容压缩阻力越大，也就是说内容越难被压缩。当两个Label并排显示，而且屏幕不足以显示两个Label的全部内容时，则会优先压缩“内容压缩阻力优先级”越小则先被压缩。

咱们依然采用上一部分的方式，从错误入手，在错误解决的过程当中来认识一下这个“Content Compression Resistance Priority”。首先咱们也是让两个Label并排显示，左边的Label咱们暂且称之为FirstLabel，右边的Label咱们则称之为SecondLabel。咱们为FirstLabel添加的约束有Top、Left、Height以及Width >= 50，咱们为SecondLabel添加的约束为Left（以First的Right为参照）、Top、Right、Height以及Width>=102。下方截图就是咱们添加上述约束后的效果：

　　

 

添加完上述约束后，咱们在Storyboard中能够看出是会报错的。报错缘由也很明确“Content Priority Ambiguity”，也是内容优先级冲突。用大白话解释就是水平方向上没法肯定两个Label的宽度。固然点击红色小圆点也会给出相应的错误解决方案：

• Decrease horizontal compression resistance of "Bottom Label2" from 750 to 749 to make it get clipped before other views。

其大致意思就是减小第二个Label的水平压缩阻力，将如今的750修改为749，使得SecondLabel在其余视图以前被裁剪。此刻若是你点击该提示中的“Change Priority”按键的话，该错误将会被修复。

　　

 

为了直观的看一下该优先级的效果，咱们添加了一个Switch开关来修改上述两个Label的优先级。当Switch开关打开时，FirstLabel的压缩阻力优先级大于SecondLabel，开关关闭就相反了。具体代码以下所示：
　　

 

修改完相应的错误，以及添加完相应的代码后，接下来咱们来看一下运行结果。当开关打开时，前边的抗压缩阻力要大于后边的Label。而开关关闭时后边的抗阻力优先级要大于前边的，运行效果以下所示。

　　

 

经过上述示例的演示，应该对Content Hugging Priority以及Content Compression Resistance Priority有了直观的感觉，本篇博客就先到这儿吧。下方是上述示例在Github上的分享连接，以下所示：

github分享连接：https://github.com/lizelu/AutoLayoutContentHuggingAndCompressionResistance