TableView inside TableView cell, adjust cell height automatically

Question

A list of content needs to be displayed in each tableviewcell, So here I used tableview inside Tableview cell. But the problem is main tableview cell height is not changing according to the content. I don't want to fix the UITableViewCell height, I want it to be adjusted dynamically based on the content.

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! SubCell
        
        if indexPath.row%2==0{
            cell.backgroundColor = .orange
        }else{
            cell.backgroundColor = .green
        }
        return cell
    }

    class SubCell: UITableViewCell, UITableViewDelegate,UITableViewDataSource {
        
        
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return UITableView.automaticDimension
        }
        
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 4
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell2") as! SubCell2
            
            cell.titleLabel.text = "asdf asdf asdf asdf asdf adfs asdf asdf asdf asdf asdf asdf asd fasd fasd fasd fasd fasd fasd f asdf asdf asdf asdf asd fasd fasd fasd fasd fasd fasdf asdf asd fasd 1234"
            return cell
            
        }
        
        @IBOutlet weak var tablView2: UITableView!
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
                    
        }
        
        override func setSelected(_ selected: Bool, animated: Bool) {
            super.setSelected(selected, animated: animated)
            
        }
        
    }

    class SubCell2: UITableViewCell {
        
            
        @IBOutlet weak var titleLabel: UILabel!
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
            
            
        }
        
        override func setSelected(_ selected: Bool, animated: Bool) {
            super.setSelected(selected, animated: animated)
            
            // Configure the view for the selected state
        }
    }

Expected Output :

Actual Output:

Constraints:

How are set the constraints in the cell? That's where the "magic" happens. — Larme, Feb 09 '21 at 09:59
Did you checked that: https://stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights ? Also, you have a UITableView inside a UITableViewCell? — Larme, Feb 09 '21 at 10:03
@Codecracker - "nesting" tableViews inside tableView cells is inherently problematic, and rarely gives you the result you want. Is there a reason you don't want to use multiple tableView sections? — DonMag, Feb 09 '21 at 16:10

score 1 · Answer 1 · answered Feb 12 '21 at 08:36

In the case of dynamic content where we need to place a UITableView inside a UITableViewCell, Automatic Dimension doesn’t seem to work because the outer UITableView needs to have a height for every cell it has. By the time this height is needed, the child UITableView hasn’t loaded its own cells yet, and therefore compiler cannot get the height in runtime.

So how do we achieve this ? One way is to use a vertical axis UIStackView (instead of a UITableView) inside the parent cell with leading, trailing, top and bottom constraints with respect to the cell’s content view without any need for height constraint. Instead of UITableViewCell create a custom view with necessary UI components and add as addArrangedSubview to the UIStackView. As each view is added to the stack view, the stack view’s height dynamically increases which in turn expands the height of the outer UITableViewCell thereby achieving dynamic height with automatic dimension of the outer table.

score 0 · Answer 2 · answered Feb 09 '21 at 11:17

Solution:

make your label constraint Bottom space to container to its superview(content view).
Now select "yourTableView" in size inspector make it "Row height as Automatic"
Now select "yourTableViewCell" in size inspector make it "Row height as Automatic"

As based on label height, the content view will be Resized, And the allocation of height tableViewcell & tableview is automatically adjusted.

i have posted the above answer only for StoryBoard & Xib.

score 0 · Answer 3 · answered Feb 09 '21 at 15:06

You don't have any height settings for your Title Label. If you set one, your cells will act dynamically.

You can add another constraint to the Title Label and set the height to "greater than or equal to" whatever number you want to start with (30, for example). So long as you have that title label's number of lines set to 0, then the title label should dynamically grow in height and still maintain the same padding you've had with the rest of your constraints.

TableView inside TableView cell, adjust cell height automatically

3 Answers3