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

时间:2018-10-16 07:32:37

标签: ios autolayout

enter image description here

我想在这些单词的第一行(我在这里使用UI标签,还是应该使用文本视图?)在红线的中心,该红线的中心位于该行的中心黄色UIView

我尝试了一些自动布局配置,但仍然无法实现 enter image description here

3 个答案:

答案 0 :(得分:1)

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

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

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

multi line label icon alignment

答案 1 :(得分:0)

这是一个涉及的过程。花些时间来了解整个逻辑。

首先,我们有一些注意事项:

  • 黄色视图具有定义的高度(以及定义的宽度,因此可以确定其水平中心)
  • 标签的字体大小固定(通过约束可以使第一行的水平中心与 Yellow ”视图的水平中心对齐)

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

我们使用具有以下属性的UIStackView

  • 轴:Horizontal
  • 对齐方式:Center
  • 分发:Fill
  • 间距:根据需要

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

  • 领先,尾随,顶部:关于超级视图(视图控制器的视图/安全区域)
  • 高度:固定高度(这是黄色视图的高度)

这些是堆栈视图的约束:

stack view constraints

现在,我们将在堆栈视图中添加两个具有以下属性的视图:

  • 黄色视图:
    • 宽度:固定宽度
    • 高度:等于堆栈视图的高度
    • 但是请注意,我使用了宽高比约束,以便视图保持矩形
  • 占位符视图:
    • 高度:0

这是两个视图的约束:

two views' constraints

现在是标签的一部分。这是一个多行标签(行数设置为0),标签将按顶部,前导和尾随约束与占位符视图对齐。但是最主要的限制需要稍作考虑。标签的字体大小为20,因此如果顶部约束具有-13(而不是-10,因为标签的框架和标签的文本之间有顶部填充)值和占位符,则它可以与黄色视图的水平中心对齐。

这些是标签的约束条件:

label's constraints


足够多的谈话了。我做了一个演示,您会找到here。另外请记住如果需要控制黄色视图和标签之间的水平间距,可以通过更改堆栈视图的间距值来实现。

还请记住,此实现的配置非常严格。任何变化,一切都会破裂。但是,如果您的需求略有变化,以致标签的第一行垂直对齐(而不是第一行的水平中心),则您会忘记标签的字体大小和{{ }}顶部约束的值。


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

enter image description here

答案 2 :(得分:0)

要与多行标签的第一行对齐,应使用约束NSLayoutAttributeFirstBaseline(在iOS8中可用)或在UIView firstBaselineAnchor上的锚点(在iOS9中可用)