Swift中如何为UIScrollView内的UILabel添加点击事件并识别标签

问题核心 #

你遇到的问题本质是contentView的约束未正确撑开，导致UILabel不在contentView的有效交互范围内。虽然视觉上能看到Label，但由于contentView高度为0，Label的位置超出了父视图的bounds，点击事件会被ScrollView拦截，无法传递到Label。

解决方案 #

下面提供两种可行的修复方式，推荐第二种更简洁的布局方案：

方案一：手动修正contentView约束，撑开高度

修改原代码中contentView的约束逻辑，让contentView的底部由最后一个Label的底部来决定，确保所有Label都在contentView的有效交互范围内：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.backgroundColor = .lightGray
        view.addSubview(scrollView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        let contentView = UIView()
        contentView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentView)

        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        var lastLabel: UILabel?
        for i in 0..<10 {
            let label = UILabel()
            label.translatesAutoresizingMaskIntoConstraints = false
            label.text = "Label \(i+1)"
            label.textAlignment = .center
            label.backgroundColor = .white
            contentView.addSubview(label)

            NSLayoutConstraint.activate([
                label.topAnchor.constraint(equalTo: lastLabel?.bottomAnchor ?? contentView.topAnchor, constant: lastLabel == nil ? 20 : 10),
                label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
                label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
                label.heightAnchor.constraint(equalToConstant: 40)
            ])
            
            let tapGesture = UITapGestureRecognizer(target: self, action: #selector(labelTapped(_:)))
            label.addGestureRecognizer(tapGesture)
            label.isUserInteractionEnabled = true
            
            lastLabel = label
        }
        
        // 用最后一个Label的bottom撑开contentView的高度
        if let lastLabel = lastLabel {
            NSLayoutConstraint.activate([
                contentView.bottomAnchor.constraint(equalTo: lastLabel.bottomAnchor, constant: 20)
            ])
        }
    }
    
    @objc func labelTapped(_ sender: UITapGestureRecognizer) {
        guard let label = sender.view as? UILabel else { return }
        print("Tapped Label: \(label.text ?? "")")
    }
}

方案二：使用UIStackView简化布局（推荐）

通过垂直StackView自动管理Label的排列和contentView的高度，代码更简洁且不易出错：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.backgroundColor = .lightGray
        view.addSubview(scrollView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        let contentView = UIView()
        contentView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentView)

        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        // 创建垂直StackView管理Label
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.spacing = 10 // Label之间的间距
        stackView.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20) // 内边距
        stackView.isLayoutMarginsRelativeArrangement = true // 启用内边距
        contentView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
        
        for i in 0..<10 {
            let label = UILabel()
            label.translatesAutoresizingMaskIntoConstraints = false
            label.text = "Label \(i+1)"
            label.textAlignment = .center
            label.backgroundColor = .white
            label.heightAnchor.constraint(equalToConstant: 40).isActive = true
            
            // 添加点击手势
            label.isUserInteractionEnabled = true
            let tapGesture = UITapGestureRecognizer(target: self, action: #selector(labelTapped(_:)))
            label.addGestureRecognizer(tapGesture)
            
            stackView.addArrangedSubview(label)
        }
    }
    
    @objc func labelTapped(_ sender: UITapGestureRecognizer) {
        guard let label = sender.view as? UILabel else { return }
        print("Tapped Label: \(label.text ?? "")")
    }
}

关键注意点 #

1. 必须设置label.isUserInteractionEnabled = true，UILabel默认关闭用户交互
2. 确保Label所在的父视图（contentView）高度足够包裹所有Label，否则事件会被上层视图拦截
3. 通过sender.view在回调中强转成UILabel，即可获取被点击的标签内容或标识

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