尝试使用 UICollectionViewCompositionalLayout 制作长的自调整大小单元格

Question

所以我有一个非常简单的布局，带有自动调整大小的单元格（类似于标签），使用 UICollectionViewCompositionalLayout 和估计的项目宽度让它工作，但是一旦我得到一个不适合集合视图的长字符串，我就会得到一个错误：“UICollectionView 内部不一致：缺少单元格的最终属性”。

class FruitViewController: UIViewController, UICollectionViewDataSource {

    let data: [String] = [
//        "Apple",
        "Apple, Apple Apple Apple Apple Apple Apple Apple Apple Apple",
        "Pear",
        "Orange",
        "Fig",
        "Carrot",
        "Cabbage",
        "Potato",
        "Pear",
    ]
    
    let layout = UICollectionViewCompositionalLayout { (sectionIndex, _) -> NSCollectionLayoutSection? in
        let item = NSCollectionLayoutItem(layoutSize: .init(
            widthDimension: .estimated(10),
            heightDimension: .absolute(36))
        )
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1),
            heightDimension: .estimated(10)
        )
        let group = NSCollectionLayoutGroup.horizontal(
            layoutSize: groupSize,
            subitems: [item]
        )
        group.interItemSpacing = .fixed(8)
        
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 8
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16)
        
        return section
    }
    
    lazy var collectionView: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: "id")
        
        return collectionView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(collectionView)
        NSLayoutConstraint.activate([
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        collectionView.dataSource = self
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "id", for: indexPath) as! MyCollectionViewCell
        cell.myLabel.text = data[indexPath.item]
        return cell
    }
}

class MyCollectionViewCell: UICollectionViewCell {
    
    let myLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        contentView.backgroundColor = .lightGray
        contentView.addSubview(myLabel)
        myLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            myLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            myLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            myLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            myLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

有什么想法如何为太长的标签换行吗？

Answer 1

您可以为单元格指定宽度小于或等于约束。在代码中，将常量设置为集合视图的宽度减去您可能拥有的任何内容插入。

Answer 2

我也遇到和你一样的问题。我认为问题是

intrinsic size of cell

大于 collectionView 的宽度。正确的修复方法是为

myLabel

:

提供最大宽度约束

myLabel.widthAnchor.constraint(lessThanOrEqualToConstant: UIScreen.main.bounds.width - 64)

-64

是根据

horizontal constraint

的

myLabel

和您的

contentInsets

 的 

collectionView

计算得出