How can I add an UISwitch to the section of an UITableView?

Question

I want to place an UISwitch to the section of an UITableView. I already made it to place the Switch itself to the section; but it is not responding.
In titleForHeaderInSection I'm loading the view as UITableViewHeaderFooterView. After that I'm manually adding my subviews, like an UIImage and also my UISwitch:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    let key = Array(indexNames.keys)[section];
    view.translatesAutoresizingMaskIntoConstraints = false;
    let header = view as! UITableViewHeaderFooterView;
    header.isUserInteractionEnabled = true

    if let imageResource =  (indexNames[key]![0] as! SectionItem).getIconResource() {

        let headerImageView = UIImageView(frame: CGRect(x: 8, // header.contentView.frame.origin.x,
                                                        y: header.frame.origin.y + header.bounds.height / 2 - 18, // header.contentView.frame.origin.y,
                                                        width: 36, height: 36))
        let headerImage = UIImage(named: imageResource)
        headerImageView.contentMode = .scaleAspectFit // OR .scaleAspectFill
        headerImageView.image = headerImage;
        headerImageView.clipsToBounds = true
        header.contentView.addSubview(headerImageView);

        let headerText = UILabel(frame: CGRect(x: 52, y: header.frame.origin.y + header.bounds.height / 2 - 10, width: 100, height: 20));
        // headerText.translatesAutoresizingMaskIntoConstraints = false
        headerText.textColor = UIColor.blue;
        headerText.text = key;
        header.contentView.addSubview(headerText);

        let groupSwitch = UISwitch(frame: CGRect(x: header.bounds.width - 132, y: header.frame.origin.y + header.bounds.height / 2 - 10, width: 100, height: 20));
        groupSwitch.isEnabled = true
        groupSwitch.isUserInteractionEnabled = true
        header.contentView.addSubview(groupSwitch)
        header.contentView.bringSubview(toFront: groupSwitch)
        header.contentView.isUserInteractionEnabled = true

        // view.;
        NSLayoutConstraint(item: headerImageView, attribute: .leading, relatedBy: .equal, toItem: header, attribute: .leading, multiplier: 1.0, constant: 16.0).isActive = true
        NSLayoutConstraint(item: headerImageView, attribute: .top, relatedBy: .equal, toItem: header, attribute: .top, multiplier: 1.0, constant: 8).isActive = true;
        NSLayoutConstraint(item: headerImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 24).isActive = true
        NSLayoutConstraint(item: headerImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 24).isActive = true



        NSLayoutConstraint(item: headerText, attribute: .leading, relatedBy: .equal, toItem: headerImageView, attribute: .trailing, multiplier: 1.0, constant: 16).isActive = true
        NSLayoutConstraint(item: headerText, attribute: .top, relatedBy: .equal, toItem: header, attribute: .top, multiplier: 1.0, constant: 8).isActive = true;
        NSLayoutConstraint(item: headerText, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 150.0).isActive = true
        NSLayoutConstraint(item: headerText, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 20).isActive = true
    }
}

The switch itself is showing up, but it's not changing its state. Do you have an idea how to solve my problem?

can you post your entire `titleForHeaderInSection` delegate method ? — GIJOW, May 07 '18 at 13:28

GIJOW · Accepted Answer · 2018-05-07T13:36:51.447

I just took your code and replaced the method by viewForHeaderInSection:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    header.isUserInteractionEnabled = true

    let groupSwitch = UISwitch(frame: CGRect(x: 0, y: 0, width: 100, height: 20));
    groupSwitch.isEnabled = true
    groupSwitch.isUserInteractionEnabled = true
    header.addSubview(groupSwitch)
    return header
}

and it worked flawlessly.

You can customize your view as you want, adding whatever you want inside it before returning the delegate.

If your need is to place on footer, same way, but using viewForFooterInSection.

How can I add an UISwitch to the section of an UITableView?

1 Answers1