如何为横向UICollectionView的最后一个单元格添加按钮

问题分析 #

你之前的代码存在几个关键问题导致按钮不显示：

1. btnRate 未声明初始化，直接使用会报错
2. 没有区分普通单元格和最后一个单元格的显示逻辑，所有单元格默认加载按钮但未控制显示状态
3. 单元格复用机制下未重置按钮状态，可能导致复用混乱

方案一：在最后一个数据单元格显示按钮 #

这种方案是在现有数据单元格基础上，仅让最后一个单元格显示操作按钮：

1. 补全单元格内按钮的定义

修改 DashboardCollectionViewCell，添加按钮初始化代码：

class DashboardCollectionViewCell: UICollectionViewCell {
    static let identifier = "DashboardCollectionViewCell"
    
    private let posterImage: UIImageView = {
        let image = UIImageView()
        image.contentMode = .scaleToFill
        image.translatesAutoresizingMaskIntoConstraints = false
        image.layer.cornerRadius = 8
        image.clipsToBounds = true
        return image
    }()
    
    // 补全按钮声明与初始化
    private let btnRate: UIButton = {
        let btn = UIButton(type: .system)
        btn.setImage(UIImage(systemName: "star.fill"), for: .normal) // 替换为你需要的图标/文字
        btn.tintColor = .systemYellow
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.isHidden = true // 默认隐藏，仅最后一个单元格显示
        return btn
    }()
    
    // 对外暴露按钮点击回调
    var onButtonTap: (() -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(posterImage)
        posterImage.addSubview(btnRate)
        
        // 添加按钮点击事件
        btnRate.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        
        NSLayoutConstraint.activate([
            posterImage.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            posterImage.topAnchor.constraint(equalTo: contentView.topAnchor),
            posterImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            posterImage.widthAnchor.constraint(equalToConstant: 170),
            posterImage.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            posterImage.heightAnchor.constraint(equalToConstant: 170),
            btnRate.centerYAnchor.constraint(equalTo: posterImage.centerYAnchor),
            btnRate.centerXAnchor.constraint(equalTo: posterImage.centerXAnchor),
            btnRate.widthAnchor.constraint(equalToConstant: 30),
            btnRate.heightAnchor.constraint(equalToConstant: 30),
        ])
    }
    
    @objc private func buttonTapped() {
        onButtonTap?()
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        posterImage.image = nil
        btnRate.isHidden = true // 复用单元格时重置按钮状态
    }
    
    // 修改configure方法，传入是否为最后一个单元格的标识
    public func configure(with model: Item, isLastCell: Bool) {
        // 这里添加图片加载逻辑，例如：
        // if let url = URL(string: model.imageUrl) {
        //     posterImage.kf.setImage(with: url)
        // }
        btnRate.isHidden = !isLastCell // 仅最后一个单元格显示按钮
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 修改数据源代理方法

在 cellForItemAt 中判断是否为最后一个单元格，并传递状态：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: DashboardCollectionViewCell.identifier, for: indexPath) as? DashboardCollectionViewCell else {
        return UICollectionViewCell()
    }
    let isLastCell = indexPath.row == recons.count - 1
    cell.configure(with: recons[indexPath.row], isLastCell: isLastCell)
    
    // 设置按钮点击回调
    cell.onButtonTap = {
        // 这里添加按钮点击后的操作逻辑
        print("最后一个单元格按钮被点击")
    }
    return cell
}

方案二：添加独立的按钮单元格（推荐） #

这种方案是单独注册一个按钮单元格作为列表最后一项，避免复用冲突：

1. 创建按钮单元格

class ActionCollectionViewCell: UICollectionViewCell {
    static let identifier = "ActionCollectionViewCell"
    
    private let actionBtn: UIButton = {
        let btn = UIButton(type: .system)
        btn.setTitle("加载更多", for: .normal)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        btn.tintColor = .systemBlue
        btn.translatesAutoresizingMaskIntoConstraints = false
        return btn
    }()
    
    var onButtonTap: (() -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(actionBtn)
        actionBtn.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        
        NSLayoutConstraint.activate([
            actionBtn.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            actionBtn.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            actionBtn.widthAnchor.constraint(equalToConstant: 170),
            actionBtn.heightAnchor.constraint(equalToConstant: 170),
        ])
    }
    
    @objc private func buttonTapped() {
        onButtonTap?()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 修改CollectionView初始化与代理方法

// 初始化时注册按钮单元格
private let collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    layout.itemSize = CGSize(width: 170, height: 170)
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.register(DashboardCollectionViewCell.self, forCellWithReuseIdentifier: DashboardCollectionViewCell.identifier)
    collectionView.register(ActionCollectionViewCell.self, forCellWithReuseIdentifier: ActionCollectionViewCell.identifier) // 新增注册
    return collectionView
}()

// 修改数据源数量，增加一个按钮单元格
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return recons.count + 1
}

// 修改cellForItemAt，区分数据单元格和按钮单元格
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if indexPath.row == recons.count {
        // 最后一个是按钮单元格
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ActionCollectionViewCell.identifier, for: indexPath) as? ActionCollectionViewCell else {
            return UICollectionViewCell()
        }
        cell.onButtonTap = {
            // 按钮点击操作逻辑
            print("加载更多按钮被点击")
        }
        return cell
    } else {
        // 普通数据单元格
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: DashboardCollectionViewCell.identifier, for: indexPath) as? DashboardCollectionViewCell else {
            return UICollectionViewCell()
        }
        cell.configure(with: recons[indexPath.row])
        return cell
    }
}

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