不能在TableViewCell中使用CollectionViewCell动态标签宽度

Question

我将 CollectionView 放置在 TableViewCell 内。我在 CollectionViewCell 内添加了一个 Label 并使用 Xib 设置所有约束。但是，CollectionView仍然依赖于Show Size Inspector部分中的宽度和高度值。我已在 Show Size Inspector 选项卡中将 Estimate Size 值设置为 Automatic，但 CollectionViewCell 继续依赖于 Show Size Inspector 中的 Width 和 Height 值。当我正确设置所有约束时，它应该是动态的。我做错了什么？

模拟器SS：

主VC：

final class MainVC: UIViewController {

    @IBOutlet private weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        registerCells()
    }
    
    private func registerCells() {
        tableView.register(cellClass: CategoryListCell.self)
    }
}

extension MainVC: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeue(CategoryListCell.self, indexPath: indexPath) {
            return cell
        }
        return UITableViewCell()
    }
}

类别列表单元格（XIB）：

类别列表单元格：

class CategoryListCell: UITableViewCell {

    @IBOutlet private var collectionView: UICollectionView!
    let categories: [String] = [
        "All",
        "Nature",
        "Horror",
        "Crovd",
        "Apartments",
        "Planets"
    ]
    
    override func awakeFromNib() {
        super.awakeFromNib()
        registerCell()
        let collectionFlowLayout = UICollectionViewFlowLayout()
        collectionFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        collectionView.collectionViewLayout = collectionFlowLayout
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
    }
    
    private func registerCell() {
        collectionView.register(cellClass: CategoryListItemCell.self)
    }
}

extension CategoryListCell: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeue(CategoryListItemCell.self, indexPath: indexPath) {
            cell.prepareCell(with: categories[indexPath.row])
            return cell
        }
        return UICollectionViewCell()
    }
}

类别列表项单元格（XIB）：

类别列表项目单元格：

final class CategoryListItemCell: UICollectionViewCell {
    
    @IBOutlet private var categoryTitleLabel: UILabel!
    @IBOutlet private var bottomLineView: UIView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        bottomLineView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            bottomLineView.widthAnchor.constraint(equalTo: categoryTitleLabel.widthAnchor)
        ])
    }
    
    func prepareCell(with model: String) {
        categoryTitleLabel.text = model
    }
}

Answer 1

我复制了您的 XIB，问题是您的

Bottom Line View

被限制为

width = 4

。

然后，在您的班级

awakeFromNib()

中，您将

categoryTitleLabel

宽度设置为等于

bottomLineView

宽度——因此标签宽度也是 也

4

。

将 XIB 中的约束更改为此（我将标签背景设置为黄色，以便我们可以看到它）：

你的班级就变成了：

final class CategoryListItemCell: UICollectionViewCell {
    
    @IBOutlet private var categoryTitleLabel: UILabel!
    @IBOutlet private var bottomLineView: UIView!

    func prepareCell(with model: String) {
        categoryTitleLabel.text = model
    }
}

结果——视图背景为浅灰色，表格为白色，集合视图背景为绿色：