如何在另一个 UIView 的同一中心位置制作标签的第一行

Question

I want to make the first line of those words (I am using UI Label here, or should I use Text View?), in the center of red line, the center of that red line is located at the center of that yellow UIView

I have tried some autolayout configuration but still failed to achieve this

Answer 1

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

Answer 2

I solved this recently in a slightly less involved way by adding a hidden single line label in exactly the same location and font as the multiline one, without a bottom constraint.

Then you can simply align the icon image .centerY to the hidden label's .centerY .

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

Answer 3

This is an involved process. Take your time to understand the whole logic.

First of all we have some considerations:

• The Yellow view has a defined height (as well as a defined width, so that it's horizontal center can be determined)
• The label has a fixed font size (so that the horizontal center of first line can be aligned with the horizontal center of the Yellow view by means of constraint)

---

We will add a placeholder view to the right hand side of the Yellow view and make them center aligned. Here comes the handy UIStackView .

We take a UIStackView with these properties:

• Axis: Horizontal
• Alignment: Center
• Distribution: Fill
• Spacing: As your need

The above stack view uses the Auto Layout:

• Leading, Trailing, Top: With respect to the super view (view controller's view / safe area)
• Height: A fixed height (this will be the height of the Yellow view)

These are the constraints for the stack view:

Now we will add two views to the stack view with the attributes:

• Yellow view:
  • Width: A fixed width
  • Height: Equal to the height of the stack view
  • But note that, I used a width & aspect ratio constraint so that the view remains rectangular
• Placeholder view:
  • Height: 0

These are the constraints for the two views:

Now comes the label's part. It's a multiline label (number of lines set to 0 ) The label will be aligned with the placeholder view by top, leading & trailing constraints. But the top constraints need a slight consideration. The label will have a font size of 20 so that if the top constraint has -13 (not -10 because there is a top padding between the label's frame and label's text) value with the placeholder, then it can be aligned with the horizontal center of the Yellow view.

These are the constraints for the label:

---

Enough of the talking. I have made a demo which you'll find here . Also keep in mind if you need to control the horizontal space between the yellow view and the label, you can achieve that by changing the spacing value of the stack view.

Also keep in mind that, this implementation is very tightly configured. Anything changes, everything breaks. But if your need is slightly changed so that the first line of the label is vertically aligned (not the horizontal center of the first line) you can forget about the font size of the label and the -13 top constraint's value.

---

Below is the final output. I added a horizontal redline to indicate the middle of the yellow view.