水平 UIStackView - 如何对齐里面的项目，以便一个向左浮动，另一个在中心？

Posted 2023-02-26

【中文标题】水平 UIStackView - 如何对齐里面的项目，以便一个向左浮动，另一个在中心？

【英文标题】：Horizontal UIStackView - how to align items inside so that one is floated left and the other sticks in center?

【发布时间】：2019-08-10 20:57:20

【问题描述】：

我正在制作一个“首选项”屏幕，并在顶部标题的布局方面苦苦挣扎。我有一个简单的“后退”按钮和一个标签。要求是，后退按钮必须始终向左浮动，并且标签必须居中，其自身的内容居中。

到目前为止，我创建了一个包含这两个项目的堆栈视图（水平）。我已将分布指定为等间距，并添加了如下宽度约束： 按钮 - 60 标签 - 200

这在一个屏幕上看起来不错，但我确信它不会起作用，因为屏幕宽度在不同设备上以及纵向/横向之间有所不同。

在 CSS 中，这只是将按钮指定为 float:left，标签为 margin:auto，如何在 XIB 中实现这一点？

这是一个截图供参考：

【问题讨论】：

将第三个空 UIView 添加到堆栈视图。将其宽度设置为等于您的后退按钮。不要设置任何其他宽度。将标签设置为居中文本。将堆栈视图分布设置为.fill

你不会，没有像 Paul 描述的技巧。

这是唯一的选择@Paul 吗？我认为可能有一种主流方式可以做到这一点，抱歉对 ios 来说真的很新。

可能还有其他方法，但它们将是类似的方法，没有“开箱即用”。

您的 UI 与导航控制器/导航栏的 UI 非常相似。有什么不使用它们的具体原因吗？

【参考方案1】：

你有几个选择...

---

最简单，最接近您的 CSS 描述：

按钮从顶部被限制为 0，从前导被限制为 8（根据需要调整）；标签被限制为垂直居中按钮，水平居中查看。

缺点：如果 label 获取的文字过多，会与按钮重叠。

---

第二个选项：

与上面相同，但在右上角添加一个“间隔”UIView... 将其限制为 0 到顶部，8 到尾随，垂直居中到按钮，并将其限制为与按钮相等的宽度和相等的高度。然后，将>= 8 约束添加到指向按钮尾随的标签，并将标签尾随添加到间隔视图前导。这将允许标签根据其文本水平扩展，但会防止重叠（如果太多无法容纳，文本将被截断...）。

---

第三个选项 - 使用堆栈视图：

堆栈视图设置：

Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 8

将堆栈视图限制为 0 到顶部，8 个前导和尾随（仅用于两侧的小填充），添加一个按钮、标签和 UIView。约束 “spacer”视图与按钮的宽度相等。为按钮设置水平Content Hugging Priority = 1000（将保持其标题的宽度）。

还有其他方法，部分取决于您是否要执行此处未显示的其他操作，但所有这三种方法都可以完成。

【讨论】：

@NRitH - 我不想这么做。您的问题可能应该是对 OP 的评论...

我将尝试所有这些，尽管我使用间隔方法实现了这一点，非常感谢@DonMag。对您回答我的问题所花的时间感到非常满意。