3

please see the image below for two examples of what is to be achived

UILabels to be aligned

the alignment should be on the Center Y of the first lines of each UILabels and should work regardless of font size or font. currently we have implemented this with different constraints to the top of the super view for different font and font size combinations.

the constraint to align the center of the two UILabels does not work since the text of the second UILabel is not fixed and can have several lines.

also the text is dynamic, so it is not known where the text will wrap to create the first line, thus it cannot be shown in an one line UILabel with the rest of the text in another one below.

currently this is implemented using UIKit, but if there is an easy solution in SwiftUI we can put these two labels in a SwiftUI component. so a SwiftUI solution would also be welcomed.

jrturton
  • 118,105
  • 32
  • 252
  • 268
memical
  • 2,353
  • 1
  • 24
  • 36
  • Without a [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) it is impossible to help you troubleshoot. – lorem ipsum Dec 02 '22 at 09:43
  • 1
    @loremipsum i cannot built that example since i do not know how. based on the answer from jrturton i will try to. i think this is the reason why people are getting less on SO, the bureaucracy starts to be too high. it is one thing to keep the quality of the site, another to ask for all this nonsense. – memical Dec 02 '22 at 10:29
  • There is a little *tricky* way to do this easily (at least with UIKit - not sure about SwiftUI) ... but, what are your **exact** requirements? Do you want vertical centering on the **Line Height**? Or the **Glyphs** - which will vary based on the actual first line of text? See this image for example: https://i.stack.imgur.com/zsOkA.png – DonMag Dec 02 '22 at 12:56
  • it should be on the glyphs – memical Dec 02 '22 at 13:47
  • @memical - vertically aligning the **Glyphs** is going to be more difficult, as you can imagine based on that image. What is your actual use case? Will the "left" text always be numbers? Or is it possible that the left text could be just a "." for example? – DonMag Dec 02 '22 at 15:49
  • just numbers. it represents the days in month – memical Dec 05 '22 at 13:54

2 Answers2

2

That's an interesting problem! You can try using the centerYAnchor for the label on the left, and the firstBaselineAnchor for the label on the right... that will align the center Y with the text baseline, which isn't quite what you want.

To find the correct offset to apply, you can use the information from UIFont about the size of the characters. I'd probably start with capHeight * 0.5 and see if that looks or feels right. Something like:

leftLabel.centerYAnchor.constraint(equalTo: rightLabel.firstBaseLineAnchor, constant: rightFont.capHeight * 0.5)

This is a more difficult problem in SwiftUI, I think, because resolved font metrics aren't directly available to you.

jrturton
  • 118,105
  • 32
  • 252
  • 268
  • this is a cool idea. will try it. mathematically makes perfect sense. i will also try to use the ascender in this and align on first baseline on both (if that does not work). thanks – memical Dec 02 '22 at 10:27
2

Your comments said "it should be on the glyphs" ... but, without additional information, my guess is that "real world" usage would not really need that level of precision.

For example:

enter image description here

While the glyphs are not perfectly center-Y aligned, it seems unlikely you'd run into a case where the first line of the "rightLabel" is " ' " ' " or . , . , ..

This layout can be easily done with only a few constraints - no need to do any calculations:

enter image description here

The "Positioning" label would, of course, be set .hidden = true so it would never be seen.

If you really, really want glyph-precision, you'll need to calculate

  • the Glyph bounding box for the left-label
  • the Glyph bounding box for first line of the right-label
  • calculate the "character box" offsets to align the Glyph Y-centers

and then position the two labels accordingly, or use Core Text to draw the text (instead of using UILabel).

Probably more work than necessary -- unless your actual use-case demands it.

DonMag
  • 69,424
  • 5
  • 50
  • 86