自定义按钮点击在表格页脚视图中的UIView中不起作用

Question

I have the most peculiar scenario that I can't seem to fix. I have a custom button that I add as a subview to a UIView . I then add the UIView to the tableFooterView of a table view and I'm not able to have the button tap be detected. Here is the code:

public func configureMyButton() {
        let button = CustomButton("My title")
        button.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)
        button.isUserInteractionEnabled = true
        let buttonContainer = UIView()
        buttonContainer.addSubview(button)
        buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[button]", options: [], metrics: [:], views: ["button":button]))
        buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[button]-8-|", options: [], metrics: [:], views: ["button":button]))
        self.tableView.tableFooterView = buttonContainer
    } 

@objc func buttonAction(sender: UIButton!) {
    print("Button tapped")
}

Now if I change this:

self.view.addSubview(buttonContainer)

The button tap works. This leads me to believe that theres something about tableFooterView that stops the tap from working but I'm not entirely sure what it could be. Any ideas?

Answer 1

The reason why the button wasn't responding to taps was because the buttonContainers frame was completely wrong. So despite everything looking find on screen, the frame was practically none existent and hence the button wasn't responding

public func configureMyButton() {
    let button = CustomButton("My title")
    button.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)
    button.isUserInteractionEnabled = true
    let buttonContainer = UIView()
    buttonContainer.addSubview(button)
    buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[button]", options: [], metrics: [:], views: ["button":button]))
    buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[button]-8-|", options: [], metrics: [:], views: ["button":button]))
    buttonContainer.layoutIfNeeded()
    buttonContainer.frame = CGRect(x: 0, y: 0, width: self.tableView.frame.size.height, height: button.frame.size.height + 16)
    self.tableView.tableFooterView = buttonContainer
}

I'm not overly happy with the solution. I'm of the opinion I shouldn't have to have fiddled with the buttonContainer frame. Autolayout should have deduced it's frame to at the very least be the size of its subviews.

Answer 2

As you noted, the button could not be tapped because it was displayed outside the button container frame.

UITableView handles the layout for its header and footer views, so using auto-layout with them takes an additional step.

Don't add your footer view in viewDidLoad() . Instead, override viewDidLayoutSubviews() like this:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    // manipulating the tableFooterView will trigger viewDidLayoutSubviews()
    // so only call this if we haven't added the footer view yet
    if tableView.tableFooterView == nil {
        configureMyButton()
        tableView.layoutTableFooterView()
    }
}

Change your configureMyButton() func as shown here:

public func configureMyButton() {

    // I don't have your CustomButton() func...
    //let button = CustomButton("My title")

    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("My Title", for: .normal)
    button.backgroundColor = .blue

    button.addTarget(self, action: #selector(self.buttonAction), for: .touchUpInside)
    button.isUserInteractionEnabled = true

    let buttonContainer = UIView()

    // set background to red so we can see it - remove after testing
    buttonContainer.backgroundColor = .red

    buttonContainer.addSubview(button)

    buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[button]|", options: [], metrics: [:], views: ["button":button]))
    buttonContainer.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[button]-8-|", options: [], metrics: [:], views: ["button":button]))

    self.tableView.tableFooterView = buttonContainer
}

And then add this extension:

extension UITableView {

    func layoutTableHeaderView() {

        guard let tempView = self.tableHeaderView else { return }
        tempView.translatesAutoresizingMaskIntoConstraints = false

        let width = tempView.bounds.size.width;

        let temporaryWidthConstraints = NSLayoutConstraint.constraints(withVisualFormat: "[tempView(width)]", options: NSLayoutConstraint.FormatOptions(rawValue: UInt(0)), metrics: ["width": width], views: ["tempView": tempView])

        tempView.addConstraints(temporaryWidthConstraints)

        tempView.setNeedsLayout()
        tempView.layoutIfNeeded()

        let tempSize = tempView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
        let height = tempSize.height
        var frame = tempView.frame

        frame.size.height = height
        tempView.frame = frame

        self.tableHeaderView = tempView

        tempView.removeConstraints(temporaryWidthConstraints)
        tempView.translatesAutoresizingMaskIntoConstraints = true

    }

    func layoutTableFooterView() {

        guard let tempView = self.tableFooterView else { return }
        tempView.translatesAutoresizingMaskIntoConstraints = false

        let width = tempView.bounds.size.width;

        let temporaryWidthConstraints = NSLayoutConstraint.constraints(withVisualFormat: "[tempView(width)]", options: NSLayoutConstraint.FormatOptions(rawValue: UInt(0)), metrics: ["width": width], views: ["tempView": tempView])

        tempView.addConstraints(temporaryWidthConstraints)

        tempView.setNeedsLayout()
        tempView.layoutIfNeeded()

        let tempSize = tempView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
        let height = tempSize.height
        var frame = tempView.frame

        frame.size.height = height
        tempView.frame = frame

        self.tableFooterView = tempView

        tempView.removeConstraints(temporaryWidthConstraints)
        tempView.translatesAutoresizingMaskIntoConstraints = true

    }

}

Now your footer view will size correctly based on your auto-layout constraints -- so if you add elements to the footer view you won't have to explicitly change your height value.