iOS UIScrollView高度自适应

UIScrollView经常会用来一些高度不确定的场景,要想完全展示(可滚动)需要正确计算contentSize的大小,当子控件很多时手动计算这些frame还是比较复杂,想要简单点就需要利用AutoLayout来实现自适应高度(宽度)。

高度自适应时可以在UIScrollView中添加一个contentView,然后对contentView进行约束。然后将其他子控件添加到contentView中,再按照正常使用View的方式约束各个子控件即可。

这时就需要对contentView进行正确的约束,否者UIScrollView将无法正确计算contentSize的大小从而导致UIScrollView无法滚动的问题。

Xcode11?之后对UIScrollView添加了一个新的属性Content Layout Guide来控制contentSzie。再启用这个属性后UIScrollView中会自动添加两个属性:

  1. Content Layout Guide:用于控制contentSzie,需要自适应高,宽的属性都需要依赖该项。
  2. Frame Layout Guide: UIScrollView的固定显示区域

UIScrollView高度自适应(宽度类似)的示例流程如下:

  1. 先对UIScrollView的四边进行约束来确定它的位置大小。

  2. 向UIScrollView添加contentView再对其设置约束:
    一:不使用Content Layout Guide属性

    1. 添加contentView的四边与UIScrollView的四边对齐的约束;
    2. 为contentView的宽添加一个可确定值的约束,添加方式有两种:
      1. 直接为contentView设置一个固定值的宽度约束。
      2. 将contentView的centerX(垂直方向)与UIScrollView的centerX对齐,这样就可使contentView的宽度与UIScrollView的宽度保持一致。
    3. 为contentView添加一个高约束即可实现滚动了,由于这是需要自适应高度所以不需要添加这个高的约束。只需要在contentView中的子控件添加约束即可,注意要正确实现高度自适应,contentView中所有子控件添加的约束一定要能确认contentView的高才行,否则高度自适应将失败。 \

    二:使用Content Layout Guide属性

    1. 操作方式与上面的一样,只有contentView的约束对象变为了Content Layout Guide 和 Frame Layout Guide对象了。
    2. contentView的四个方向的约束对象变成了Content Layout Guide
    3. contentView.centerX的约束对象变为了Frame Layout Guide.center.X
  3. 特别注意: contentView中所有子控件添加的约束一定能够确认contentView的高才能使其高度自适应。

设计示例截图

下图中灰色部分表示UIScrollView,黄色和蓝色部分表示contentView。
然后再向contentView中添加了一个label使其的top,bottom与contentView对齐,这样就能确定contentView的高度了。
然后设置label的text让其动态计算高度,只要label的高度超过UIScrollView的可视区就能使其滚动了。

两种方式整体
不使用Content Layout Guide
使用Content Layout Guide

运行效果示例图

不使用Content Layout Guide,自适应的高度小于UIScrollView的高度
不使用Content Layout Guide,自适应的高度大于UIScrollView的高度
使用Content Layout Guide,自适应的高度小于UIScrollView的高度
使用Content Layout Guide,自适应的高度大于UIScrollView的高度

重复提示

contentView中所有子控件的约束必须能够确定contentView的高度,否者高度自适应失败。

你可能感兴趣的:(iOS UIScrollView高度自适应)