UIScrollView经常会用来一些高度不确定的场景,要想完全展示(可滚动)需要正确计算contentSize的大小,当子控件很多时手动计算这些frame还是比较复杂,想要简单点就需要利用AutoLayout来实现自适应高度(宽度)。
高度自适应时可以在UIScrollView中添加一个contentView,然后对contentView进行约束。然后将其他子控件添加到contentView中,再按照正常使用View的方式约束各个子控件即可。
这时就需要对contentView进行正确的约束,否者UIScrollView将无法正确计算contentSize的大小从而导致UIScrollView无法滚动的问题。
Xcode11?之后对UIScrollView添加了一个新的属性Content Layout Guide来控制contentSzie。再启用这个属性后UIScrollView中会自动添加两个属性:
- Content Layout Guide:用于控制contentSzie,需要自适应高,宽的属性都需要依赖该项。
- Frame Layout Guide: UIScrollView的固定显示区域
UIScrollView高度自适应(宽度类似)的示例流程如下:
先对UIScrollView的四边进行约束来确定它的位置大小。
-
向UIScrollView添加contentView再对其设置约束:
一:不使用Content Layout Guide属性:- 添加contentView的四边与UIScrollView的四边对齐的约束;
- 为contentView的宽添加一个可确定值的约束,添加方式有两种:
1. 直接为contentView设置一个固定值的宽度约束。
2. 将contentView的centerX(垂直方向)与UIScrollView的centerX对齐,这样就可使contentView的宽度与UIScrollView的宽度保持一致。 - 为contentView添加一个高约束即可实现滚动了,由于这是需要自适应高度所以不需要添加这个高的约束。只需要在contentView中的子控件添加约束即可,注意要正确实现高度自适应,contentView中所有子控件添加的约束一定要能确认contentView的高才行,否则高度自适应将失败。 \
二:使用Content Layout Guide属性:
- 操作方式与上面的一样,只有contentView的约束对象变为了Content Layout Guide 和 Frame Layout Guide对象了。
- contentView的四个方向的约束对象变成了Content Layout Guide
- contentView.centerX的约束对象变为了Frame Layout Guide.center.X
特别注意: contentView中所有子控件添加的约束一定能够确认contentView的高才能使其高度自适应。
设计示例截图
下图中灰色部分表示UIScrollView,黄色和蓝色部分表示contentView。
然后再向contentView中添加了一个label使其的top,bottom与contentView对齐,这样就能确定contentView的高度了。
然后设置label的text让其动态计算高度,只要label的高度超过UIScrollView的可视区就能使其滚动了。
运行效果示例图
重复提示
contentView中所有子控件的约束必须能够确定contentView的高度,否者高度自适应失败。