垂直分布两个水平按钮行

Posted 2023-03-11

【中文标题】垂直分布两个水平按钮行

【英文标题】：Vertically Distribute Two Horizontal Button Rows

【发布时间】：2019-05-14 18:33:45

【问题描述】：

我正在尝试在 IB XCode 10.2.1 中垂直动态分布两排水平按钮。目前的努力产生了这样的结果： [ 这两行可以用垂直堆栈中的间距值分布，但我希望它根据可用垂直空间的多少来动态垂直分布。

详情： 两个UIStackViews 嵌入在一个垂直的UIStackView 中。作为使其工作的尝试，我还将垂直UIStackView 嵌入到UIView 中，该UIView 已调整到此屏幕截图底部的可用空间（称为“UIStackView”，您可以将其视为专辑标题和底部之间较大的矩形）。垂直UIStackView 中的任何分布选项都不会影响两个水平行的分布。

我是否缺少约束？我最后的手段是根据屏幕大小以编程方式调整垂直堆栈中的间距。

此外，未在下面列出：垂直 UIStackView 的顶部未固定到 UIView 的顶部 - 当我这样做时，我在顶部得到一排，在底部得到一排，当我使用“等间距”时。当在这种情况下但选择“平均填充”时，两行在底部附近非常接近，并且“专辑标题”被拉下以满足它（将专辑标题保持在原位的最佳方法是什么，顺便提一句？）。或许答案真的就在这种情况下，但有不同的约束……

这是结构和约束（顶行和底行具有相同的约束）。：

以下是包含 UIView（“堆栈视图”）的约束：

提前致谢！很多！

【问题讨论】：

堆栈视图很棒，但并不总是适合这项任务。不太清楚您要获得什么...您是否希望两行按钮在专辑标题 > 空间 > 第一行 > 空间 > 第二行 > 空间 > 视图底部之间具有相等的间距？

是的，就是这样！

【参考方案1】：

有几种方法可以做到这一点...可能最简单的方法是使用“间距视图”。

这是 View as: iPhone 8

的布局

使用此布局，我在垂直堆栈视图中包含 3 个红色“间距视图”。它们被设置为彼此相等的高度，最终为您提供相等的垂直“间距”。显然，您需要将背景颜色更改为清除，这样您就看不到它们了。

注意事项：

我给每个按钮的宽度和高度限制为 44

水平堆栈视图使用：

对齐：填充 分布：等间距 间距：0

垂直堆栈视图被限制在视图的前导/尾随/底部 20-pts 处，顶部距离标签底部 20-pts...与：

对齐：填充 分布：填充 间距：0

这是与 View as: iPhone 4s 完全相同的布局，因此您可以看到它的大小是根据需要自行调整的，没有任何更改：

【讨论】：

感谢您的快速回复。我希望这是 StackViews 缺少的东西，但这是一个很好的解决方法。