Self-Sizing TableView Cells based on two subview&#

Question

TableView Description
tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 60.0

Cell Description
I have a cell with 2 Labels(Title, Description) inside a ContainerView and 1 ImageView as below. Cell height will vary based on Description Label’s content.
Contraints of all views

There are two cases that I should handle

1. ContainerView.height greater than (ImageView.height + ImageView.Top + ImageView.Bottom). Here cell's height will be based on ContainerView.height
2. ContainerView height less than (ImageView.height + ImageView.Top + ImageView.Bottom). Here I expect Cell should consider (ImageView.height + ImageView.Top + ImageView.Bottom) as the height and make ContainerView vertically centre to Cell.
   Expected Result in both the cases

Problem
If I set constraints for 1st case then 2nd case is not working and vice versa (I’m aware that by removing ContrainerView.Top, Bottom and making it Vertically Centre to SuperView case 2 result can be achieved)

Is there a way to achieve expected result in both the cases by using same set of IB constraints and UITableViewAutomaticDimension?

Answer 1

First make sure that you are using self-sizing cells: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSelf-SizingTableViewCells.html

Make Top and Bottom constraints for both image view and the container view to the edges of the cell and make them >=.

Alternatively, you could try Horizontal Stack View and make rigid (highest priorities) constraints to each edge of the cell.

Answer 2

Give fixed height and width to the image view . Otherwise let the tableViewCell know the top and bottom of the imageview. So that it can calculate the correct cell height

Answer 3

Use these delegates,

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
     return 100; // height of default cell
 }

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return UITableViewAutomaticDimension;
}

Edit

Try this one.

Your view hierarchy should be like this

ImageView Constraints

Add a view and put both labels into it.

Label Container contraints

Label Title constraint

Label Description constraint

Edit Output