Search code examples
swiftuitableviewautolayoutuitableviewsectionheader

Extra space at section header in UITableView with Autolayout

I have a UITableViewController that has:

  1. UIView for the tableHeaderView
  2. UIView for sectionHeaderView
  3. UITableViewCell for the cells of the tableview
  4. UIView for the tableFooterView

I have the UITableViewController in my storyboard, and there is defined the tableHeaderView too, and the tableFooterView. The sectionHeaderView and the tableviewcell are apart in nib files.

override func viewDidLoad() {
    super.viewDidLoad()
    
    //Register the different cells of the tableview
    // First load table nib
    let bundle = Bundle(for: type(of: self))

    // Register table cell class from nib
    let cellNib = UINib(nibName: "CheckingDocumentCheckCell", bundle: bundle)
    tableView.register(cellNib, forCellReuseIdentifier: CheckingDocumentCheckCellVC.reuseIdentifer)
    
    //Register table section header
    let headerCellNib = UINib(nibName: "CheckingDocumentCategoryHeader", bundle: bundle)
    tableView.register(headerCellNib, forCellReuseIdentifier: CheckingDocumentCategoryHeaderCellVC.reuseIdentifer)

    
    let tapGestureReconizer = UITapGestureRecognizer(target: self, action: #selector(tap))
    tapGestureReconizer.cancelsTouchesInView = false
    tableView.addGestureRecognizer(tapGestureReconizer)
    
    tableView.keyboardDismissMode = .onDrag
    
    
    tableView.tableHeaderView = containerHeaderView
    tableView.tableFooterView = containerFooterView
    
    saveCheckingDocumentButton.backgroundColor = UIColor(hexString: ConstantsEnum.lideraColor)
    saveCheckingDocumentButton.tintColor = UIColor.white
    saveCheckingDocumentButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
    saveCheckingDocumentButton.layer.cornerRadius = 5
    saveCheckingDocumentButton.layer.borderWidth = 1
    saveCheckingDocumentButton.layer.borderColor = UIColor(hexString: ConstantsEnum.lideraColor)?.cgColor
    saveCheckingDocumentButton.setTitle(NSLocalizedString("SAVECHECKINGDOCUMENT", comment: ""), for: .normal)
    
}

My header view, footer view and tablecell are working fine. Where i have the problem is with the section header that is leaving a white space in each section and i'm not able to reproduce where the problem is (the red boxes are the spaces i want to remove): UITableViewController

My View of the section header is: Sectionheader

And the method where i implement the view is:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let category = myCheckingDocumentResponse?.document?.categoriesQuestions[section]
    let cell = tableView.dequeueReusableCell(withIdentifier: CheckingDocumentCategoryHeaderCellVC.reuseIdentifer) as! CheckingDocumentCategoryHeaderCellVC
    cell.headerContainer.backgroundColor = .lightGray
    cell.title.text = String(format: "%@\n%@", category?.description ?? "", category?.questionDescription ?? "")
    return cell
}

If i turn off this method and don't use section header that white space is not displayed, so needs to be something related with this section header.

Solution

  • I just ran into this today and finally found an answer that makes sense and works:

    self.tableView.sectionHeaderTopPadding = 0

    Looks like this property was just added in iOS 15

    https://stackoverflow.com/a/70196640/7798489