如何使 StackView 元素居中对齐答案

【问题标题】：How do I make UIStackView's elements center alignment如何使 StackView 元素居中对齐
【发布时间】：2020-05-27 13:34:17
【问题描述】：

我想要达到的目标

在以下情况下，如何让元素位于 UIStackview 的中心？

使用情节提要
轴是水平的
对齐是填充
分布是填充
间距为 0
UIStackView 有三个 UILabel，它们的字符串长度不同
前后约束等于超级视图（与屏幕宽度相同）

问题

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

我尝试了什么

我已经尝试改变 UIStackView 的 Alignment、Distribution、Spacing ，但没有帮助。另外，我找不到任何解决方案或谷歌的最佳做法。

【问题讨论】：

不太清楚...您希望 3 个标签的组合长度水平居中吗？或者你想要更大的“嘿”水平居中，“嗨，那里”向左走，“嗨”不是很右边？
@DonMag 我使用了三个 UILabel，因为其中一个具有不同的颜色和字体大小。然后只想知道如何使这个中心与超级视图的前导和尾随约束对齐。这清楚吗？

标签： ios swift storyboard uistackview

【解决方案1】：

正如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

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

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

“嗨，那里嘿嗨”

因此，完全有可能没有一种可以为您提供您想要的结果。

如果您包含真实示例来说明您的应用将显示什么以及您希望它的外观，那就更好了。

【讨论】：

是的，这就是我在阅读 PatPatchPatrick 答案后关心的问题。我认为，就我而言，最好的方法是使用一个 UILabel 和 Attributed Text。谢谢。

【解决方案2】：

您可以在堆栈中添加两个间隔视图，它们将覆盖剩余空间

工作示例

【讨论】：

UIStackView 的超级视图的前导和尾随空间是什么？我尝试添加两个垫片（宽度 = 16），但如果屏幕尺寸很大，如 iPhone 11 max，UILabel 会扩展。
不固定（间隔）视图的宽度......它们会自动占用剩余空间

【解决方案3】：

你的意思是这样的？

设置“对齐=填充”，分布=“等间距”。并确保所有标签布局设置为“自动”而不是“将掩码转换为约束”。

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

使前导和尾随约束 >= 0，因此如果 stackview 变得太大，它仍然会受到约束。

【讨论】：