0

The top of text in UILabel(s) (on a table view cell) seems to depend on the number of lines and truncation.

enter image description here

As you can see in the image, the top of the label (who's background I coloured grey to indicate what's going on) remains at fixed distance from the top of the image. This is according to the constraint I've added.

The top of the text however is 8, 7, and even 11 pixels in the three cases/cells shown. How can I prevent that?

I'm not using custom fonts.

Here are the constraints:

enter image description here

enter image description here

meaning-matters
  • 21,929
  • 10
  • 82
  • 142
  • set content hugging priority vertical to 1000 – Shehata Gamal Feb 24 '18 at 16:17
  • @Sh_Khan Tried that earlier, and tried again now. Doesn't fix/change this issue. – meaning-matters Feb 24 '18 at 16:20
  • This might have to do with the fonts and line/some other kind of font spacing. What happens if you swap to a monospaced font I suspect they will all be the same pixels away)? I think though, that you cannot get the font to default hit the top left pixel – solenoid Feb 24 '18 at 16:32
  • @solenoid No difference with Courier New. What vertical font spacing parameters would you suggest can cause this? – meaning-matters Feb 24 '18 at 16:42
  • 1
    I think it is related to the intrinsic size causing the height to differ slightly on different character box sizes, and that a `UILabel` always center vertically. Have a look at this solution: https://stackoverflow.com/a/19801698/4543629 – LGP Feb 24 '18 at 16:49
  • @LPG So this is an iOS bug? If so, it's **ridiculous**, we're at version 11 now; this should not happen. – meaning-matters Feb 24 '18 at 17:16
  • Ahh yes - @LGP I think is correct. I forgot I had to deal with this myself and I believe this was the answer. – solenoid Feb 24 '18 at 18:22
  • @meaning-matters perhaps not a bug, but a problem from the fact that you can only vertically center your content in a `UILabel`. Many has wished for the `contentMode` property on `UILabel` to actually do something, but sadly it doesn't. I will try to confirm that this really is your problem or not, but in any case there are third party substitutes for `UILabel` that specifically do top align, and likely will solve your problem. Of course, best would be not to have to resort to such components. – LGP Feb 24 '18 at 18:52
  • @LGP I indeed tried `contentMode` already and sadly say that that too didn't change anything. – meaning-matters Feb 24 '18 at 19:07
  • @meaning-matters may I ask what font you use for the title label? – LGP Feb 24 '18 at 19:24
  • @LGP Times New Roman. Same with Courier New (see comment above). – meaning-matters Feb 24 '18 at 19:25

2 Answers2

1

The bigger problem is the constraint height <= 41. When the title doesn't fit within two lines, the titleLabel will try to grow beyond the height of two lines (which I guess in your case is around 38?) but is then stopped at the constraint's 41. Since this is slightly higher than the height of two lines, the top of the first line will become a few pixels lower when the lines are centered within its frame. This explains the difference between your first and third example.

A possible solution (although a storyboard only would be better) is to measure the height of the label when assigning it, and manually update the height constraint to either one or two lines of height.

cell.titleLabel.text = @"your title";
CGSize size = CGSizeMake(cell.titleLabel.bounds.size.width, 0);
size = [cell.titleLabel sizeThatFits:size];

if (size.height > lineHeight)
    cell.heightConstraint.constant = lineHeight * 2;
else
    cell.heightConstraint.constant = lineHeight;

The heightConstraint is connected to your height constraint, which you need to change to = type. To calculate the lineHeight you can (for example) assign a short constant string to the label when initializing, then measure it.

As for the difference between the first and the second example I do not really have any solution, except adding a constant to the else statement above. Yes, it's ugly and would need testing on different devices to see if it works. Or maybe you can live with 1 pixel difference...?

LGP
  • 4,135
  • 1
  • 22
  • 34
-1

label.sizeToFit fits label according to size. remove the constraints height<=41

Ankur Lahiry
  • 2,253
  • 1
  • 15
  • 25