Search code examples
iosautolayout

how to make the first line of label in the same centre position of another UIView

enter image description here

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 enter image description here

Solution

  • 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:

    stack view constraints

    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:

    two views' constraints

    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:

    label's constraints

    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.

    enter image description here