0

I'm wrestling trying to get some multiline labels behaving inside tableview cells. I've already moved away from stacks that didn't work reliably at all as described in this question

UILabel inside nested UIStackViews inside UITableViewCell sometimes truncating

I fixed one of my views with the help of the comments on that question but another view just wouldn't work for me, even after moving to an autolayout non-stackview setup. I then ended up moving the cell that i couldn't get to work into the view which was working with similar layout and got to a point where i have two cells in the same view, one that worked and one that didn't. I've exported this into a new test app which I've uploaded here

In this app there is a simple tableview with 2 cells within it. One cell displays the large multiline text properly and expands the cell as required. The other cell stops short and truncates the multiline label as you can see here

app simulator screenshot

The two cells to me seem pretty much identical in their constraints so I'm very confused why one works and the other doesn't. Here's an overview of their constraints

constraints for cells

There are a few constraints not installed as i've been experimenting trying to figure out what's causing one of the cells to not work.

If anyone could explain to me what is causing these two cells to not behave the same, or more importantly why one of the labels doesn't fill its table cell that'd be really appreciated as I've spent hours looking and just can't seem to figure it out.

Cheers!

jimbobuk
  • 1,211
  • 12
  • 25

1 Answers1

2

Edit:

To explain what went wrong in the first place...

The Right-side "Tags Label" in Cell2 has an Explicit Preferred Width = 300. I don't know the internals, so can't say exactly what's happening, but I get the impression Auto-Layout will take that Preferred Width value into consideration when calculating the text bounding-box height, and then continue on with constraints, content, intrinsic size, etc.

Simply un-checking that explicit option will fix the issue.

Original Answer:

I found it easier to start a new Cell from scratch, rather than try to modify the constraints you had set up, so... This will hopefully be reproducible.

Prep: Add new “Cell3” class; make basic edits to code to accommodate Cell3. I also find things easier if I make some variables for label values and set background colors of elements for easy visual inspection and testing.

Step 1: Add a new prototype; purple background; TableViewCell3 class and “Cell3” reuse ID; stretch it vertically to make it tall enough to work with (it won't affect run-time height).

Step 2: Add a UIView for the Left Side labels. Leading = 8 to Superview. Width = 200; Height = 100; Center Vertically. The Height and Width values will be changed later.

Step 3: Add the two Left Side labels - 1 and 2 (Body font) - to the UIView. Constrain 1 Left = 0; Top = 0. Constrain 2 Left = 0; Bottom = 0.

Step 4: Add a vertical spacing constraint from 2 to 1 of 7.5 and change the Height constraint of the UIView to >= 20 (runtime will likely always exceed 20).

Step 5: Change the Width constraint of the UIView to >= 40 (runtime will likely always exceed 40); Add Trailing Space to Container constraints for both Left Side labels, and set them to >= 0.

Step 6: Add Top and Bottom “to Superview” constraints to the UIView of >= 0.

Step 7: Add the Right Side label (Caption 1 font, number of lines 0). Constrain Top >= 0, Right = 0, Bottom >= 0, all to Superview; also Center Vertically.

Step 8: Add a Horizontal spacing constraint from Right Side label to UIView, set to 20. Give Right Side label a Width constraint = 40 (runtime will likely always exceed 40), and set the Priority to 250. This allows the UIView containing the Left Side labels to be in control of the widths.

Step 9: Assign IBOutlets and run the app. Try changing up the text. Make the left side labels shorter or longer... try setting the right side label to only enough text for one line... etc.

At this point, things should look pretty good - until... you put too much text in one of the left side labels, at which point you'll have a very, very narrow, very very tall right side label. So...

Step 10: Add another Width constraint to the UIView and set it to <= 200. Depending on your actual content, you may want to modify that - or perhaps set it to <= to a percent of the width of the cell.

I updated my original GitHub repo so you can check it out. It should have a commit for each "step" listed above, which might make it easier to follow along - https://github.com/DonMag/CellTest2

Results:

enter image description here

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • Thanks again for a really detailed response. I'll have a good look in the morning. I've been duplicating cells as backups for the last few days and agree it's not too bad a way to work. Unfortunately the example as shown manifested in my original app in a cell I'd been working with for a while albeit with truncating labels. It has a few more complicated layouts but when i eventually stripped it away to the same complexity as shown in my test app yet still with the problem shown I thought it was worth trying to post another question. – jimbobuk Jul 10 '17 at 00:35
  • I'll have a go at building up a hopefully fixed version of this cell. As you can see in my test app one of my cells worked the other seemingly identically constrained cell did not. I was just desperate to try and discover what exactly was broken in the broken cell so I can fix it and crucially avoid that mistake in the future. With your suggestion of starting from scratch again are you saying your not sure whats wrong either? Perhaps this is another example of an iOS bug, perhaps even simulator only, I've yet to try it on an actual device. – jimbobuk Jul 10 '17 at 00:38
  • Anyways thanks for your time again. I'll have a good look and play with the problem some more this week and reply again when I've got some more idea on what's going on. Never did I expect to spend so much time on something that looks so simple. Some text in a cell!! Auto layout seems to be a cruel beast sometimes! Cheers! – jimbobuk Jul 10 '17 at 00:38
  • Ah... went back and looked at your project again. In the "Cell 2" version, where you're getting truncated text, your Right-side "Tags Label" has an Explicit `Preferred Width = 300`. I don't work for Apple, so I couldn't tell you exactly what's happening, but I get the impression Auto-Layout will take that value into consideration when calculating the text bounding-box height. Simply un-checking that explicit option will fix the issue. – DonMag Jul 10 '17 at 12:38
  • Genuinely you're a star! Appreciate all the effort on all the answers but that comment you've just done is the crux answer to this particular problem/example. If you'd like to promote it to an answer I'll accept it again. I remember adding that constraint in an earlier version of that cell before I'd got its width working with whatever autolayout quirk at the time. I then converted it from stackviews to your auto layout suggestion and then I guess it started to cause the issue. Seems like a bug or quirk as though the label has a width set it should still be able to resolve everything. – jimbobuk Jul 11 '17 at 07:52
  • Still that's exactly what I wanted to know. What had broke it, what was different between the two cells that was causing the truncating text problem. For whatever reason, that explicit preferred width is totally the reason!! – jimbobuk Jul 11 '17 at 07:54
  • @jimbobuk - I edited this answer to include the "figured out what went wrong" information (rather than adding that as a separate answer). Glad your labels are doing what you want now :) – DonMag Jul 11 '17 at 12:37
  • Cheers.. Got a new quirk but I'm exhausted from looking at such small auto layout issues so will leave it for now. Thanks so much for your help! – jimbobuk Jul 11 '17 at 22:54