参考博客:
Auto Layout Tutorial in iOS 9 Part 2: Constraints
AutoLayout中的Content Hugging 和 Content Compression Resistance
项目效果图
#1 Intrinsic Content Size,Content Hugging Priority和Content Compression Resistance Priority
1.Intrinsic Content Size, 通俗来讲,就是控件(UIButton,UILabel,UIImageView)能根据它们的内容(content)计算自己的大小(Size)
比如,让两个button有Equal Widths。button能根据title的长短计算自己的尺寸大小。
2.Content Hugging Priority和Content Compression Resistance Priority,通俗来讲,都是要维持当前view在它的optimal size,可以想象成给view加了一个width constraint。
--对于Content Hugging Priority,这个constraint试图不让view的Size变大,Content Hugging Priority默认为250,控件的这个值越大,越容易保持原状。
--对于Content Compression Resistance Priority,这个constraint则试图不让view的Size变小,Content Compression Resistance Priority默认为750,控件的这个值越大,越不容易不压缩,越容易保持原状。
举例说明Content Compression Resistance:
--将一个button的约束设置为距离顶部100,距离左部150,距离右部100.注意左边constraint的优先级设置为751,此时auto layout会先去满足此constraint,再去满足Content Compression Resistance
反之,当把优先级设置为749时,auto layout会先满足Content Compression Resistance。
#2 Top Layout Guide
1.是什么?Top Layout Guide是View Controller的一个属性,表示内容范围的最高位置,为了不被透明的状态栏(status bar)或导航栏遮挡。如图,constraint不能到达屏幕的顶部,只能到达一根看不到的线,这就是Top Layout Guide,它位于status bar的最底部。
2.topLayoutGuide.length的值由什么决定?两种情况来考虑(官方文档里说的是独立View Controller和包含在其他控制器内的View Controller两种情况,但是我觉得可以综合来看,分为可见,不可见两种)
--如果状态栏、导航栏可见,这个值表示它们的底部
--如果状态栏,导航栏不可见,这个值表示View Controller的上顶部
一般来说,topLayoutGuide与屏幕顶部的距离为20
#3 项目练习
1.拖一个View出来,背景颜色设置为绿色,并添加约束
2.拖一个Label和Image View出来,添加约束。
3.添加图片,并将image view移动到左上角,update constraints
4.解决Content Priority Ambiguity Error问题
这个Error背后什么意思?当view的高度发生变化时(比如,变高100),auto layout不知道label和image view相应的高度应该变化多少。
怎么解决?修改label在垂直方向上的Content Hugging Priority和Content Compression Resistance Priority。这样,auto layout在view高度变化时,会优先考虑label的高度变化。
5.处理剩下的三个view
--把green view移到屏幕左上角,update constraints
--cmd D复制这个view,并给这四个view添加约束Equal Widths和Equal Heights。ctrl drag Brad这个view分别到Dennis view和Mattihijs view上,添加约束Horizontal spacing和Vertical spacing。
按Ray Wenderlich的博客,这里应该结束了,但是横向做出来,却是这种效果。折腾了半天,也没搞清楚我是哪里做错了。
所以,我用的是Size Class的方法的来做。在Any Width|Compact Height模式下,把Ray View的Width和Height设置为SuperView的一半就行。