如何在UITableViewController中创建横向滚动区域？

绝对可以用UICollectionView实现，这其实是这类需求的标准最优解，比手动折腾UIScrollView省心太多了！我帮你理清楚具体思路和实现步骤：

为什么选UICollectionView而不是手动UIScrollView？ #

• UICollectionView自带单元格复用机制，就算你有50+个图标，也不会因为创建大量视图导致内存飙升，性能更稳定。
• 原生支持横向滚动布局，不用自己计算滚动边界、处理手势。
• 自带点击事件代理（didSelectItemAt），不用给每个图标手动添加点击手势，代码更整洁。
• 可以轻松调整图标间距、大小，只需要修改FlowLayout的参数即可。

具体实现步骤 #

1. 自定义UITableViewCell，嵌入UICollectionView #

把横向滚动的图标列表封装在自定义TableViewCell里，这样复用TableViewCell的时候，内部的CollectionView也能正常工作：

• 给自定义Cell添加一个UICollectionView属性，初始化时设置UICollectionViewFlowLayout的scrollDirection = .horizontal，同时配置itemSize（图标大小）、minimumInteritemSpacing（图标间距）等参数。
• 让自定义Cell作为CollectionView的DataSource和Delegate，或者用闭包/代理把事件传递给外部的TableViewController，看你的需求。

2. 处理TableViewCell的复用逻辑 #

在TableViewController的cellForRowAt方法中，拿到自定义Cell后，给它传入图标数据数组，然后调用collectionView.reloadData()即可。注意要给CollectionView注册对应的自定义CollectionViewCell。

3. 图标点击与选中状态处理 #

利用CollectionView的didSelectItemAt代理方法，捕获用户的点击事件，然后处理选中状态（比如给选中的图标加边框、记录选中索引）。如果需要把事件同步到TableViewController，可以用闭包或者自定义协议来传递。

简单代码示例 #

这里给你一个Swift的简化实现参考：

自定义TableViewCell（包含CollectionView） #

class IconScrollTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate {
    // 用于接收外部传入的图标数组
    var iconImages: [UIImage] = [] {
        didSet {
            collectionView.reloadData()
        }
    }
    // 闭包传递点击事件给外部
    var onIconSelected: ((Int) -> Void)?
    
    // 内部的CollectionView
    private lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.itemSize = CGSize(width: 60, height: 60)
        layout.minimumInteritemSpacing = 16
        layout.minimumLineSpacing = 16
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.showsHorizontalScrollIndicator = false
        cv.backgroundColor = .clear
        cv.register(IconCollectionCell.self, forCellWithReuseIdentifier: "IconCell")
        return cv
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupCollectionView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupCollectionView() {
        collectionView.dataSource = self
        collectionView.delegate = self
        contentView.addSubview(collectionView)
        
        // 用AutoLayout约束CollectionView的位置
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
            collectionView.heightAnchor.constraint(equalToConstant: 60)
        ])
    }
    
    // MARK: UICollectionView DataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return iconImages.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "IconCell", for: indexPath) as! IconCollectionCell
        cell.iconImageView.image = iconImages[indexPath.item]
        return cell
    }
    
    // MARK: UICollectionView Delegate
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        onIconSelected?(indexPath.item)
        // 处理选中样式，比如给图标加红色边框
        if let cell = collectionView.cellForItem(at: indexPath) as? IconCollectionCell {
            cell.isSelected = true
            // 可选：取消之前选中的图标
            // 可以用变量记录上次选中的index，找到对应cell设置为未选中
        }
    }
}

自定义CollectionViewCell（单个图标单元格） #

class IconCollectionCell: UICollectionViewCell {
    let iconImageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFit
        iv.clipsToBounds = true
        iv.layer.cornerRadius = 8
        iv.layer.borderWidth = 2
        iv.layer.borderColor = UIColor.clear.cgColor
        return iv
    }()
    
    // 重写isSelected属性，自动处理选中样式
    override var isSelected: Bool {
        didSet {
            iconImageView.layer.borderColor = isSelected ? UIColor.red.cgColor : UIColor.clear.cgColor
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupSubviews() {
        contentView.addSubview(iconImageView)
        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            iconImageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            iconImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            iconImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            iconImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
}

在UITableViewController中使用 #

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 0 { // 第一个单元格是滚动图标区域
        let cell = tableView.dequeueReusableCell(withIdentifier: "IconScrollCell", for: indexPath) as! IconScrollTableViewCell
        // 替换成你的图标数组
        cell.iconImages = (1...50).map { UIImage(named: "icon_\($0)")! }
        cell.onIconSelected = { [weak self] selectedIndex in
            print("选中了第\(selectedIndex + 1)个图标")
            // 这里可以做后续逻辑，比如更新选中状态、保存数据等
        }
        return cell
    } else {
        // 其他单元格的处理逻辑
        let cell = tableView.dequeueReusableCell(withIdentifier: "NormalCell", for: indexPath)
        cell.textLabel?.text = "普通单元格"
        return cell
    }
}

关于自定义视图的疑问 #

完全可以制作独立的自定义视图来实现！比如你可以把这个横向滚动的图标列表做成一个IconScrollView: UIView子类，内部包含UICollectionView，然后把这个自定义视图添加到UITableViewCell的contentView里。这种方式更模块化，方便在其他地方复用这个滚动图标组件。

不推荐手动用UIScrollView的原因 #

不是说完全做不了，但你需要手动计算每个图标的frame、添加所有图标视图、自己实现复用逻辑（不然50+个图标会占用大量内存）、手动处理点击手势、维护滚动状态……代码量会大很多，而且容易出现布局错乱、性能问题，完全没必要舍近求远。

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