如何使第一行标签位于另一个 UIView 的同一中心位置

Posted 2023-03-15

【中文标题】如何使第一行标签位于另一个 UIView 的同一中心位置

【英文标题】：how to make the first line of label in the same centre position of another UIView

【发布时间】：2018-10-16 07:32:36

【问题描述】：

我想把这些词的第一行（我在这里使用 UI Label，还是应该使用 Text View？），在红线的中心，该红线的中心位于该中心黄色UIView

我尝试了一些自动布局配置，但仍然未能实现

【问题讨论】：

您已将前导空间设置为距视图 8 点。

将底部空间限制更改为greater than or equal to。多行UILabel 通常不被顶部和底部空间固定。最好让它自己生长。如果您确实想修复视图大小或文本可能比视口长，您应该使用UITextView。

您不能在标签上方添加一些边距，即将顶部约束常量设置为 0 以外的值吗？

您可以创建一个高度为0的视图，该视图与黄色视图垂直居中对齐，然后将UILable的顶部空间设置为0高度视图为0

【参考方案1】：

我最近通过在与多行标签完全相同的位置和字体添加一个隐藏的单行标签，没有底部约束，以一种稍微不那么复杂的方式解决了这个问题。 >

然后您可以简单地将图标图像.centerY 与隐藏标签的.centerY 对齐。

self.view.addConstraint(
    NSLayoutConstraint(
        item: icon,
        attribute: .centerY,
        relatedBy: .equal,
        toItem: hiddenLabel,
        attribute: .centerY,
        multiplier: 1,
        constant: 0
    )
)

【参考方案2】：

为了与多行标签的第一行对齐，您应该使用约束NSLayoutAttributeFirstBaseline（ios8 可用）或UIViewfirstBaselineAnchor 上的锚点（iOS9 可用）。

【参考方案3】：

这是一个复杂的过程。花点时间了解整个逻辑。

首先我们有一些考虑：

Yellow

视图具有定义的高度（以及定义的宽度，以便可以确定其水平中心） 标签有固定的字体大小（这样第一行的水平中心可以通过约束的方式与

Yellow

视图的水平中心对齐）

---

我们将在 Yellow 视图的右侧添加一个占位符视图，并使它们居中对齐。方便的 UIStackView 来了。

我们采用具有以下属性的UIStackView：

轴：Horizontal 对齐：Center 分布：Fill 间距：

根据需要

上面的堆栈视图使用了自动布局：

Leading、Trailing、Top：相对于超级视图（视图控制器的视图/安全区域） 高度：固定高度（这将是

Yellow

视图的高度）

这些是堆栈视图的约束：

现在我们将添加两个具有属性的视图到堆栈视图：

黄色

视图： 宽度：固定宽度 高度：等于堆栈视图的高度 但请注意，我使用了宽度和纵横比约束，以便视图保持矩形 占位符视图： 高度：0

这些是两个视图的约束：

现在是标签的部分。它是一个多行标签（行数设置为0）标签将通过顶部、前导和尾随约束与占位符视图对齐。但最重要的限制需要稍微考虑一下。标签的字体大小为20，因此如果顶部约束具有-13（不是-10，因为标签的框架和标签的文本之间有顶部填充）值与占位符，那么它可以对齐黄色视图的水平中心。

这些是标签的约束：

---

说得够多了。我做了一个演示，你会发现here。还要记住如果你需要控制黄色视图和标签之间的水平间距，你可以通过改变堆栈视图的间距值来实现。

还请记住，此实现的配置非常严格。一切都变了，一切都崩溃了。但是，如果您的需求稍作改变，标签的第一行垂直对齐（不是第一行的水平中心），您可以忘记标签的字体大小和-13顶部约束的值。

---

以下是最终输出。我添加了一条水平红线来指示黄色视图的中间。

【讨论】：

如果您需要一个占位符视图，然后需要一些填充来说明标签高度，您不妨将标签顶部固定到黄色视图，然后添加一些填充直到它看起来正确.

字体大小固定的初始声明不会使视力不佳的最终用户。喜欢你的应用。因为当用户进入设置并启用可访问性大字体时，应用程序自动调整字体是一种很好的做法。