如何将 UICollectionViewCompositionalLayout header 样式设置为与其 children 列表 .insetGrouped 布局分开？

Question

我正在尝试模仿我们在 Mail 应用程序中找到的外观，其中邮箱组 header 是可折叠的，其 children 列表使用 .insetGrouped layoutOption 设置样式。

我尝试使用 UICollectionLayoutListConfiguration(appearance: .sidebarPlain) 作为配置，但我没有找到一种方法来设置部分的 .insetGrouped 外观样式

邮件应用程序：

我最接近这个布局的是：

我正在使用下面的方法在我的 ViewController 中配置 collectionView。

let mixedListLayout = 
    UICollectionViewCompositionalLayout { section, env -> NSCollectionLayoutSection? in
    
    let listConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)

    return NSCollectionLayoutSection.list(using: listConfig, layoutEnvironment: env)
}

collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: mixedListLayout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]       
collectionView.delegate = self

view.addSubview(collectionView)

对于单元格注册，我的方法是这样的：

let headerRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, SidebarItem> { (cell, _, item) in

    var contentConfiguration = UIListContentConfiguration.sidebarHeader()
    contentConfiguration.text = item.title
    cell.contentConfiguration = contentConfiguration
    let outlineDisclosureConfig = UICellAccessory.OutlineDisclosureOptions(style: .header)
    cell.accessories = [.outlineDisclosure(displayed: .always, options: outlineDisclosureConfig)]
}

let primaryRowRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, SidebarItem> { (cell, _, item) in

    var contentConfiguration = UIListContentConfiguration.sidebarCell()
    contentConfiguration.text = item.title
    contentConfiguration.image = item.image

    cell.contentConfiguration = contentConfiguration
    cell.indentationLevel = 0
    if let acessoryLabel = item.subtitle {
        cell.accessories = [.label(text: acessoryLabel)]
    }
    cell.accessories.append(.disclosureIndicator())
}

dataSource = UICollectionViewDiffableDataSource<SidebarSection, SidebarItem>(collectionView: collectionView) {
    (collectionView, indexPath, item) -> UICollectionViewCell in

    switch item.type {
    case .header:
        return collectionView.dequeueConfiguredReusableCell(using: headerRegistration, for: indexPath, item: item)
    case .primaryRow:
        return collectionView.dequeueConfiguredReusableCell(using: primaryRowRegistration, for: indexPath, item: item)
    }
}

Answer 1

我认为你应该使用 outline group in combination with disclosure group

Answer 2

在阅读更多文档后，我通过在 UICollectionLayoutListConfiguration 中将 headerMode 设置为 .firstItemInSection 解决了这个问题，因此我的 mixedListLayout 如下所示：

let mixedListLayout = 
    UICollectionViewCompositionalLayout { section, env -> NSCollectionLayoutSection? in
    
    var listConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    
    listConfig.headerMode = section == 0 ? .none : .firstItemInSection // Using "first

    return NSCollectionLayoutSection.list(using: listConfig, layoutEnvironment: env)
}

如何将 UICollectionViewCompositionalLayout header 样式设置为与其 children 列表 .insetGrouped 布局分开？

How to style a UICollectionViewCompositionalLayout header to be separated from its children list .insetGrouped layout?

sidebar

uikit

ios

uicollectionviewcell

uicollectionviewcompositionallayout

邮件应用程序：

我最接近这个布局的是：