如何使 collection 视图 header 和单元格大小相同

Question

我创建了一个包含多个部分的 collection 视图。我希望 header 视图和 collection 视图单元格大小相同。

我尝试了几种方法：

在 collection 视图上设置插图，这似乎对单元格或 headers 没有影响。
更改了 referenceSizeForHeaderInSection，这似乎也没有效果。
更改了与可重用视图关联的 Xib 中视图的大小。
将Xib中的UILabel从上、左、右、下约束为0，宽度设置为300，但这似乎被覆盖了（见下图，图中涂黑的区域是应用程序姓名）。

Screenshot of constraints being broke

以下是我的一些方法：

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")
}

Collection 查看 delegate/datasource 和 header 设置

// 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
}

提前致谢。

Answer 1

听起来您需要 header 的宽度为特定尺寸。 UICollectionViewFlowLayout 的默认值是填充 collection 视图的宽度。

这里有几个选项：

1) 创建一个自定义布局，将补充视图 (headers) 调整为所需的大小。这可能会被视为 "correct" 选项，但可能比您需要的更复杂。

2) 只需将 "container" 视图添加到您的 header 视图，将宽度设置为您想要的大小 (120) 并将 X 中心设置为 parent。如果根 collection 视图元素 (UICollectionReusabableView) 是 transparent 它不会显示离开你的子视图 ("container") 作为唯一可见的视图。

3) 除非您使用的是 UICollectionViewController，否则您可以将 collection 视图的宽度设置为您想要的大小 (120)。如果您正在使用 UICollectionViewController，您可以用 UIViewController 替换它，添加 UICollectionView 并设置数据源并委托给 UIViewController。这样 headers，在默认流布局下，将填充 cv，它只会像你需要的那样宽。

如何使 collection 视图 header 和单元格大小相同

How to make collection view header and cells the same size

uicollectionview

uicollectionviewcell

uicollectionviewlayout

swift