一、开发环境
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即可。