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

Question

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

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

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

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

这是一个截图供参考：

Answer 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（将保持其标题的宽度）。

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