通过故事板和自动布局完全使用 uiscrollview 水平滚动

Posted 2023-03-29

【中文标题】通过故事板和自动布局完全使用 uiscrollview 水平滚动

【英文标题】：scroll horizontally with uiscrollview completely through storyboard & autolayout

【发布时间】：2017-07-10 02:22:10

【问题描述】：

我很想问这个问题，但我尝试了几种解决方案，但都无法得出我想要的结果。我有 2 个 UIView，它们是较大 UIView 的子视图，它是 scrollView 的子视图。这两个视图分别是登录和注册屏幕，用户可以在它们之间滑动以适当地访问应用程序。但是由于某种原因，滚动视图不会在这两个视图之间水平滚动。我正在查看的示例不使用代码来实现这一点，并且我已经完全模仿了约束。这听起来可能很愚蠢，但有人对我如何实现这种水平滚动有任何建议吗？

【参考方案1】：

"我有 2 个 UIView，它们是一个较大 UIView 的子视图，它是 scrollView 的子视图"

好的，假设有 Sub1 和 Sub2，在 ContainerView（称为 CV）内，它在 ScrollView (SV) 内。

在界面生成器中：

Sub1 和 Sub2 均为 300 宽 CV 应为 600 宽，以便将 Sub1 和 Sub2 并排放置 SV 宽度应为 300 - 您只会看到 Sub1

为了让 ScrollView 滚动，它的内容宽度必须大于它自己的宽度。如果您将 CV 上的前导和尾随约束设置为相对于 SV，这将定义内容宽度。

听起来您的“ContainerView”约束没有设置为 ScrollView

希望这些图片可以放在这里...无论如何...

SV - ScrollView - 是蓝色的

CV - 容器视图 - 是粉红色的

Sub1 和 Sub2 是黄色的

从滚动视图开始，300 x 300 并居中两个方向：

在 SV 中添加一个 UIView - 这将是 CV，默认大小为 8,8，默认大小为 240 x 128（我们将立即更改），并添加每个 8 的 Lead 和 Top 约束：

将 CV 的宽度和高度更改为 600 x 120，并设置宽度和高度约束。现在一半的视图向右延伸，超出了 SV 的边缘：

在 CV 中添加两个子视图——为了演示，我使用了 UILabel。将它们的宽度 x 高度设置为 50 x 30，并将 Sub1 定位在 8,8。

给 Sub1 Left、Top (8,8) 和 Width 和 Height (50x30) 约束。这会将其“固定”在简历的左上角：

给 Sub2 宽度和高度 (50x30) 约束，以及 8,8 的底部和右侧/尾随约束。设置这些约束后，单击“更新帧”按钮将 Sub2 标签自动移动到位 - “固定”到 CV 的右下角（IB 中不再显示）：

现在是真正的关键部分：给 CV Right/Trailing 和 Bottom 约束各 8 个。这是自动布局用来确定 SV 的 ContentSize 的内容。如果您运行该应用程序，您现在应该能够从 Sub1 水平滚动到 Sub2。

假设一切正常，您可以调整 CV 的宽度和高度约束，看看它如何影响滚动。

这里的源代码：https://github.com/DonMag/ScrollViewConstraints

希望有帮助:)

【讨论】：

是的，我相信这就是问题所在。但是我仍然对您在这里使用的语言感到困惑。当您说“相对于 SV”时，您是否建议将 SV 和 CV 堆叠在一起，然后设置它们的前沿和后沿？

好的，或者如果你有类似信息的网站，我也很乐意去探索

抱歉 - 今天没时间了……明天我可以为你澄清。

你好，除了最终屏幕之外，所有这些都是有意义的。对于 CV，如果大小是 SV 的 2 倍，为什么我要将 RT 尾随约束设置为 8？这对我来说没有意义

最右边的尾随约束设置 ContentSize 宽度，最底部的约束设置 ContentSize 高度 - 因此将其设置为 8 会为其提供一个 8 磅的“缓冲区”。它可以很容易 - 或者更有可能 - 一直设置为 0。当您在 SV 中有多个子视图而不是一个包含子视图的“ContainerView”时，这一点变得更加明显。