IOS - self sizing cells issue

Question

I am facing an issue with auto sizing cells using Auto Layout. My goal is to achieve a table that will look something like this:

| Title_label (time)      $price |
|                                |
|Some long description. More     |
|description.                    |
|                                |

When the title is long it should look like this:

| This title is (time)    $price |
| really long                    |
|                                |
|Some long description. More     |
|description.                    |
|                                |

So when title gets bigger it pushes time label to the right as long as there is 8 points space beetwen time and price. If it is even bigger it should wrap to next line.

I have done before table view with self sizing cells but there where only one expanding label, not two.

I have implemented row's automatic height:

self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 100

This is how my constraints look like:

|     8px
|8px title 8px time >=8px       price|
|     8px                            |
|8px description                  8px|
|     8px                            |

There is also top alignment between price time and title.

I've set lines number of title and description to 0. I've set compression resistance of time and price to 1000 (because title was overlapping them).

However the title label doesn't wrap to next line. It ends with .... What is more description label also is too small. When I scroll the table desription's height is fixed.

I've tried adding cell.layoutIfNeeded() before returning cell. Then cell layout gets messed up (title is clipped) but when I scroll tV everything is OK.

Any ideas?

Edit: Is this because title label is next to other labels and it doesn't know when it should wrap?

I tried

override func layoutSubviews() {
        self.nameLabel.preferredMaxLayoutWidth -= (durationLabel.frame.width + priceLabel.frame.width + 16)
        super.layoutSubviews()
    }

to tell title label what is its max width but it messes things up.

Answer 1

Just like you, I have set the rows of title and description to 0, and I have set up your cell like this:

|     8px
|8px title 8px time >=8px       price|
|     8px                            |
|8px description                  8px|
|     8px                            |

Then, I have set the compression and hugging properties:

title:

• Hugging: H:251, V:252
• Compression: H:999, V:1000

time:

• Hugging: H:253, V:251
• Compression: H:1000, V:750

price:

• Hugging: H:252, V:251
• Compression: H:1000, V:750

description:

• Hugging: H:251, V:251
• Compression: H:750, V:999

Everything works as expected