UITableView inside UITableViewCell height issues

Question

So basically, I want to embed a UITableView inside UITableViewCell.

I used UIStackView to use its AutoLayout power!

Anyway, each row of "Inner UITableView" will consist of a fixed sized UIImageView and a UILabel of lines = 0 (i.e. not fixed)

UIStackView(horizontal) -> UIImageView + UILabel

Requirements:

• The size of each row/cell for InnerTableView should be dynamic due to random text being provided from the server. Thus making the whole InnerUITableView's height to automaticDimension
• The text for the UILabel above InnerUITableView is also dynamic. (thus makes sense to use UIStackView in the first place)

Note: The Main UITableView consist of multiple cells of different types (this is basically a BotChatBot)

Also: estimatedHeight can be around 40 points.

Problem:

The InnerTableView being dynamically sized leads to its cellForRowAt method not being called for once, thus not allowing UIStackView to increase its length due to no change in contentSize.

In order to fix the above problem, I tried:

• Setting up initial height constraint for UITableVIew to 10(some random number), estimatedRowHight for InnerTableView being 50, thus setting up height of UITableView as tableViewInsideCellHeightConstraint?.constant = tableViewInsideCell.contentSize.height which somehow gives me some room but it's still not reliable when height for a row exceeds estimated height of 40

P.S layoutIfNeeded() were triggered for TableView, StackView and ParentCell

I also have another way of solving the above problem:

1. Using estimated height, multiply the constant(estimatedHeight) by number of rows to be displayed i.e. list size
2. Change heightConstraint for Inner UITableView with the calculated one,
3. With each iteration, calculate the total "REQUIRED" height (using +=visibleCells[i].frame.height) of UITableView (as each iteration will provide the size of the cell(content size)
4. Update the height constraint of Inner UITableView

    if heightForTableView == nil {
        if indexPath.row == listDict!.count - 1 {
          var heightOfTableView: CGFloat = 0.0
          let cells = tableView.visibleCells
          for visibleCells in cells {
            heightOfTableView += visibleCells.frame.height
          }
          let newHeight = heightOfTableView + cell.frame.height
          reloadMe(newHeight)
        }
      }

The above fix leads to visible jerk in the UI :[

Question:

Is there any concrete solution to the above problem? I tried searching it over and over again.. can't really find any strong fix!

Answer 1

Ok so you are building a chat app. That changes a few of my suggestions.

So to answer your question as it stands, you could follow something like this: Replacement for deprecated sizeWithFont: in iOS 7? calculating the size of the text with sizeWithAttributes:. Adding up all the label heights (working out if the image will be bigger) and using that to try calculate a fixed height for the tableview, then it would display the list entirely. This isn't really an ideal case for tableview.

Personally I would have a look at the way slack handles this. Rather than having the options inside the text bubble, you could have each option appear as a new bubble or cell on its own after the message, or have a bunch of buttons in a single cell.

Here's an example of standbot (from their website) showing a cell with a collection of buttons, possibly in a stack-view or a scrollview. This might be a much easier way to achieve it rather than having a tableview inside a tableview

Answer 2

When you call api for data in subTableView you can try like below :

self.tvCell?.table.reloadData() //tv cell is my Parent TableViewCell
self.table.beginUpdates() //Parent TableView
self.table.endUpdates() // Parent TableView

It is working fine for me i hope it will help you.