如何在其内容大小上匹配水平collectionView Cell的宽度

Posted 2023-03-14

【中文标题】如何在其内容大小上匹配水平collectionView Cell的宽度

【英文标题】：How to match the horizontal collectionView Cell's width on it's content size

【发布时间】：2019-06-16 05:53:28

【问题描述】：

我知道一些与此相关的问题，但我之前尝试过这些问题，但仍然没有运气。

这是我在以下屏幕截图中的问题 我当前的屏幕显示一个固定的单元格大小，它显示较小的内容和较大的内容用点覆盖单元格的空白空间..

我想要像下面这样 它应该与产品类别名称内容的宽度相匹配。

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)

也许我在这里遗漏了一件简单的事情，但我现在无法弄清楚。请帮助我，并为我奇怪的英语感到抱歉。

【参考方案1】：

假设您正在使用一个简单的UICollectionViewCell 子类，并在情节提要中正确设置了约束（标签固定在其父视图的所有四个侧面），如下所示：

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
    

结果：

【讨论】：

嗨，它适用于原型单元吗？我尝试使用原型单元但无法正常工作

您的意思是故事板中的原型单元格？

是故事板中的原型单元

【参考方案2】：

您可以在categoryName 上使用size(withAttributes:) 计算categoryName 的width，而不是dequeuing 另一个cell，即

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 中，给font 你想要的categoryName。

【讨论】：

这里如何设置自定义字体？

在我设置.font的值的数组中，你也可以设置其他属性。示例：.font: UIFont(name: "YOUR_FONT_NAME", size: 15.0)

不，还没有。当我使用 if let text = self.categoryNameArray[indexPath.item] 我收到此错误“条件绑定的初始化程序必须具有可选类型，而不是 'String'”

这一定是因为 categoryNameArray 不是可选的。我已经更新了答案。立即尝试。

当我从文本中删除 if 时，出现另一个错误“无法使用 '(Int, () -> _)' 类型的索引来下标 '[String]' 类型的值”跨度>