3

I have a tableview cell in one of my tables setup as containing the following view hierarchy

TableView Cell view hierarchy

The outer horizontal stackview is pinned to the cell's content view on trailing, leading, bottom and top edges.

The right label is pinned to its parent stackViewHackView on trailing, leading, bottom and top edges

Within my controllers code I've got the cells setup to be dynamic height to fit the content of the cells so they can grow or shrink depending on the content size

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 30.0 

Regarding Auto layout setup. (Relevant priorities in BOLD)

  • Outer Horizontal Stack View
    • Content Hugging Priority == 250
    • Content Compression Resistance Priority == 750
    • Inner Vertical Stack View
      • Content Hugging Priority == 750
      • Content Compression Resistance Priority == 750
      • Left Label 1
        • Content Hugging Priority == 750
        • Content Compression Resistance Priority == 750
      • Left Label 2
        • Content Hugging Priority == 750
        • Content Compression Resistance Priority == 750
      • View (Just to pad out the two left labels to the top of the stack view)
        • Content Hugging Priority == 250
        • Content Compression Resistance Priority == h:750; v:250
    • stackViewHackView (hack to make multiline labels grow properly inside a stack view and cell)
      • Content Hugging Priority == 250
      • Content Compression Resistance Priority == h:250; v:750
        • lower horizontal resistance to allow this view to compress for the left stack view to fit
    • Right Label
      • Content Hugging Priority == 250
      • Content Compression Resistance Priority == h:250; v:750
        • lower horizontal resistance to allow this view to compress for the left stack view to fit

I fill this cell with test data in a simple test app with the following code

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
  let cell = tableView.dequeueReusableCell(withIdentifier: "testCell", for: indexPath) as! TestTableViewCell


  // Configure the cell...

  if indexPath.section == 0
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }
  else if indexPath.section == 1
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }
  else
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really really really really really really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }

  return cell
}

Which results in the following rendering in the simulator on an iPhone 7 target

Simulator screenshot

The middle tableview cell is the sort of output i'd like to get all the time. I don't want the left labels to EVER truncate, their content will always be small enough to fit along with the right hand side. Yet given certain content on the right hand side the longer Label 2 can sometimes be truncated as you can see in the top and bottom rows.

I've setup the content compression resistance such that all the elements on the left have high resistance to compression with the elements on the right set to lower resistance so that they should compress to make space for the left side elements.

Any ideas why this is happening or how I can stop it happening so my labels always display properly?

Cheers!

jimbobuk
  • 1,211
  • 12
  • 25
  • Will Labels 1 & 2 ever be multi-line? Or always single-line, and you never want them truncated? – DonMag Jul 04 '17 at 20:39
  • Thanks for your reply. Yes that's exactly right. I nearly added single line into the title of this post but thought it was convoluted enough as it was. The left labels are all one line, short content. The right label is multiline and the cell will grow to fit it all. There shouldn't be any truncating anywhere. But its this truncation on the left that you can see that's really bothering me. Could put a test project up if there's anyone interested. Though this project i'm using is a little cluttered with other tests. – jimbobuk Jul 04 '17 at 21:27
  • Are you married to using Stack Views? I believe I have a solution for you, but it doesn't use 'em... – DonMag Jul 04 '17 at 21:29
  • I'd prefer to use stackviews as they seem ideally suited to this situation. But I'd consider any workarounds at this point. Especially if we think the stackviews are part of the problem? I'd presumed it was something to do with the labels as well. – jimbobuk Jul 04 '17 at 22:37
  • This may just be "how it seems to me" but... I've seen a number of people using stack views wrapped in stack views wrapped in stack views, when simple views with constraints can do the job. Take a look at how I've done it in this project: https://github.com/DonMag/CellTest2 ... it's really very simple, and you can look at the labels and see just how little I had to do in terms of changing priorities. I used your sample strings, and added a few more cases to test variations. – DonMag Jul 04 '17 at 23:12
  • Thanks. I'll take a look tomorrow when I'm back on my computer. Cheers! – jimbobuk Jul 04 '17 at 23:20
  • I've had a bit of a look at your example. Thanks for making such a detailed one! In trying to duplicate the layout into my test app I've had some success but now as I try to make it adapt to either of the left labels being larger I'm hitting some snags. I'll have more of an experiment with it and then reply again but just wanted to thank you for taking the time on this issue! – jimbobuk Jul 05 '17 at 21:26
  • After much wrestling with my own test apps and real app I managed to fix this problem thanks to your test project. I setup an auto layout cell with no stacks but struggled with either of the left cells being able to be longer.. I figured with localisation its possible that one of the labels could be longer than the other in a different way in other languages. In the end I embedded my left labels inside a view which i constrained to match the two labels widths and got it just about working. So thanks a lot. Feel free to put your response in an answer and i'll accept it! – jimbobuk Jul 08 '17 at 19:52
  • I do have another problem now that's fairly similar... purely autolayout with seemingly similar cells not letting a uilabel be full-size in one case keeping the cell too small.. I can't figure it out.. I'll post another question for that and perhaps link it here for your reference. – jimbobuk Jul 08 '17 at 19:53
  • I've posted the other linked question I mentioned above here - https://stackoverflow.com/questions/44990354/uitablecell-with-auto-layout-configured-multiline-uilabel-being-truncated – jimbobuk Jul 08 '17 at 20:14

1 Answers1

1

(Added as answer per the OP)

This may just be "how it seems to me" but... I've seen a number of people using stack views wrapped in stack views wrapped in stack views, when simple views with constraints can do the job.

Take a look at how I've done it in this project: github.com/DonMag/CellTest2

It's really very simple, and you can look at the labels and see just how little I had to do in terms of changing priorities. I used your sample strings, and added a few more cases to test variations.

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • Thanks for this. It seems like stack views should be brilliant things to simplify autolayout setup and even support a few improved features such as hiding views in a stackview and having it correctly adapt. Sadly at the moment at least it seems like there are still some bugs left in it. I managed to fix my problematic view following your example. Only to get stuck again on a similar but slightly different view. Still the issue as described is answered by your auto layout workaround! Cheers! – jimbobuk Jul 10 '17 at 00:30
  • 1
    You want to use UIStackViews - otherwise, supporting accessibility and Dynamic Font will be a nightmare. – Lukasz Ciastko Apr 20 '18 at 17:29