How to make Automatic Height Header in UITableView?

Question

Hello i try to make expand/collapse using UITableView but i have problem with Header. I have try all tutorial but not working. This is my sample code:

        import UIKit
    import SafariServices
    class AboutViewController: UIViewController {

        @IBOutlet weak var tblView: UITableView!

        var data = [
            DataModal(headerName: "Apa itu Brevir?", subType: ["Brevir adalah bla..bla"], isExpandable: false),
            DataModal(headerName: "Apa isi Brevir?", subType: ["Garis besarnya adalah bla..bla..blaa...bla..bla..blaa...bla..bla..blaa...bla..bla..blaa"], isExpandable: false),
            DataModal(headerName: "Mengapa 7x Sehari?", subType: ["Tujuh Kali dalam bla..bla"], isExpandable: false),
            DataModal(headerName: "Ibadat apa saja yang termaksud dalam 7x sehari tersebut?", subType: ["a. Ibadat Pembukaan", "b. Ibadat Pembukaan", "c. Ibadat Pembukaan", "d. Ibadat Pembukaan", "e. Ibadat Pembukaan", "f. Ibadat Pembukaan", "g. Ibadat Pembukaan"], isExpandable: false)]

        override func viewDidLoad() {
            super.viewDidLoad()
            tblView.tableFooterView = UIView()

        }
    }

    extension AboutViewController: UITableViewDataSource, UITableViewDelegate {

        func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            let headerView = HeaderView(frame: CGRect(x: 10, y: 10, width: tblView.frame.size.width - 20, height: 40))
            headerView.delegate = self
            headerView.secIndex = section
            headerView.btn.setTitle(data[section].headerName, for: .normal)
            return headerView
        }

        func numberOfSections(in tableView: UITableView) -> Int {
            return data.count
        }

        func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
            return 44
        }

        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            if data[section].isExpandable {
                return data[section].subType.count
            } else {
                return Int(UITableView.automaticDimension)
            }
        }

        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
            cell.textLabel?.numberOfLines = 0
            cell.textLabel?.text = data[indexPath.section].subType[indexPath.row]
            return cell

        }

        override func viewWillAppear(_ animated: Bool) {
            tblView.estimatedSectionHeaderHeight = 40
            tblView.sectionHeaderHeight = UITableView.automaticDimension
        }

    }

    extension AboutViewController: HeaderDelegate {
        func callHeader(idx: Int) {
            data[idx].isExpandable = !data[idx].isExpandable
            tblView.reloadSections([idx], with: .automatic)
        }


    }

Answer 1

Since you are using button, it won't expand automatically.

Use a label instead and set its numberOfLines = 0.

Later add Button over it.

Also implement table view sections delegate/dataSource methods:

heightForHeaderInSection return 50 //minimum height

estimateHeightForHeaderSection return UITableView.automaticDimension // automatic height

Answer 2

Try this:

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

        let board = UIView()

        let headerView = HeaderView(frame: CGRect(x: 10, y: 10, width: tablView.frame.size.width - 20, height: 40)
        headerView.delegate = self
        headerView.secIndex = section
        headerView.btn.setTitle(data[section].headerName, for: .normal)
        board.addSubview(headerView)
        return board
    }

Answer 3

First you have to calculate height and use "UITableViewDelegate" methods as follows

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) 
   -> CGFloat {
return ( your calculated height for header)
 }