UIScrollView 上的 Next Prev 按钮

Posted 2023-02-23

【中文标题】UIScrollView 上的 Next Prev 按钮

【英文标题】：Next Prev buttons over UIScrollView

【发布时间】：2018-05-07 15:59:10

【问题描述】：

我在 Interface Builder (Xcode 9 / ios 11) 中的布局有问题。

我有一个 UIScrollview，上面有 2 个按钮（下一个和上一个视图）。 如果我将按钮放在滚动视图下，它们就会出现并起作用。但是如果我把它们放在滚动视图上，它们就不会再出现了。

可能是什么问题？

布局按钮和滚动视图：

警告信息：

Drag scrollview Constraints

【问题讨论】：

当您拖动（滚动）滚动视图的内容时，是否希望 Prev/Next 按钮移动？还是您希望它们保持原位，而内容在按钮后面滚动？

我希望按钮保持原位，同时内容在按钮后面滚动。

【参考方案1】：

您需要先了解UIScrollView 的工作原理。再次检查警告消息。它说：

ScrollView 有不明确的可滚动内容

这意味着您的 scrollView 的子视图没有足够的约束附加到它们和 scrollView 以使 scrollView 滚动。那么 scrollView 是如何滚动的呢？如果scrollView的内容超过了scrollView的frame（宽度或者高度），那么scrollView就可以滚动了。

在您的问题中，两个按钮不会相互推动到滚动视图的框架，这清楚吗？这意味着您的按钮没有足够的约束。

稍后我会尝试提供一个示例。

【讨论】：

我对滚动视图和按钮都设置了约束，但仍然没有帮助，但是当我尝试拖动滚动视图时，我看到附加了下一个按钮，但我不知道为什么会有。

【参考方案2】：

在 Interface Builder 中工作时，如果您将一个对象拖放到容器对象上 - 例如 UIView 或 UIScrollView（这也是一个 UIView），该对象将成为一个 子视图 容器。

这使得做你想做的事情有点困难，那就是让按钮在滚动视图的顶部，NOT作为滚动视图的子视图。

正如您在这张图片中看到的，这些按钮显然不是滚动视图的子视图：

在这张图片中，我将按钮拖放到滚动视图上，它们变成了子视图：

所以，为了得到你想要的，在滚动视图的外部添加按钮并设置它们的约束。我给了Prev 一个16 的前导约束和Next 一个16 的尾随约束...两者都被限制在视图，而不是滚动视图。然后我将Next 限制为垂直居中Prev，这样它们将保持垂直对齐。

那么给Prev一个垂直居中的滚动视图约束。选择Editor -> Update Frames，按钮将移动到位，但是 - 正如您从文档大纲中看到的 - 它们是滚动视图的不是子视图：

此时，您可以拖动滚动您添加为滚动视图的子视图的任何内容（例如此处的图像视图），而不会影响按钮：

【讨论】：

非常感谢您的演示！

在 Xcode 11 中，不再困难。请参考我对这个问题的回答。

【参考方案3】：

我假设您希望您的按钮在（而不是在）滚动视图。这在 Xcode 11 Interface Builder 中非常简单，它允许您将滚动视图的子视图（即其内容视图）固定到 Frame Layout Guide 或 Content Layout Guide 或两者的组合。

框架布局指南通过应用宽度和高度约束来定义内容视图的可见区域的大小，该约束基于滚动视图或其容器以外的任何父视图（换句话说，包含父视图的另一个同级子视图）滚动视图）。

内容布局指南定义了内容视图的整个区域的大小，任何应用宽度和高度约束都基于相同的，或者当然，大于滚动视图的框架：

使用这些布局指南无需在任一方向切换滚动；将 Content Layout Guide 限制为 scrollview 可见框架的高度或宽度决定了它是可以垂直滚动还是水平滚动。

这意味着，如果您将滚动视图的子视图约束到框架布局指南，它将不会滚动（而且，它将是滚动视图的真正子视图）。

在 UIScrollView 界面中添加了框架和内容布局指南 Xcode 11 中的 Builder 组件尚未记录；然而，苹果 仍然分发an out-dated document，描述如何使用 Xcode 10 或更早版本在滚动视图中创建 >“浮动视图”。