Horizontal 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
(将保持其标题的宽度)。
还有其他方法,部分取决于您是否想执行此处未显示的其他任何操作,但所有这三种方法都可以完成工作。
我正在制作一个 "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
(将保持其标题的宽度)。
还有其他方法,部分取决于您是否想执行此处未显示的其他任何操作,但所有这三种方法都可以完成工作。