使用Storyboard在水平UIStackView中滚动

自从UIStackView发布UIStackView ，它已成为iOS开发人员中广泛使用的UI元素。 它减少了我们手动设置大量约束的繁重工作。 尽管它在大多数情况下提供了灵活性，但并没有提供我们大多数人希望具有的滚动行为。

上一次，我有一个要求，我需要在其中使用水平滚动的堆栈视图。 我在Google上搜索了很多，发现了很多资源。 但是大多数都是从代码方面完成的。 我还发现一些在情节提要中完成的工作。 您可以在此SO Post中找到一些建议。

是的，我可以考虑以编程方式进行操作。 但是我不会。 因为我不是一个好的程序员。 我喜欢在情节提要中进行设计。

但是在尝试使用情节提要的游戏之后，我只是失败了。 有时，约束没有得到满足。 即使满足约束条件，滚动也不起作用。 所以我最终得到了解决方案。 如果您需要了解我的操作方法，请花一些时间阅读全文。

我把前导和尾随匹配到超级视图的边缘。 将其放在垂直居中的位置并给出高度限制。 这样做可以满足所有必需的约束。 您显然可以根据需要定位此滚动视图。

现在，将水平堆栈视图从库拖动到滚动视图。 将属性用于堆栈视图，如下所示：

将其边缘固定到其超级视图（滚动视图）。 我喜欢在领先者和落后者之间保持一定的差距。 因此，我将其设置为10分。

但是等等，什么？ 🙄🙄

刚刚发生了什么？ 😕我添加了前导和尾随约束，并将滚动视图与超级视图的中心Y对齐。 首先也给出了高度限制。 但是为什么这总是抱怨呢？

罪魁祸首是UIScrollView contentView 。 从苹果文档：

滚动视图必须知道内容视图的大小，以便知道何时停止滚动

那么，如何预先指定内容视图的大小？ 是的你可以。 因为这里的内容视图是您的堆栈视图 。 您只需在文档大纲中从堆栈视图控制+单击+拖动到滚动视图，然后按Shift键即可选择等宽和等高：

这样做将消除情节提要板错误。 看到：

（我使用-20作为等宽的常数，因为我之前将前边缘和后边缘设置为距超级视图边缘10 pt，以便总宽度匹配）

但是……我们做错了什么。 让我们先看看输出中可能是错误的：

一旦指定了内容视图的宽度和高度 ，我们就失去了滚动视图的滚动行为。 另外，整个内容视图现在仅包含在滚动视图的可见区域中。 它不会扩展到屏幕边缘以外。 您可以在这里阅读。 5点和6点。 然后执行以下操作：

• 我们需要水平滚动，对吗？ 因此，我们不需要等宽约束。 删除它。
• 但是请保持“ 等高”约束，因为我们将限制堆栈视图的垂直滚动。

但是删除等宽约束后，会恢复之前缺少的约束 故事板上的错误。 我们可以做什么？ 让我想想…。 🤔🤔

好吧，再做一件事。 从文档大纲中选择堆栈视图，并在“容器中”中将对齐约束添加为“ 水平” 。 但是仅再次执行此操作将无法解决上一次在等宽度约束下尝试时发生的问题。 您需要在构建时将此约束明确指定为Remove 。 因为我们实际上不需要此约束，但是为了使xcode满意而停止在文档大纲中显示错误。 请记住， 这是必须执行的步骤：

至此，我们完成了滚动视图和堆栈视图的设置。 我们要做的就是使堆栈视图可以水平滚动。

现在该用实际的视图组件填充堆栈视图了。 为此，将堆栈视图的IBOutlet添加到视图控制器。 我们将通过此出口将一些视图添加到堆栈视图。

除此之外，您还可以指定这些子视图的宽度。 由于我的内部视图具有动态的宽度/高度，因此我可以对其进行限制并具有更吸引人的外观：

您可以在这里找到这部分的完整实现。 您还可以看看如何使用自定义.xib文件设置堆栈视图的内部视图。

上面的演示不仅适用于水平可滚动的堆栈视图。 同样的方法也可以用于制作垂直可滚动的堆栈视图。 您只需要更改一些约束即可。

希望对您有所帮助！