在UIScrollView中使用Autolayout布局(2)

在《在UIScrollView中使用Autolayout布局(1)》中，我们介绍了一个简单的例子，在UIScrollView中加入了2个使用Autolayout布局的控件。

现实的情况当然不止有这么简单。

我们使用UIScrollView，通常是需要在上面放超过一个屏幕size的控件。

如果按照(1)的步骤，添加许多Label、TextField或者其他控件，那情况又会怎么样呢？

你会发现红色的布局错误又会出现，Autolayout布局引擎会警告因为条件不足，因此不能够计算出UIScrollView的contentSize宽度或高度。

 

这是因为我们违反了第一条原则：UIScrollView 的contentSize依赖于subviews

 

大量的subviews使用了Top约束和Leading约束。这些约束都是相对于superview的。而superview是什么？其实就是UIScrollView。

 

这让布局引擎很矛盾，如何计算contentSize呢？要计算contentSize必须清楚每个subviews的frame，而subviews的frame居然又要依赖scrollView？

 

因此计算contentSize的条件不足。

 

你可以不理会这个布局错误而运行程序。但contentSize无法计算的结果，会导致运行时UIScrollView无法滚动。

 

 

因此当你发现UIScrollView无法滚动时，往往是因为我们违反了第一条原则，导致contentSize计算错误。

 

正确的步骤如下：

 

1、        拖入一个UIScrollView。

2、        设置UIScrollView的约束。例如Pin上、下、左、右边距都为0，将导致UIScrollView占据整个视图。

3、        拖入一个UIView，我们不妨将它命名为contentView。约束contentView的宽和高，使他能满足你的布局需要，能够摆放下所有你想摆放下的控件（一般来说都会超过屏幕的大小）。例如：width 等于ViewController’s  view 的width，height等于800。

4、        然后重要的来了，设置UIView的Pin约束，上下左右都为0。Why？明明设置了宽和高了呀，UIScrollView还不能计算出contentSize吗？相信我，如果你不做这一步，我保证你的UIScrollView还是不能滚动。这4个Pin约束实际上是用于告诉UIScrollView：我会把你的内容“撑到”多大。也就是说，contentSize必须根据UIView的4条边来确定，而不是根据别的什么方法来确定。这样，UIScrollView就把contentSize的4条边和UIView的4条边关联起来了。如果UIView的4条变发生变化，则不用你说，UIScrollView会自动调整contentSize。

5、        剩下的事情就无所谓了。随便在这个UIView上布局你的控件吧，它们都能正确布局。例如我们在UIView左上角放了一个Label（约束：top、leading），右下角放了一个Label(约束：bottom、trailing)。当然，这些约束都只是和contentView相关，没有和UIScrollView相关。不然又会导致布局冲突。

 

给大家看个图会比较放心点：

 

打开模拟器，运行程序，只能看到第一个Label。拖动ScrollView，你就可以查看到第2个Label了。