Search code examples
iosuitableviewsectionheader

Lable and button in the header section view UITableView


I am trying to add a section title Label and a button in the header section view. but it looks empty. when I run the application the header is empty. the 2nd section code work fine

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        if (section == 0){
            let label = UILabel.init(frame: CGRect.init(x: 17, y: 139, width: tableView.frame.size.width, height: 45))
                       label.textColor = UIColor.black
                       label.font = UIFont.systemFont(ofSize: 13.0)
                       label.textAlignment = .left
                       label.text = "   My Balances"
                       label.backgroundColor  = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
                       
                       let frame = tableView.frame
                       let height:CGFloat = 66

                       let button = UIButton(frame: CGRect(x: 306, y: 139, width: 15, height: 15))  // create button
                       button.tag = section
                       // the button is image - set image
                       button.setImage(UIImage(named: "remove_button"), for: .normal)

                       let headerView = UIView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: height))  // create custom view
                       headerView.addSubview(button)   // add the button to the view
                       headerView.addSubview(label)
                       return headerView
                       //return label
                       
            //return label
            
        }
        else {
             let label = UILabel.init(frame: CGRect.init(x: 0, y: 241, width: tableView.frame.size.width, height: 45))
            label.textColor = UIColor.black
            label.font = UIFont.systemFont(ofSize: 13.0)
            label.textAlignment = .left
            label.text = "   My Customers"
            label.backgroundColor  = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
            
            return label
        }
    }

Solution

  • You are not following the proper way. First you have to set height of header view using heightForHeaderInSection from tableview object in viewDidLoad() like -

    tableView.heightForHeaderInSection = 250 
    

    or by using its delegate method -

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

    You set the height of header view equal to tableview height. Set it less than it let height:CGFloat = 250 -

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            
                let label = UILabel.init(frame: CGRect.init(x: 0, y: 241, width: tableView.frame.size.width, height: 45))
                label.textColor = UIColor.black
                label.font = UIFont.systemFont(ofSize: 13.0)
                label.textAlignment = .left
                label.text = "   My Balances"
                label.backgroundColor  = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.00)
                
                let frame = tableView.frame
                let height:CGFloat = 250 
    
                let button = UIButton(frame: CGRect(x: 5, y: 10, width: 15, height: 15))  // create button
                button.tag = section
                // the button is image - set image
                button.setImage(UIImage(named: "remove_button"), for: .normal)
    
                let headerView = UIView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: height))  // create custom view
                headerView.addSubview(button)   // add the button to the view
                headerView.addSubview(label)
                return headerView
                //return label
                
            }
    

    Or another way is to make custom reusable header view, register as header view and finally dequeu it.

    You can follow the documentation from apple for second way - https://developer.apple.com/documentation/uikit/views_and_controls/table_views/adding_headers_and_footers_to_table_sections