首页 > 代码库 > 在UIScrollView中使用Autolayout布局(2)
在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了。
在UIScrollView中使用Autolayout布局(2)