Dynamic UITableView cell height with UIStackViews

Question

I am trying to create a dynamic height row using UIStackViews and autolayout, so below is my UITableViewCell xib.

So as you can see it has all the stackViews inside it. I tried using estimated row height and the delegate functions. But nothing worked out.

So here are my few doubts.

1) Points to keep in mind while designing dynamic height row. 2) What I am doing wrong in my current scenario.

Answer 1

Ranjit, it is not necessary to use UIStackView for this case,

You can easily handle this issue without using UIStackView. Here is a tip for you.

Before you find the Estimated row height, you should apply some Autolayout tricks.

1. You simply add height and width constraint for that UIImageView. And add a Leading space and Top space for UIImageView.

2. Then add a Trailing space and Leading space for the first label in the cell. And align top to UIImageView.

3. Add top, leading and trailing space for the 2nd label.

4. Add height and width for the calendar image and add top space to 2nd label then align leading to 2nd label (right click and drag to 2nd label from calendar image). Add trailing space to 3rd label.

5. On 3rd label add Top space to 2nd label or center align to calendar image. Add trailing space to container and Bottom space too.

6. On 4th label (under the UIImageView) you should add a trailing space to calendar image and center align to calendar image. Add leadings space to container.

7. Make sure all the big data holding labels had number of lines is "0".

Now all the components are satisfied with x and y values. It helps to find the estimated row height for your tableview.

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

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

Now your table view can height choose automatically. Hope you got the ideas.

Answer 2

What I am doing wrong in my current scenario.

I see 2 big problems:

1. It is illogical to have a stack view with only 1 item. Stack views automatically add constraints between 2 or more items inside it.
2. You are missing a top level stack view to hold everything. With your layout, you would still need 4 sets of manually added constraints to place the stack views within their superview.

You seem to have approached the layout from a 2 column design, so I will go that.

Here is my layout.

Here is the cell rendered 3 times.

This is not perfectly matching your desired layout. However, I wanted to create a layout that was close to yours but also with as many default properties as possible. I changed only 2 things from the default.

1. "Share Type" label vertical content hugging priority = 250 (from 251). This is a minor correction to solve layout ambiguity.
2. "Column 1" stack view alignment = leading (from fill). This is an important change to show column 1 correctly.

If you want to fine tune this layout, you should play with stack view spacing, distribution, and alignment.

Note: the "2 Columns" stack view has 4 constraints to super view leading/trailing/top/bottom of 0. No other constraints were used.