带有自定义 UIView（包括按钮）的 UIViewController 无法识别点击

Question

When trying to load a custom UIView (BaseHeader.swift) that contains a UIButton into a UIViewController (ViewController.swift) programmatically, the taps on the button are not recognized.

If I extract the code within the custom UIView and paste it directly into the UIViewController, all taps are recognized and working as expected. What am I missing?

At first, I thought it was a problem with not defining a frame size for the UIView after it gets instantiated. I thought that there might be no "hit box" for the button despite it being displayed as intended. After giving the view a frame I still had no luck and tried various other things after googling about for awhile.

The view loads but button taps are not recognized -- see image

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.title = "Authentication"
    }

    override func loadView() {
        super.loadView()

        let header = BaseHeader()
        header.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(header)

        NSLayoutConstraint.activate([
            header.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            header.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            header.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: -10),
        ])
    }
}

BaseHeader.swift

import UIKit

class BaseHeader: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    func setupView() {

        self.isUserInteractionEnabled = true

        let avenirFont = UIFont(name: "Avenir", size: 40)
        let lightAvenirTitle = avenirFont?.light

        let title = UILabel()
        title.text = "Title"
        title.font = lightAvenirTitle
        title.textColor = .black
        title.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(title)

        NSLayoutConstraint.activate([
            title.topAnchor.constraint(equalTo: self.topAnchor, constant: 20),
            title.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        ])


        let profile = UIButton()
        let profileImage = UIImage(named: "person-icon")
        profile.setImage(profileImage, for: .normal)
        profile.setImage(UIImage(named: "think-icon"), for: .highlighted)
        profile.addTarget(self, action: #selector(profileTapped), for: .touchUpInside)
        profile.backgroundColor = .systemBlue
        profile.frame.size = CGSize(width: 30, height: 30)
        profile.isUserInteractionEnabled = true
        profile.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(profile)

        NSLayoutConstraint.activate([
            profile.centerYAnchor.constraint(equalTo: title.centerYAnchor),
            profile.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20),
        ])
    }

    @objc func profileTapped(sender: UIButton) {
        print("Tapped")
    }
}

Answer 1

It might be that you are calling the wrong initializer for your custom view and that your setupView() function is not being called. It looks like in the view controller you are calling

let header = BaseHeader()

To initialize the view, but it's this init:

override init(frame: CGRect) {
    super.init(frame: frame)
    setupView()
}

That calls your setupView() function and sets up the tap.

Answer 2

You forgot set height for BaseHeader

 NSLayoutConstraint.activate([
            header.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            header.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            header.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: -10),
header.heightAnchor.constraint(equalToConstant: 40) //add more
        ])