Swift中UICollectionView单Cell同时显示两个内容效果实现求助

嘿，作为Swift新手遇到这种布局问题太正常了，别慌！我看你现有的代码里，numberOfItemsInSection直接返回了数组总长度，这意味着每个Cell只对应一个数组元素，自然没法实现“一个Cell放两个内容”的效果。下面我给你一套完整的实现方案，你可以对照着调整自己的代码：

第一步：自定义包含双内容的CollectionViewCell #

首先得创建一个自定义Cell，里面放两个用来显示内容的控件（这里用UILabel举例）：

import UIKit

class DoubleContentCell: UICollectionViewCell {
    // 第一个内容标签
    let leftLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.textAlignment = .center
        label.font = .systemFont(ofSize: 16)
        label.backgroundColor = .systemGray6
        return label
    }()
    
    // 第二个内容标签
    let rightLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.textAlignment = .center
        label.font = .systemFont(ofSize: 16)
        label.backgroundColor = .systemGray6
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupCellUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupCellUI() {
        // 将两个标签添加到Cell的contentView
        contentView.addSubview(leftLabel)
        contentView.addSubview(rightLabel)
        
        // 设置约束：让两个标签横向平分Cell宽度，上下留边
        NSLayoutConstraint.activate([
            leftLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            leftLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            leftLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
            leftLabel.widthAnchor.constraint(equalTo: contentView.widthAnchor, multiplier: 0.5, constant: -12),
            
            rightLabel.leadingAnchor.constraint(equalTo: leftLabel.trailingAnchor, constant: 8),
            rightLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            rightLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
            rightLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8)
        ])
        
        // 给Cell加个边框，方便你调试布局
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.lightGray.cgColor
    }
}

第二步：调整ViewController的数据源与布局逻辑 #

接下来修改你的ViewController，调整数据源计算方式，注册自定义Cell并绑定数据：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    let arr = ["aa","bb","cc","d#d","ee","ff"]
    private var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }
    
    private func setupCollectionView() {
        // 创建流式布局
        let layout = UICollectionViewFlowLayout()
        // 设置Cell大小，你可以根据需求调整
        layout.itemSize = CGSize(width: view.bounds.width - 32, height: 60)
        layout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
        
        // 初始化CollectionView
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.backgroundColor = .white
        
        // 注册自定义Cell
        collectionView.register(DoubleContentCell.self, forCellWithReuseIdentifier: "DoubleContentCell")
        
        // 设置代理和数据源
        collectionView.dataSource = self
        collectionView.delegate = self
        
        view.addSubview(collectionView)
        
        // 让CollectionView铺满整个屏幕
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 关键：每个Cell放2个元素，奇数个元素时多一个Cell放最后一个
        return (arr.count + 1) / 2
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DoubleContentCell", for: indexPath) as! DoubleContentCell
        
        // 计算当前Cell对应的第一个元素索引
        let firstItemIndex = indexPath.item * 2
        cell.leftLabel.text = arr[firstItemIndex]
        
        // 检查是否存在第二个元素，避免数组越界
        if firstItemIndex + 1 < arr.count {
            cell.rightLabel.text = arr[firstItemIndex + 1]
        } else {
            cell.rightLabel.text = ""
        }
        
        return cell
    }
}

关键要点说明 #

• 数据源计算：(arr.count + 1)/2确保不管数组是奇数还是偶数长度，都能正确生成所需的Cell数量
• 元素索引对应：每个Cell的第一个元素索引是indexPath.item * 2，第二个是indexPath.item * 2 + 1，必须加判断避免越界崩溃
• 自定义Cell：系统默认Cell无法满足双内容需求，必须自定义包含双控件的Cell，并通过AutoLayout固定布局
• 布局代理：实现UICollectionViewDelegateFlowLayout可以灵活控制Cell大小和间距

如果需要把两个内容单元改成纵向排列，只需要修改自定义Cell里的约束即可，非常灵活。

内容的提问来源于stack exchange，提问作者Григорий Ищенко