Self-Sizing TableView Cells based on two subview's height

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

ContainerView.height greater than (ImageView.height + ImageView.Top + ImageView.Bottom). Here cell's height will be based on ContainerView.height
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?

What is the issue if you do `Vertically Centre to SuperView` ?? — dahiya_boy, Feb 23 '17 at 13:23
Use `heightForRow` and `estimatedheightfor`. It automatically adjust your cell according to your container size. I think thats what you want. — dahiya_boy, Feb 23 '17 at 13:31
@agent_stack If I use that constraint, then _Case 1_ would fail. For Instance, When Description Label's content is more than 3 lines, text will be cutoff — Shyam, Feb 23 '17 at 13:32

score 0 · Answer 1 · answered Feb 23 '17 at 13:37

0

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

answered Feb 23 '17 at 13:37

Dinesh

41
1
6

dahiya_boy · Answer 2 · 2017-02-24T06:29:24.473

0

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

edited Feb 24 '17 at 06:29

answered Feb 23 '17 at 13:37

dahiya_boy

9,298
1
30
51

Yeah. I'm doing that. Actually I made _Case 1_ to work with the these [constraint](https://i.stack.imgur.com/pyZMa.png) and as I've mention in **Problem**, I can add different constraints and make _Case 2_ work but I want to know If I can add any constraints so that both the cases would work. – Shyam Feb 23 '17 at 13:48
@Shyam Check Edit – dahiya_boy Feb 23 '17 at 14:14
@Shyam If you still facing any issue, I added output of my edit answer. Hope now you achieve your requirement. If still you have any doubt then let me know. – dahiya_boy Feb 24 '17 at 04:48
Thanks for ur time :) Your answer is almost correct, still it is not exactly as my [expected result](https://i.stack.imgur.com/TjDJW.png), If you look closely, in Case 2 **ContainerView's height is less than ImageView's Height** and ContainerView is Vertically Centered. Basically this is my issue, Self-Sizing a Cell based on 1 subview's height is straight forward but in my case it should be based on 2 subview's height (Using ContainerView's height if it is more than ImageView's height and vise versa) – Shyam Feb 24 '17 at 05:39
@Shyam Thats why I added a view for labels which handle this problem what you mentained above. You need to set minimum height. – dahiya_boy Feb 24 '17 at 05:42
'view for labels', I'm calling that view as 'ContainerView' from the start. Please look at [this](https://drive.google.com/file/d/0B-fyairwDktdenFFLV9lcGZiYTA/view), hope I have pointed out the exact issue. – Shyam Feb 24 '17 at 06:27
@Shyam Dont be confused, check this output https://i.stack.imgur.com/RAg6j.png which is updated on my above answer as per your requirement. I removed the output which you mentained in above comment so that you know right output. – dahiya_boy Feb 24 '17 at 06:30

score 0 · Answer 3 · answered Feb 23 '17 at 13:39

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.

Self-Sizing TableView Cells based on two subview's height

3 Answers3

Linked