UIButton,UILabel,UIImage与Autolayout

参考博客：

Auto Layout Tutorial in iOS 9 Part 2: Constraints

Autolayout的Top Layout guide问题

AutoLayout中的Content Hugging 和 Content Compression Resistance

项目效果图

simulator

#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的长短计算自己的尺寸大小。

Equal Widths

Equal Widths

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

优先级设置为751

反之，当把优先级设置为749时，auto layout会先满足Content Compression Resistance。

优先级设置为749

#2 Top Layout Guide

1.是什么？Top Layout Guide是View Controller的一个属性，表示内容范围的最高位置,为了不被透明的状态栏(status bar)或导航栏遮挡。如图，constraint不能到达屏幕的顶部，只能到达一根看不到的线，这就是Top Layout Guide，它位于status bar的最底部。

Top Layout Guide

2.topLayoutGuide.length的值由什么决定？两种情况来考虑（官方文档里说的是独立View Controller和包含在其他控制器内的View Controller两种情况，但是我觉得可以综合来看，分为可见，不可见两种）

--如果状态栏、导航栏可见，这个值表示它们的底部

--如果状态栏，导航栏不可见，这个值表示View Controller的上顶部

一般来说，topLayoutGuide与屏幕顶部的距离为20

#3 项目练习

1.拖一个View出来，背景颜色设置为绿色，并添加约束

view的约束

2.拖一个Label和Image View出来，添加约束。

image view的约束

label的约束

3.添加图片，并将image view移动到左上角，update constraints

4.解决Content Priority Ambiguity Error问题

Ambiguity Error

这个Error背后什么意思？当view的高度发生变化时（比如，变高100），auto layout不知道label和image view相应的高度应该变化多少。

怎么解决?修改label在垂直方向上的Content Hugging Priority和Content Compression Resistance Priority。这样，auto layout在view高度变化时，会优先考虑label的高度变化。

修改priority

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的一半就行。

横向simulator

Github地址