Storyboard 使用 Scrollview的正确方法

Posted 2023-02-19

参考技术A 本文涉及Xcode11的新特性Content Layout Guide 和 Frame Layout Guide

如果你也遇到了在storyboard给scrollview添加约束，约束红了一片的情况，或者是在运行的时候scrollview没办法滚动的情况，希望这篇文章能对你有所帮助，本文会带大家一步一步完成一个scrollview的约束配置。

我们先来了解一下scrollview的结构，以避免在使用storyboard为scrollview添加约束的时候，产生"ambiguous scrollable content width / height" 这样的错误提示。

Scroll View之所以能够滚动，是由于它配置了一个可滚动内容区域（scrollable content area），如下所示：

1、Scrollview必须知道它的可滚动区域（scrollview content）的width和height
2、必须明确Scrollview本身的frame(x,y,width,height)，它负责告诉scrollview的父视图，需要把这个scrollview放在什么位置，占多大地方。

从Xcode11开始，苹果为Scroll View引入了Content Layout Guide和Frame Layout Guide，这让我们在sb里使用scrollview更加容易了。
当用户拖一个Scroll View控件到Storyboard，系统会自动生成Content Layout Guide和Frame Layout Guide

1、为scroll view与它的父视之间添加约束，来设置scroll view的位置和大小
2、为scroll view的content view 设置约束，来确定滚动区域的大小

它与scroll view自身的位置position (x, y)及大小size (width, height)相关，为scroll view与它的父视图之间添加约束。

它与scroll view内部的滚动区域有关

在Storyboard使用Scroll View最关键的一点在于为Scroll View的content view配置约束，这样Auto Layout 才能计算出Scroll View的可滚动区域的宽度和高度，下面我们就一步一步来实现一个ScrollView。

拖拽一个Scroll View到 View Controller里面，然后设置约束。
下面以一个全屏的ScrollView为例，我们将它的边缘与视图控制器的safe area对齐，如下图：

设置这些约束之后，你会注意到界面上多了很多红线，这是由于Auto Layout还不知道Scroll View的 content view 大小，不必担心，我们一步一步来。

在Scroll View里面放一个UIView，并设置约束。这样做是为了简化Auto Layout对可滚动区域的高度的计算。

为UIView添加约束：按住键盘的Control键，把UIView拖向Content Layout Guide，在弹出弹框后松手，然后按住键盘的Command键，多选leading / top / trailing / bottom这4个约束。

为UIView添加这4个约束后，在UIView的属性控制器里面，把4个约束的Constant值都设置为0

然后我们把这个UIView的名字改成“Content View”，因为我们会把Scroll View上要展示的所有内容放到这个UIView上。Auto Layout会根据这个Content View的宽和高来计算Scroll View可滚动区域的宽和高。

在把上述4个约束的Constant值改为0之后，你会注意到红线还是没有消失，这是因为尽管我们把UIView的四条变固定在了Content Layout Guide的边沿，但是Auto Layout依然不知道这个UIView的宽和高。

由于我们想让Scroll View垂直滚动而非水平滚动，所以Content View的宽度应该小于等于 Scroll View的宽度。下一步我们要在content
view和Scroll View的frame layout guide之间创建一个equal width constraint，这个约束会让scroll view的滚动区域的宽度与scroll view本身的宽度一样。具体的操作如下：
按住键盘的Control键，将Content View（改名之前为View）拖拽向Frame Layout Guide，在弹出弹框之后松手。然后选择 Equal Width。

完成这一步，Xcode会自动为你生成一个约束，类似于
Content View.width = 0.XXXXX × Frame Layout Guide.width，点击这条约束，在属性控制器里面把它的Multiplier值改为1，这样Content View的宽度就会和Scroll View的宽度一样了。

现在我们已经完成了滚动区域的宽度设置，还剩高度的设置了。

我们的策略是先为Content View设置一个固定高度，等我们完成所有界面内容的布置之后，再把这个固定高度移除，这时候Auto Layout就可以动态计算Scroll View滚动区域的高度了。
我们先把Content View的高度设置为1000

现在我们完成了滚动区域的宽度和高度设置，Auto Layout已经知道了Scroll View的可滚动区域，红色报错已经消失啦。

现在我们来布局UI：
由于Scroll View的可滚动区域超出了屏幕高度，为我们布局UI带来了小小的麻烦，我们可以把ViewController的高度从固定高度设置为自由高度。

1、点击左侧的View Controller
2、点击右侧的“尺寸控制器”
3、点击Simulated Size，把Fix改为Freedom
4、将高度设置为1100

你会发现Controller的高度变成了1100，当然还是不够的话，可以把第四步的高度值设置的更大。这样再布局页面就方便多啦。

现在你就可以尽情的把各种页面元素布局到Content View 上面了。在布局完所有控件之后，要注意：从上到下为各个控件添加约束，一定要从上到下。

下面我们要详细介绍如何从上到下为Content View上的控件添加约束。

以下是一个界面样例：

布局完成后可以添加约束了，要注意各种界面元素都是放在Content View上面的，添加约束也是在Content View与界面元素之间，以及界面元素与界面元素之间，不要再与UIScrollView发生任何关系啦。
界面添加约束之后如下：

最重要的一点事，垂直方向的约束要从Content View的顶部开始，连接起各界面元素，一直到Content View的底部。这样Auto Layout才能正确计算出UIScroll View的滚动区域高度。
最后一步，移除掉我们为Content View设置的固定高（height=1000这条约束），到这里，你已经大功告成，运行一下试试吧。

参考文章（需要科学浏览）： https://fluffy.es/scrollview-storyboard-xcode-11/