如何匹配水平collectionView單元格的內容大小的寬度

Question

我已經知道一些與此相關的問題，但是我以前嘗試過這些問題，但仍然沒有運氣。

這是以下屏幕截圖中的我的問題 我當前的屏幕顯示固定的單元格大小，並顯示空白區域，較小的內容和較大的內容在帶點的單元格上方。

我想要像下面 它應與產品類別名稱內容的寬度匹配。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if collectionView == self.catCollectionView{
        let catCell = collectionView.dequeueReusableCell(withReuseIdentifier: "catCell", for: indexPath)
            as! catCell

        DispatchQueue.main.async {
            catCell.configureCell()

            let catCountInt = self.catCountArray[indexPath.row]


            catCell.catCountLabel.text = String(catCountInt)
            catCell.catNameLabel.text = self.categoryNameArray[indexPath.row]
            catCell.catCountLabel.sizeToFit()
            catCell.catNameLabel.sizeToFit()

        }
        return catCell
 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let catCell = collectionView.dequeueReusableCell(withReuseIdentifier: "catCell", for: indexPath)
        as! catCell
    catCell.catNameLabel.text = self.categoryNameArray[indexPath.item]
    catCell.catNameLabel.sizeToFit()
     let labelWidth = catCell.catNameLabel.frame.width + 10
    print("frame width: \(labelWidth)")
    return CGSize(width: labelWidth, height: 21)
}

}

也許我在這里錯過了一件簡單的事情，但是現在我還不太清楚。 請幫助我，抱歉我的英語很奇怪。

Answer 1

假設您正在使用一個簡單的UICollectionViewCell子類，且其在情節UICollectionViewCell正確設置了約束（標簽固定在其superview的所有四個側面），如下所示：

class CategoryCell: UICollectionViewCell {

    @IBOutlet var nameLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 1
    }

}

然后，您可以簡單地讓自動布局確定單元格的大小：

class CollectionViewController: UICollectionViewController {

    let categories = [
        "All Products",
        "Fresh",
        "Health & Beauty",
        "Beverages",
        "Home & life"
    ]

    private var flowLayout: UICollectionViewFlowLayout? {
        return collectionViewLayout as? UICollectionViewFlowLayout
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.backgroundColor = .white

        flowLayout?.sectionInset = .init(top: 15, left: 15, bottom: 15, right: 15)
        flowLayout?.sectionInsetReference = .fromSafeArea
        flowLayout?.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

        DispatchQueue.main.async {
            self.flowLayout?.invalidateLayout()
        }
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCell", for: indexPath) as! CategoryCell
        cell.nameLabel.text = categories[indexPath.row]
        return cell
    }

}

結果：

Answer 2

而不是dequeuing另一cell在collectionView(_:layout:sizeForItemAt:) ，你可以簡單地計算width的categoryName使用size(withAttributes:)上的categoryName ，即

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let text = self.categoryNameArray[indexPath.row] {
    let cellWidth = text.size(withAttributes:[.font: UIFont.systemFont(ofSize:14.0)]).width + 10.0
    return CGSize(width: cellWidth, height: 21.0)
}

在attributes ，給您想要categoryName任何font 。