如何使 UIStackView 元素居中对齐

Question

我想达到的目标

如何在以下情况下让元素居中于UIStackview？

使用故事板
轴是水平的
对齐为填充
分布为填充
间距为0
UIStackView 有三个具有不同字符串长度的 UILabel
前后约束等于super view（同一个屏幕宽度）

问题

如果我在超级视图中添加水平中心的约束并删除前导和尾随约束，这似乎可以，但我会伸出屏幕，因为没有前导和尾随约束。

我试过的

我已经尝试过改变UIStackView的Alignment、Distribution、Spacing，但没有用。此外，我无法从 google.

中找到任何解决方案或最佳实践

Answer 1

你的意思是这样？

集"alignment = Fill"，分布="equal spacing"。并确保所有标签布局都设置为 "automatic" 而不是 "Translate mask into constraints"。

如果您需要像上图中那样在 stackview 后面使用浅蓝色背景，只需将 stackview 设置在 UIView 内部即可。我不认为你可以将 stackview 拉伸那么远，并且还可以将其中的内容居中。

使前导和尾随约束 >= 0，所以如果堆栈视图变得太大，它仍然会受到约束。

Answer 2

您可以在堆栈中添加两个 spacer 视图，它们将覆盖剩余的 space

工作示例

Answer 3

如PatPatchPatrick所说，您可以将堆栈视图约束为水平居中。

但是，你必须考虑如果你的字符串太长会发生什么。

您的示例字符串是：

    leftStr = "Hi, there"
    midStr = "HEY"
    rightStr = "Hi"

并且，通过居中的堆栈视图，您将获得：

不过，假设您的字符串是：

    // Set A
    leftStr = "Hi, there from the Left"
    midStr = "HEY MIDDLE"
    rightStr = "Hi from the Right"

或：

    // Set B
    leftStr = "Hi, there from the Left"
    midStr = "HEY"
    rightStr = "Hi"

现在你得到：

2 - 糟糕...堆栈视图超出了视图的范围。

3 - 因此，我们将根据内容压缩优先级设置添加“>=8leading and trailing (so we have a little padding on each side). Whoops, the text gets truncated... and which label(s) get...”。

4 - 为避免截断，我们将标签设置为 Number of Lines: 0 以便文本换行。也许看起来还可以，也许不是。

5 - 让我们将标签的文本对齐方式设置为居中。也许我们想要什么？

6 - 但是，使用 "Set B" 字符串而不是 "Set A" --- 可能不太好？

更好的选择可能是使用单个居中标签（具有 >=8 前导和尾随约束）：

并使用属性文本:

以下是定义和设置属性文本的方法：

    let leftStr = "Hi, there"
    let midStr = "HEY"
    let rightStr = "Hi"

    let font1 = UIFont.systemFont(ofSize: 17.0)
    let font2 = UIFont.boldSystemFont(ofSize: 26.0)
    let offset = (font1.xHeight - font2.xHeight) * 0.5

    let attributedStr = NSMutableAttributedString(string: leftStr + " ", attributes: [NSAttributedString.Key.font: font1])
    attributedStr.append(NSAttributedString(string: midStr, attributes: [NSAttributedString.Key.font: font2, NSAttributedString.Key.foregroundColor: UIColor.red, NSAttributedString.Key.baselineOffset: offset]))
    attributedStr.append(NSMutableAttributedString(string: " " + rightStr, attributes: [NSAttributedString.Key.font: font1]))

    theLabel.attributedText = attributedStr

作为旁注，供您将来参考...

它有助于完整定义您的问题。据推测，在您的实际应用中，您不会显示：

"Hi, there HEY Hi"

所以完全有可能 none 这些方法会给你想要的结果。

如果您包含 真实的 示例，说明您的应用程序将显示的内容以及您想要的方式，那就更好了看看。

如何使 UIStackView 元素居中对齐

How do I make UIStackView's elements center alignment

storyboard

ios

swift

uistackview

我想达到的目标

问题

我试过的