Horizo​​ntal UIStackView - 如何对齐内部项目,以便一个向左浮动,另一个固定在中间?

Horizontal UIStackView - how to align items inside so that one is floated left and the other sticks in center?

我正在制作一个 "preferences" 屏幕,并且在顶部 header 的布局方面苦苦挣扎。我有一个简单的 "back" 按钮和一个标签。要求是,后退按钮必须始终向左浮动,标签必须居中,其内容居中。

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

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

在 CSS 中,这只是将按钮指定为 float:left,标签为 margin:auto,我如何在 XIB 中使用它?

这里有截图供参考:

你有几个选择...


最简单,最接近您的CSS描述:

按钮从顶部被限制为 0,从前部被限制为 8(根据需要调整);标签被限制为垂直居中于按钮,水平居中以查看。

缺点:如果标签文本太多,它会与按钮重叠。


第二个选项:

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


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

堆栈视图设置:

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

将堆栈视图限制为 0 到顶部,8 个前导和尾随(只是为了在两侧填充一点),添加一个按钮、标签和 UIView。约束 "spacer" 视图与按钮宽度相等。为按钮设置水平 Content Hugging Priority = 1000(将保持其标题的宽度)。

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