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

Answer 2

You can add constraint first to price as leading, top, height, width. then to time label as top, trailing,height,width. For title label as leading, trailing, top, bottom. For description label leading, trailing, top, bottom. & write the below code. heightForRowAtIndexPath will give you proper height to your cell

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static YOUR_TABLEVIEW_CELL *sizingCell = nil;
    static NSString *CellIdentifier=@"YOUR_TABLEVIEW_CELL_IDENTIFIER";
    sizingCell =[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (sizingCell==nil)
    {
        sizingCell=[[YOUR_TABLEVIEW_CELL alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    [self configureFareIssueCell:sizingCell atIndexPath:indexPath];
    return [self calculateHeightForConfiguredSizingCell:sizingCell];
}

//assign all the labels  here
- (void)configureFareIssueCell:(YOUR_TABLEVIEW_CELL* )cell atIndexPath:(NSIndexPath *)indexPath
{
    //e.g 
    cell.lbl.text=@"YOUR_TEXT";
    cell.imageView.image=[UIImage imageNamed:@"NAME_OF_YOUR_IMAGE"];
} 

- (CGFloat)calculateHeightForConfiguredSizingCell:(YOUR_TABLEVIEW_CELL *)sizingCell
{
    CGSize size = [sizingCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    return size.height + 1.0f; // Add 1.0f for the cell separator height
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
   static NSString *CellIdentifier=@"YOUR_TABLEVIEW_CELL_IDENTIFIER";
   YOUR_TABLEVIEW_CELL   *cell =[tableView dequeueReusableCellWithIdentifier:@"YOUR_TABLEVIEW_CELL_IDENTIFIER"];
    if (cell==nil)
    {
        cell=[[YOUR_TABLEVIEW_CELL alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    [self configureFareIssueCell:cell atIndexPath:indexPath];

   return cell;
}  

Answer 3

Try adding

[cell layoutIfNeeded]

before returning your configured cell.

Answer 4

1. add minimum width the to the time & price lable

2. set the hugging priorities too

title label:

Hugging: H: 1000, V: 1000

Compression: H: 1000, V:1000

description label:

Hugging: H: 1000, V: 999

Compression: H: 1000, V:999

3. add this line in the end of the cellforRowAtIndexPath & remove layoutSubviews

   cell?.layoutIfNeeded()

4. add this function

   func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return UITableViewAutomaticDimension }

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return UITableViewAutomaticDimension }

5 Build & run