使用 .list 类型的 UICollectionViewCompositionalLayout 时如何向 UICollectionView 的 contentView 添加边缘插入

Question

我有以下问题： 我想将水平插入添加到 collectionView 的 contentView，但是当我将

contentInset

设置为

UIEdgeInsets(top: .zero, left: 64, bottom: .zero, right: 64)

时，它会滚动 contentView 而不是减少其宽度。

我正在使用

UICollectionViewCompositionalLayout

类型的

.list

。 当使用使用自定义

UICollectionViewCompositionalLayout

的

NSCollectionLayoutSection

时，我可以设置边缘插图（我将插图应用于该部分的组），但是当使用 Apple 的默认列表设计时，我似乎无法这样做。

如何添加边缘插入并减小 contentView 的宽度？

这里是我正在合作的

viewController

：

import SwiftUI
import UIKit

final class AppearancePlainViewController: UIViewController {

    struct Contact: Identifiable, Hashable {
        let id: UUID = UUID()
        let name: String = "Arthur"
        let surname: String = "Dent"
        let image: UIImage = UIImage(systemName: "person")!
    }
    
    private enum ListSection: Int {
        case main
    }
    
    private enum ListRow: Hashable {
        enum ListContentConfiguration: Hashable {
            case cell
        }
        
        case example(ListContentConfiguration, Contact)
        case description(String)
    }
    
    private typealias Section = ListSection
    private typealias Row = ListRow
    private typealias DataSource = UICollectionViewDiffableDataSource<Section, Row>
    private typealias Snapshot = NSDiffableDataSourceSnapshot<Section, Row>
    
    private let rows: [ListRow] = [
        .example(.cell, Contact()),
        .description(".cell"),
        .example(.cell, Contact()),
        .description(".cell1"),
        .example(.cell, Contact()),
        .description(".cell2"),
        .example(.cell, Contact()),
        .description(".cell3"),
        .example(.cell, Contact()),
        .description(".cell4"),
        .example(.cell, Contact()),
        .description(".cell5"),
        .example(.cell, Contact()),
        .description(".cell6"),
        .example(.cell, Contact()),
        .description(".cell7"),
        .example(.cell, Contact()),
        .description(".cell8"),
    ]
    
    private weak var collectionView: UICollectionView!
    private var datasource: DataSource!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Appearance.plain"
        view.backgroundColor = .orange
        configureViewHierarchy()
        configureDataSource()
        loadData()
        
        collectionView.isEditing = true
    }

    private func configureViewHierarchy() {
        let layout = createLayout()
        
        let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.delegate = self
        collectionView.contentInset = UIEdgeInsets(top: .zero, left: 64, bottom: .zero, right: 64)
        view.addSubview(collectionView)
        self.collectionView = collectionView
        
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        ])
    }
    
    private func createLayout() -> UICollectionViewLayout {
        var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        let layout = UICollectionViewCompositionalLayout.list(using: configuration)
        return layout
    }
    
    private func configureDataSource() {
        let descriptionRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { cell, _, item in
            cell.contentConfiguration = UIHostingConfiguration {
                ZStack {
                    Text(item)
                        .font(.caption2)
                        .padding(.horizontal, 2.0)
                }
                .foregroundColor(Color(UIColor.systemBackground))
                .background(Color(UIColor.label))
                .cornerRadius(2.0)
                .padding(.bottom, 2.0)
            }
            var backgroundConfig = UIBackgroundConfiguration.listPlainCell()
            backgroundConfig.backgroundColor = .blue
            cell.backgroundConfiguration = backgroundConfig
        }
        
        let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Contact> { cell, _, item in
            var configuration = UIListContentConfiguration.cell()
            configuration.text = item.name
            configuration.secondaryText = item.surname
            configuration.image = item.image
            cell.contentConfiguration = configuration
            cell.backgroundConfiguration = .listPlainCell()
        }
        
        datasource = DataSource(collectionView: collectionView) { collectionView, indexPath, identifier -> UICollectionViewCell in
            
            switch identifier {
            case .example(let configType, let contact):
                switch configType {
                case .cell:
                    return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: contact)
                }
            case .description(let string):
                return collectionView.dequeueConfiguredReusableCell(using: descriptionRegistration, for: indexPath, item: string)
            }
        }
    }
    
    private func loadData() {
        var snapshot = Snapshot()
        snapshot.appendSections([.main])
        snapshot.appendItems(rows, toSection: .main)
        datasource.applySnapshotUsingReloadData(snapshot)
    }
}

extension AppearancePlainViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, canEditItemAt indexPath: IndexPath) -> Bool {
        return true
    }
    
    func collectionView(_ collectionView: UICollectionView, targetIndexPathForMoveFromItemAt currentIndexPath: IndexPath, toProposedIndexPath proposedIndexPath: IndexPath) -> IndexPath {
        return proposedIndexPath
    }
}

Answer 1

我认为组合布局 API 根本不关心

UICollectionView.contentInsets

。

您可以使用自己的自定义

NSCollectionLayoutSection

创建

contentInsets

：

private func createLayout() -> UICollectionViewLayout {
    UICollectionViewCompositionalLayout { _, env in
        let section = NSCollectionLayoutSection.list(using: .init(appearance: .insetGrouped), layoutEnvironment: env)
        section.contentInsets = .init(top: 0, leading: 64, bottom: 0, trailing: 64)
        return section
    }
}