UICollectionView两行单元格无法并排问题求助

Hey there! Let's troubleshoot why your UICollectionView cells aren't displaying side-by-side even when the text length is appropriate. This is a super common hiccup with UICollectionViewFlowLayout, so let's break down the fixes step by step:

The most likely culprit is misconfigured spacing or sizing in your UICollectionViewFlowLayout. If your cells aren't fitting side-by-side, it's often because the layout doesn't have enough horizontal space allocated.

Here's how to adjust it:

guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }

// Set reasonable spacing values (adjust these to match your design)
flowLayout.minimumInteritemSpacing = 8 // Horizontal gap between cells
flowLayout.minimumLineSpacing = 12 // Vertical gap between rows
flowLayout.sectionInset = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)

// For dynamic cell sizing based on content (great for variable text lengths)
flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

Your cell's content (like the text label) needs complete, unambiguous constraints so the system can calculate the cell's correct size. If constraints are missing, the cell might expand beyond the intended width.

Example cell setup:

class TextCollectionViewCell: UICollectionViewCell {
    private let textLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0 // Allow text to wrap to multiple lines
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(textLabel)
        
        // Pin the label to the cell's contentView with padding
        NSLayoutConstraint.activate([
            textLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            textLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            textLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configure(with text: String) {
        textLabel.text = text
    }
}

If automatic sizing isn't working as expected, you can manually compute the exact width for each cell to fit two per row. This gives you full control over the layout.

Implement this delegate method:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    let totalAvailableWidth = collectionView.bounds.width 
        - flowLayout.sectionInset.left 
        - flowLayout.sectionInset.right 
        - flowLayout.minimumInteritemSpacing
    
    // Split available width between 2 cells
    let itemWidth = totalAvailableWidth / 2
    
    // Calculate height based on text content (adjust padding as needed)
    let text = yourDataSource[indexPath.item]
    let label = UILabel()
    label.numberOfLines = 0
    label.text = text
    let labelHeight = label.sizeThatFits(CGSize(width: itemWidth - 16, height: .greatestFiniteMagnitude)).height
    
    return CGSize(width: itemWidth, height: labelHeight + 16) // Add top/bottom padding
}

If your collectionView's width is changing unexpectedly (e.g., it's inside a scrollView without proper constraints), it can throw off the item size calculations. Make sure your collectionView is pinned to its parent view correctly:

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
}

Start with checking the flow layout settings and cell constraints—those are the most common fixes for this issue. If automatic sizing doesn't work, the manual calculation method should lock in the two-column layout you want.

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