Table view inside another table view's header

Question

I have a table view (1) with a header. I'd like to put another table view (2) inside that header. The problem is that the second table view's cells are dynamic, so I need to make sure that the first table view's header is also dynamic.

I've followed this tutorial to make the first table view's header dynamic:

https://useyourloaf.com/blog/variable-height-table-view-header/

But the table view header doesn't even show when I run the simulator, and I believe this has to do with the fact that the second table view's cells are dynamic, and therefor not assigning a height to the first table view's header.

So my question is, what is causing the header to not show and how can I fix it?

Here is my code:

class MyViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var firstTableView: UITableView!
    @IBOutlet weak var headerView: UIView!
    @IBOutlet weak var secondTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        firstTableView.delegate = self
        firstTableView.dataSource = self

        secondTableView.delegate = self
        secondTableView.dataSource = self

        // Make the first table view's cells dynamic
        firstTableView.rowHeight = UITableView.automaticDimension
        firstTableView.estimatedRowHeight = 50

        // Make the second table view's cells dynamic
        secondTableView.rowHeight = UITableView.automaticDimension
        secondTableView.estimatedRowHeight = 50

        // Register the custom xib for the first table view
        firstTableView.register(UINib(nibName: "FirstTableViewCell", bundle: nil), forCellReuseIdentifier: "FirstTableViewCell")

        // Register the custom xib for the second table view
        secondTableView.register(UINib(nibName: "SecondTableViewCell", bundle: nil), forCellReuseIdentifier: "SecondTableViewCell")
    }

    /**
     Used to resize the table view header.
     Source: https://useyourloaf.com/blog/variable-height-table-view-header/
     */
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        guard let headerView = firstTableView.tableHeaderView else {
            return
        }

        let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)

        if (headerView.frame.size.height != size.height) {
            headerView.frame.size.height = size.height
            firstTableView.tableHeaderView = headerView
            firstTableView.layoutIfNeeded()
        }
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if tableView == self.firstTableView {
            return 100
        }

        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if tableView == self.firstTableView {
            // Logic to create new cell
        } else if tableView == self.secondTableView {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: "SecondTableViewCell", for: indexPath) as? SecondTableViewCell  else {
                fatalError("The dequeued cell is not an instance of SecondTableViewCell.")
            }

            cell.initialize()

            return cell
        }

        return UITableViewCell()
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }

}

I think you should rethink your layout because putting a tableView in the header of a tableView is gonna be weird and frustrating — Wernzy, Jul 12 '19 at 23:46
What is the reason you need a table view inside a table view's header? — Nathan, Jul 13 '19 at 00:02
I have a couple other views I want to show above the first table view, and my first thought was to implement a header. What's a better approach? There are 3 other views I'd like to put above the first table view, but I also want them all to scroll together. — user6724161, Jul 13 '19 at 00:04
You would want to just make 1 tableview with 2 sections.. you can have different settings on different sections without any problems. — Vollan, Jul 13 '19 at 05:14

Ahmed Osama · Answer 1 · 2019-07-13T01:21:05.450

0

If you want to have views above a table view and all of them scroll together, a good implementation to this is to embed all of these views in a scroll view, disable table view scrolling and give it a height constraint, and change the height constraint at run-time depending on table items to expand the table to maximum possible height (How?). This way you will get the expected behaviour.

edited Jul 13 '19 at 01:21

answered Jul 13 '19 at 00:20

Ahmed Osama

854
1
8
17

Table view inside another table view's header

1 Answers1