How to bound UITableView Header and also want to show or hide tableview cells by clicking tableview header programatically in swift

Question

I want to add a view in tableView header. I already tried by different ways but achieved the goal. My code is given below for adding a view in headerView.

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return arrSupport[section]
}

func tableView(_ tableView: UITableView, willDisplayHeaderView view:UIView, forSection: Int) {
    if let tableViewHeaderFooterView = view as? UITableViewHeaderFooterView {
        tableViewHeaderFooterView.textLabel?.textColor = UIColor.white
        tableViewHeaderFooterView.textLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        tableViewHeaderFooterView.contentView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)
        let headerView = UIView()
        headerView.frame = CGRect(x: tblSupport.frame.origin.x-10, y: 10, width: tblSupport.frame.size.width-20, height: 60)
        tableViewHeaderFooterView.contentView.frame = CGRect(x: 10, y: 0, width: tableView.frame.size.width-20, height: 50)
        headerView.addSubview(tableViewHeaderFooterView)
    }
}

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

    let headerView = UIView()
    headerView.frame = CGRect(x: tblSupport.frame.origin.x-10, y: 10, width: tblSupport.frame.size.width-20, height: 60)
    headerView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)
    return headerView
}`

And also I want to show or hide tableview cells by clicking on respective headerview also need to decrease width of headerview like desire status

Current Status:

Desired Status:

devgariya · Answer 1 · 2018-07-18T11:23:01.053

Its simple you can achieve it by:

Crate a custom view in view for header in section.
when user clicks on expend button reload that section number of row(you want to show)

when click on collapse button reload section and make number of row to 0

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

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    let label = UILabel()
    let abutton = UIButton()
    abutton.frame = CGRect(x: tableView.frame.size.width-60, y: 0, width: 40, height: 60)
    abutton.setTitle("^", for: .normal)
    abutton.setTitleColor(.gray, for: .normal)
    abutton.addTarget(self, action: Selector(("collappesAndExpend")), for: .touchUpInside)
    label.frame = CGRect(x: 10, y: 0, width: tableView.frame.size.width, height: 60)
    label.text = "Your Title"
    label.textColor = .gray
    headerView.frame = CGRect(x: 0, y: 10, width: tableView.frame.size.width, height: 60)
    headerView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)
    headerView.addSubview(label)
    headerView.addSubview(abutton)
    return headerView
}

func collappesAndExpend(_ sender: Any) {
    //Relod you section
}

I tried to create a custom view in different ways but it didn't worked, so please help me — Anupam Das, Jul 18 '18 at 11:01
please see the updated code, don't use titleForHeaderInSection — devgariya, Jul 18 '18 at 11:24

marc · Answer 2 · 2018-07-18T11:21:55.593

First of all to solve your first issue you need to specify the height of your header.

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

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView.init(frame: CGRect.init(x: 10, y: 10, width: tblSupport.frame.width - 20, height: 40)
    headerView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)

    return headerView

}

Now for your second issue, we are going to make the cell height minimal and by calling beginUpdates() and endUpdates(), the tableview will make an animation making your cells shrink in an animated way:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView.init(frame: CGRect.init(x: 10, y: 10, width: tblSupport.frame.width - 20, height: 40)


    let myButton = UIButton.init(frame: headerView.frame)

    myButton.backgroundColor = .clear
    myButton.tag = section
    myButton.addTarget(self, action: #selector(buttonPressed(sender:)), for: .touchUpInside)



    headerView.addSubview(myButton)

    return headerView

}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {


    // add the next if statement

    if indexPath.section == chosenSection {
        return 0.0000001
    }

    return 30 // put your usual cell height here
}


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

var chosenSection = -1

@objc func buttonPressed(sender : UIButton) {


    if chosenSection == sender.tag {
        chosenSection = -1

    } else {
        chosenSection = sender.tag

        tblSupport.beginUpdates()
        tblSupport.endUpdates()
    }

}

Note : Setting a row height to 0 will not make it 0 but will set it to a default height, this is why I wrote 0.000001

Please could you once lookup my desire design..., as when I want to add a custom header view it takes full header view, I want x: 10 and width would be "-20" from tableview width. — Anupam Das, Jul 18 '18 at 11:19
Functionality is very well but design is not achieved which i want — Anupam Das, Jul 18 '18 at 11:35

How to bound UITableView Header and also want to show or hide tableview cells by clicking tableview header programatically in swift

2 Answers2