解决UITableViewHeaderFooterView内UIImageView添加点击手势的报错问题

我自定义了一个名为ProfileHeaderView的UITableViewHeaderFooterView，其中包含名为userImage的UIImageView，想要为该userImage添加点击手势。

自定义Header代码：

class ProfileHeaderView: UITableViewHeaderFooterView {
    
    // MARK: - Subviews
    
    private var statusText: String = ""
    
    lazy var userImage: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: me.login))
                
        imageView.layer.cornerRadius = 45
        imageView.clipsToBounds = true
                
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        imageView.isUserInteractionEnabled = true
        
        return imageView
    }()
...
}

在UIViewController中使用的代码：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if section == 0 {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ProfileHeaderView")
        view?.isUserInteractionEnabled = true
        
        let tapPicture = UITapGestureRecognizer(
            target: self,
            action: #selector(didTapPicture)
        )
        
        tapPicture = 1
        view?.userImage.addGestureRecognizer(tapPicture)
        return view
    }
    return nil
}

报错信息：Value of type 'UITableViewHeaderFooterView' has no member 'userImage'

报错原因 #

1. 类型不匹配：tableView.dequeueReusableHeaderFooterView(withIdentifier:)方法默认返回的是基类UITableViewHeaderFooterView实例，而非你自定义的ProfileHeaderView。Swift是强类型语言，编译器无法识别基类拥有userImage这个自定义属性，因此报错。
2. 语法错误：代码中tapPicture = 1完全不符合语法，正确写法应为设置tapPicture.numberOfTapsRequired = 1。

解决方法 #

方法一：强制类型转换（快速修复） #

取出复用的HeaderView后，将其安全转换为ProfileHeaderView类型，再访问userImage属性：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if section == 0 {
        guard let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ProfileHeaderView") as? ProfileHeaderView else {
            return nil
        }
        headerView.isUserInteractionEnabled = true
        
        let tapPicture = UITapGestureRecognizer(
            target: self,
            action: #selector(didTapPicture)
        )
        tapPicture.numberOfTapsRequired = 1
        headerView.userImage.addGestureRecognizer(tapPicture)
        return headerView
    }
    return nil
}

@objc private func didTapPicture() {
    // 处理图片点击逻辑
}

方法二：在自定义Header内部管理手势（推荐，解耦代码） #

将手势添加逻辑封装在ProfileHeaderView内部，通过闭包或代理传递点击事件给ViewController，提升代码复用性和解耦性：

1. 修改ProfileHeaderView：

class ProfileHeaderView: UITableViewHeaderFooterView {
    
    // 用闭包传递点击事件
    var onUserImageTapped: (() -> Void)?
    
    private var statusText: String = ""
    
    lazy var userImage: UIImageView = {
        let imageView = UIImageView(image: UIImage(named: me.login))
                
        imageView.layer.cornerRadius = 45
        imageView.clipsToBounds = true
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.isUserInteractionEnabled = true
        
        // 内部添加手势
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(userImageTapped))
        tapGesture.numberOfTapsRequired = 1
        imageView.addGestureRecognizer(tapGesture)
        
        return imageView
    }()
    
    @objc private func userImageTapped() {
        onUserImageTapped?()
    }
    
    // ...其他代码
}

2. 在ViewController中设置回调：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if section == 0 {
        guard let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ProfileHeaderView") as? ProfileHeaderView else {
            return nil
        }
        headerView.isUserInteractionEnabled = true
        // 绑定点击回调
        headerView.onUserImageTapped = { [weak self] in
            self?.didTapPicture()
        }
        return headerView
    }
    return nil
}

@objc private func didTapPicture() {
    // 处理图片点击逻辑
}

内容的提问来源于stack exchange，提问作者Philipp