ScrollView的自动布局：如何给ScrollView设置contentSize

一、开发环境

XCode11.4，autoLayout。

二、布局目标

如下图，scrollView上面放一个蓝色块和一个绿色块。保持scrollView始终和屏幕等宽高，蓝色和绿色块始终和scrollView等宽，高度随scrollView变化。

二、布局步骤

1、给scrollView添加约束。

相对于view/Safe Area：添加上左下右均为0的约束。

2、对蓝色块添加约束

相对于scrollView：上左右约束均为0。高度为scrollView的0.2倍。

相对于绿色块底部相对绿色块间距20。

注意，一定要点击约束的下拉三角标，选择相对scrollView。

3、给绿色块添加约束。

相对于scrollView：左右约束为0。高度为scrollView的0.3倍。

4、给scrollView设置contentSize。

这是最重要的一步。scrollView的contentSize是由子视图决定的，如何让scrollView有确定的contentSize又保证子视图可以动态宽高。这是最难的部分。

首先：我们先要知道autoLayout里面的Content Layout Guide和Frame LayOut Guide是什么东西。

Content Layout Guide：指scrollView的内容区域，相当于scrollView的contentSize。

Frame Layout Guide：指scrollView的边框，相当于scrollView的frame。

所以，要设置scrollView的contentSize，其实就是利用Content Layout Guide和Frame LayOut Guide设置contentSize的宽和高。

对于contentSize的高：其实就是蓝色块和绿色块的高度加上它们top，bottom。现在高度和top我们都设置好了，就差bottom了。只要让绿色块的bottom与Content Layout Guide的bottom就可以确定contentSize的高了。如果让绿色块的bottom与scrollView的bottom相等并设置一定的constant值也可以确定contentSize的高，但是这样的话这个bottom就写死了。红色块和绿色块无法实现动态高。

对于contentSize的宽：选择其中一个子视图，这里我们选绿色块，相对于Frame LayOut Guide设置左右约束为0即可。