将徽章（补充视图）添加到 UICollectionLayoutListConfiguration

Question

有什么方法可以将徽章NSCollectionLayoutSupplementaryItem) 添加到UICollectionLayoutListConfiguration？

我正在尝试使用Modern Collection Views 实现侧边栏：

var configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
...

let section = NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)

但我找不到如何实现badge 配置：

let badgeAnchor = NSCollectionLayoutAnchor(edges: [.top, .trailing], fractionalOffset: CGPoint(x: 0.3, y: -0.3))
let badgeSize = NSCollectionLayoutSize(widthDimension: .absolute(20),
                                                  heightDimension: .absolute(20))
let badge = NSCollectionLayoutSupplementaryItem(
                layoutSize: badgeSize,
                elementKind: "badge",
                containerAnchor: badgeAnchor)

就像 Apple 提供的示例代码：

let item = NSCollectionLayoutItem(layoutSize: itemSize, supplementaryItems: [badge])

（Apple提供的示例代码，顺便说一句）

关于如何将徽章实施到UICollectionLayoutListConfiguration 的任何想法或不可能？

Answer 1

我发现添加一个基本的徽章附件视图比较简单，而不是使用补充视图。

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, ContentItem> {[weak self] (cell, indexPath, contentItem) in

    // Set item data in cell
    var config = cell.defaultContentConfiguration()
    config.image = contentItem.image
    config.text = contentItem.name
    cell.contentConfiguration = config

    // Add an unread count badge if there are unread items.
    if contentItem.unreadCount != 0 {
        let badgeLabel = UILabel()
        badgeLabel.backgroundColor = .red
        badgeLabel.textColor = .white
        badgeLabel.layer.cornerRadius = 10
        badgeLabel.clipsToBounds = true
        badgeLabel.text = "  \(contentItem.unreadCount)  "
        let viewConfig = UICellAccessory.CustomViewConfiguration(customView: badgeLabel, placement: .trailing(displayed: .always))
        let badgeAccessory = UICellAccessory.customView(configuration: viewConfig)
        cell.accessories = [badgeAccessory]
    }
}

Answer 2

在示例项目中，badge 的元素类型错误。原来是

let badge = NSCollectionLayoutSupplementaryItem(
            layoutSize: badgeSize,
            elementKind: ItemBadgeSupplementaryViewController.badgeElementKind,
            containerAnchor: badgeAnchor)

而且错误信息实际上是有道理的：

"the view returned from -collectionView:viewForSupplementaryElementOfKind:atIndexPath: does not match the element kind it is being used for. When asked for a view of element kind 'badge-element-kind' the data source dequeued a view registered for the element kind 'badge-reuse-identifier'."

只需将徽章的elementKind（ItemBadgeSupplementaryViewController）更改为

elementKind: BadgeSupplementaryView.reuseIdentifier

为了回答您的问题，徽章将作为您的NSCollectionLayoutItem 的补充项目。