如何创建单行多列的TableView及识别选中的行列

嘿，我来帮你搞定这个问题！下面分两部分给你讲清楚怎么实现～

其实TableView本身是基于行的组件，但要实现单行多列的效果，核心思路是自定义UITableViewCell，在单元格内部布局多个子视图作为“列”，用AutoLayout或者栈视图来控制这些列的排列。

举个Swift的实现例子：

首先自定义一个包含多列的单元格：

class MultiColumnCell: UITableViewCell {
    // 定义三个列的标签（你可以根据需求增减）
    let column1Label = UILabel()
    let column2Label = UILabel()
    let column3Label = UILabel()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupColumnLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupColumnLayout()
    }
    
    private func setupColumnLayout() {
        // 用水平栈视图统一管理列的布局，让它们平分宽度
        let stackView = UIStackView(arrangedSubviews: [column1Label, column2Label, column3Label])
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.spacing = 8
        stackView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(stackView)
        
        // 让栈视图铺满单元格的contentView
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
        
        // 给标签设置基础样式
        [column1Label, column2Label, column3Label].forEach {
            $0.textAlignment = .center
            $0.font = UIFont.systemFont(ofSize: 16)
            $0.textColor = .black
        }
    }
}

然后在ViewController中配置TableView，设置行数为1：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let tableView = UITableView()
    // 模拟单行的多列数据
    let columnContent = ["第一列", "第二列", "第三列"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    private func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        // 让TableView铺满屏幕安全区域
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        
        tableView.dataSource = self
        tableView.delegate = self
        // 注册自定义单元格
        tableView.register(MultiColumnCell.self, forCellReuseIdentifier: "MultiColumnCell")
        // 设置自动行高
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 60
    }
    
    // 只返回1行
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // 给单元格的每一列赋值
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MultiColumnCell", for: indexPath) as! MultiColumnCell
        cell.column1Label.text = columnContent[0]
        cell.column2Label.text = columnContent[1]
        cell.column3Label.text = columnContent[2]
        return cell
    }
}

TableView默认的点击事件只能识别行，要精准到列，我们需要给每个“列”的视图添加点击交互，常用两种方式：给标签添加手势识别器或者直接用UIButton作为列组件。

这里用手势+代理的方式举例子，方便回调到ViewController处理逻辑：

首先修改自定义Cell，添加代理和手势：

// 定义代理协议，用来传递点击事件
protocol MultiColumnCellDelegate: AnyObject {
    func didTapColumn(at columnIndex: Int, inRow rowIndex: Int)
}

class MultiColumnCell: UITableViewCell {
    // ... 之前的列标签定义
    
    weak var delegate: MultiColumnCellDelegate?
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupColumnLayout()
        setupColumnTapGesture()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupColumnLayout()
        setupColumnTapGesture()
    }
    
    private func setupColumnTapGesture() {
        // 给每个标签添加点击手势，并设置tag区分列
        let tap1 = UITapGestureRecognizer(target: self, action: #selector(columnTapped(_:)))
        column1Label.isUserInteractionEnabled = true
        column1Label.addGestureRecognizer(tap1)
        column1Label.tag = 0
        
        let tap2 = UITapGestureRecognizer(target: self, action: #selector(columnTapped(_:)))
        column2Label.isUserInteractionEnabled = true
        column2Label.addGestureRecognizer(tap2)
        column2Label.tag = 1
        
        let tap3 = UITapGestureRecognizer(target: self, action: #selector(columnTapped(_:)))
        column3Label.isUserInteractionEnabled = true
        column3Label.addGestureRecognizer(tap3)
        column3Label.tag = 2
    }
    
    @objc private func columnTapped(_ gesture: UITapGestureRecognizer) {
        guard let tappedLabel = gesture.view as? UILabel else { return }
        // 因为只有一行，所以rowIndex固定为0；如果是多行，可以在cellForRowAt时把indexPath.row传给cell
        delegate?.didTapColumn(at: tappedLabel.tag, inRow: 0)
    }
    
    // ... 之前的setupColumnLayout方法
}

然后在ViewController中实现代理，处理点击事件：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, MultiColumnCellDelegate {
    // ... 之前的代码
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MultiColumnCell", for: indexPath) as! MultiColumnCell
        cell.delegate = self // 设置代理
        cell.column1Label.text = columnContent[0]
        cell.column2Label.text = columnContent[1]
        cell.column3Label.text = columnContent[2]
        return cell
    }
    
    // 实现代理方法，获取选中的行列
    func didTapColumn(at columnIndex: Int, inRow rowIndex: Int) {
        print("用户选中了第\(rowIndex)行，第\(columnIndex)列，内容是\(columnContent[columnIndex])")
        // 这里可以添加你的业务逻辑，比如弹窗提示、跳转页面等
    }
}

如果觉得手势麻烦，也可以直接把UILabel换成UIButton，给按钮添加addTarget事件，逻辑是类似的，用tag区分列即可。

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