时间戳

首页 > 解决方案 > 如何使 UIStackView 的元素居中对齐

ios - 如何使 UIStackView 的元素居中对齐

问题描述

我想要达到的目标

在以下条件下，如何使元素位于 UIStackview 的中心？

在此处输入图像描述

问题

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

我试过的

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

标签： iosswiftstoryboarduistackview

解决方案

正如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 - 因此，我们将添加 '>=8 leading 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

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

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

“喂喂喂喂”

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

如果您包含应用程序将要显示的内容以及您希望它的外观的真实示例，那就更好了。

推荐阅读