关于UIScrollView的自动化布局约束

前言

---

在iOS 6.0之后，引入了自动化布局约束，大大减轻了开发者关于界面布局的负担。但在对UIScrollView控件进行自动化布局时，常常会出现一些约束错误，主要原因是有些开发者不太清楚UIScrollView如何通过约束来计算contentSize的属性值，本文将对其原理以及使用方法进行简要叙述。

一、基本原理

---

UIScrollView通过其内容视图的约束来计算自己contentSize的属性值。例如，如果UIScrollView拥有一个内容视图，并为该内容视图设置了关于top、bottom、leading、trailing、height和width的约束，则:
contentSize.height = top + height + bottom
contentSize.width = leading + width + trailing

二、单内容视图使用示例

---

1. 拖入UIScrollView控件，并为其添加top、bottom、leading、trailing约束；

2. 为Scroll View添加一个UIView子控件，并为其添加top、bottom、leading、trailing约束，该子控件即为Scroll View的内容视图；
   

3. 上述约束添加完成后，将出现如下所示的错误，根据『原理』部分解释，我们知道Scroll View无法仅仅凭借上述四个间距类约束来计算得到自己的contentSize属性值，还需要为内容视图添加height和width约束；
   

4. 为内容视图添加固定的height和width约束。
   

三、多内容视图使用示例

---

1. 同上，拖入UIScrollView控件，并为其添加top、bottom、leading、trailing约束；

2. 为Scroll View添加三个UIView子控件，并为它们分别添加top、leading、trailing和height约束；
   

3. 为位于最底部的内容视图添加bottom约束，则ScrollView.contentSize.height = ContentView1.top + ContentView1.height + ContentView2.top + ContentView2.height + ContentView3.top + ContentView3.height + ContentView3.bottom；

4. 为其中任意一个内容视图相对于主View添加Equal Widths约束，则ScrollView.contentSize.width = ContentView1.leading + ContentView1.width + ContentView1.trailing；
   

注意：
上述示例能够使得Scroll View在垂直方向滚动，请思考如何设置约束才能使得它在水平方向上滚动呢？

四、推荐使用UIStackView作为内容视图

---

iOS 9.0提供的UIStackview简化了布局操作，本人推荐将UIStackView作为UIScrollView内容视图使用，这样可以减少很多的约束设置，同时达到多内容视图的使用目的。以垂直方向滚动为例，我们仅需要设置UIStackView的top、bottom、leading、trailing和width约束，以及设置UIStackView的所有子控件的height约束就可以简单实现。

结束语

---

除了上述几中方法外，还有很多关于UIScrollView内容视图的约束设置方法。但万变不离其宗，我们只需要记住UIScrollView的contentSize属性值的计算原理，就可以解决几乎所有关于UIScrollView的约束错误问题。