Question

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

我尝试了几件事：

在集合视图上设置insets，这似乎对单元格或标题没有影响。
更改了referenceSizeForHeaderInSection，这似乎也没有效果。
使用可重复使用的视图更改了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
}

提前谢谢。

Answer 1

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

你有几个选择：

1）创建一个自定义布局，以所需大小调整补充视图（标题）的大小。这可能被视为＆＃34;正确＆＃34;选项，但可能比你需要的更复杂。

2）只需添加一个＆＃34;容器＆＃34;查看标题视图，将宽度设置为所需大小（120）并将X设置为父级。如果根集合视图元素（UICollectionReusabableView）是透明的，则它不会显示将子视图（＆＃34;容器＆＃34;）显示为唯一可见视图。

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

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

1 个答案: