如何为scrollview定义适当的约束以有效地工作

Question

我的故事板布局很简单，如附图所示。我假设正文可以从一行延伸到多行。考虑到多行的情况，我希望滚动内容以便按钮可以被点击。但是，根据我设置的约束，滚动视图不会滚动。为了获得理想的效果，我应该改变哪些约束？谢谢。

Answer 1

为了使你的约束适合滚动视图，你必须遵循某种方式。请找到以下步骤。

1.将滚动视图添加到超级视图。添加滚动视图后，添加子视图以滚动视图，如图所示。 此视图将具有相同的x，y坐标以及与滚动视图相同的高度和宽度。 请参考下图以了解层次结构。

您会发现红色警告，因为我们尚未添加任何约束。

1. 现在是时候应用一些约束了。 请参考下图，并添加顶部，底部，前导和尾部以滚动视图。



1. 现在添加相同的顶部，底部，前导和尾随滚动视图的子视图。参见下图。

2. 现在是一个真正的技巧。将滚动和视图合二为一，并给它们两个相等的宽度，相同的高度约束，如下图所示。



您的约束几乎已设置。现在取决于您的包含拉伸视图。 在单击更新约束之后增加视图高度时。

你需要做的最后一件事是更改滚动视图的底部约束值。它将是一些负值。用0.follow下面的截图



如果有效，请更新

Answer 2

使用UIScrollView的关键：您必须拥有约束“链”，以允许自动布局来确定滚动视图的.contentSize。

循序渐进（我喜欢在布局过程中设置背景颜色，以便轻松查看元素的边界/帧）...

将UIScrollView（哈密瓜色）添加到视图控制器中，并将它约束20点（我们可以看到它的位置）：

添加UIView作为ContentView（草莓色）作为滚动视图的子视图。将它设置为滚动视图的高度和宽度约束，以及设置为0的顶部/前导/尾部/底部约束：

添加Title UILabel（黄色背景）。约束它Top: 30 / Leading: 50 / Trailing: 50。添加Body UILabel（黄色背景）。将其顶部限制为标题标签的底部（我使用200）和Leading: 10 / Trailing: 10。添加UIButton（浅灰色背景）。将其顶部限制为Body标签的底部（我使用50）和Leading: 50 / Trailing: 50：

到目前为止，没什么特别的，你也不会得到任何滚动......

接下来，将{strong> 另一个 0的底部约束添加到ContentView，并将第一个底部约束更改为>= 0并将新底部约束的优先级设置为250：

这将（在几个步骤之后）允许ContentView根据其内容展开/折叠，以及控制滚动视图的.contentSize。

下一步是告诉Button确定ContentView的高度 - 所以在按钮上添加30的底部约束（等于Top: 30 1}}我们给了标题标签）：

当然，那是不完全我们想要的东西。它会拉伸按钮的高度，因为我们在ContentView上设置了高度约束。所以...... 删除来自ContentView：

的高度限制

结果是ContentView高度会缩小到比按钮底部低30磅。

如果您在Body标签上添加更多文字（假设它设置为Number of Lines; 0），您会看到Body标签展开并“按下”按钮，反过来“推下”ContentView的底部：

如果您向Body添加足够的文字以按下滚动视图底部下方的按钮 - 无论是在IB中还是通过代码 - 它现在将垂直滚动。

希望清楚......请问你是否有任何问题。