Swift 如何使集合视图标题和单元格大小相同

我已经创建了一个包含多个部分的集合视图。我希望标题视图和集合视图单元格的大小相同

我试过几种方法：

• 在集合视图上设置insets，这似乎对单元格或标题没有影响
• 已更改的引用SizeForHeaderInstruction似乎也没有效果
• 更改了与可重用视图关联的Xib中视图的大小
• 将Xib中的UILabel从顶部、左侧、右侧和底部约束为0，并将宽度设置为300，但这似乎被覆盖（见下图，图中的黑色区域是应用程序名称）

以下是我的一些方法：

viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.delegate = self
    collectionView.dataSource = self

    collectionView.contentInset = UIEdgeInsets(top: 30, left: 30, bottom: 0, right: 30)

    collectionViewHeightAnchor.constant = view.frame.height / 2

    let nib = UINib(nibName: "CollectionReusableView", bundle: nil)
    collectionView.register(nib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "groceryHeader")
}

集合视图委托/数据源和标题设置

// MARK: - Header

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return foodItems.count
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return CGSize(width: 120, height: 45)
}

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let (key, _) = foodItems[indexPath.section]
    let cell = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "groceryHeader", for: indexPath) as! CollectionReusableView
    cell.lbl.text = key

    return cell
}



// MARK: - Cell

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return foodItems[section].1.count
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 120, height: 45)
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "foodCell", for: indexPath)
    if let cell = cell as? FoodItemCell {
        let (_, val) = foodItems[indexPath.section]
        cell.titleLbl.text = val[indexPath.row].text
        cell.quantityLbl.text = val[indexPath.row].quantity
        cell.postId = val[indexPath.row].id

        if let arr = UserDefaults.standard.getCheckedIds() {
            cell.checkBoxImg.setImage(arr.contains(val[indexPath.row].id) ? UIImage(named: "checked") : UIImage(named: "unchecked"), for: .normal)
        }
    }
    return cell
}

---

提前谢谢。

听起来您需要将标题的宽度设置为一定的大小。UICollectionViewFlowLayout的默认设置是填充集合视图的宽度

您在这里有几个选项：

1） 创建自定义布局，将补充视图（标题）调整为所需大小。这可能被认为是“正确”的选择，但可能比您需要的更复杂

2） 只需在标题视图中添加一个“容器”视图，将宽度设置为所需大小（120），将中心X设置为父视图。如果根集合视图元素（UICollectionReuseAbleView）是透明的，则不会显示将子视图（“容器”）保留为唯一可见的视图

3） 除非您使用UICollectionViewController，否则您可以将集合视图的宽度设置为所需的大小（120）。如果正在使用UICollectionViewController，则可以将其替换为UIViewController，添加UICollectionView并设置数据源并委托给UIViewController。这样，默认流布局下的标题将填充cv，cv的宽度仅为您所需的宽度