垂直分布两个水平按钮行

Vertically Distribute Two Horizontal Button Rows

我正在尝试在 IB 中垂直动态分布两排水平按钮,XCode 10.2.1。目前的努力产生了这个: [ 两行可以在垂直堆栈中以间距值分布,但我希望它根据垂直space可用的程度动态垂直分布。

详情: 两个UIStackViews嵌在一个竖UIStackView中。作为让它工作的尝试,我还将垂直 UIStackView 嵌入了 UIView 中,该 UIView 的大小已调整为此屏幕截图底部可用的 space(称为“UIStackView",你可以看到它是专辑标题和底部之间的较大矩形)。 None 的垂直分布选项 UIStackView 对两个水平行的分布有任何影响。

我是不是漏掉了约束?我最后的办法是根据屏幕的大小以编程方式调整垂直堆栈中的间距。

此外,未在下面列出:垂直 UIStackView 的顶部未固定到 UIView 的顶部 - 当我这样做时,我在顶部得到一排方式,并且在底部的一行,当我使用 "equal spacing." 在这种情况下选择 "fill equally" 时,两行在底部附近彼此非常靠近,并且 "Album Title" 被拉低到满足它(顺便说一句,将专辑标题保留在原处的最佳方法是什么?)。也许答案真的就在这种情况下,只是有不同的约束...

这是结构和约束(顶行和底行具有相同类型的约束):

这里是包含 UIView ("Stack View") 的约束:

提前致谢!很多!

有几种方法...可能最简单的方法是使用 "spacing views."

这里是布局 View as: iPhone 8

使用此布局,我在垂直堆栈视图中包含了 3 个红色 "spacing views"。它们被设置为彼此相等的高度,最终使您的垂直方向相等 "spacing." 显然,您需要将背景颜色更改为透明,这样您就看不到它们了。

备注:

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

水平堆栈视图使用:

  • 对齐:填充
  • 分布:等间距
  • 间距:0

垂直堆栈视图被限制在视图的前导/尾随/底部 20 磅,顶部距标签底部 20 磅...具有:

  • 对齐:填充
  • 分布:填充
  • 间距:0

这是 完全相同 的布局,视图为:iPhone 4s 因此您可以看到它的大小为需要,没有任何变化: