UICollectionView 顶部间距

Question

我的 Swift Xcode 项目中的 UICollectionView 有问题 我检查了所有插图和边距，我尝试了 ViewController 的：“调整滚动视图插图”和许多其他内容，但他们都没有以任何方式改变这一点。

我想减少/删除我的collectionView中第一行单元格上方的顶部间距

我创建了一个示例项目来寻找此问题的解决方案/修复，但还没有任何运气

使用通过故事板/界面构建器插入的集合视图时，这似乎是一个问题，因为如果我在代码端添加集合视图，则不会发生这种情况

这是我的视图控制器的代码：

import UIKit

struct CVData: Hashable {
    var name: String
    var value: String
}

class ViewController: UIViewController {
    
    @IBOutlet weak var myCollectionView: UICollectionView!
    var dataSource: UICollectionViewDiffableDataSource<Section, CVData>!
    var cvDataList: [CVData] = []
    enum Section {
        case main
    }
    var CVDataLabels: [String] = ["Label1:","Label2:","Label3:","Label4:","Label5:","Label6:","Label7:","Label8:"]
    var CVDataValues: [String] = []
    var snapshot: NSDiffableDataSourceSnapshot<Section, CVData>!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureCollectionView()
        buildData()
        // Do any additional setup after loading the view.
    }

    func configureCollectionView() {
        
        let layoutConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
        myCollectionView.collectionViewLayout = listLayout
        myCollectionView.isScrollEnabled = false
        let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, CVData> { (cell, indexPath, item) in

            var content = UIListContentConfiguration.cell()
            content.text = item.name
            content.textProperties.font.withSize(8.0)
            content.textProperties.font = UIFont.preferredFont(forTextStyle: .body)
            content.secondaryText = item.value
            content.prefersSideBySideTextAndSecondaryText = true
            content.textProperties.adjustsFontSizeToFitWidth = false
            cell.contentConfiguration = content
        }
        
        dataSource = UICollectionViewDiffableDataSource<Section, CVData>(collectionView: myCollectionView) {
            (collectionView: UICollectionView, indexPath: IndexPath, identifier: CVData) -> UICollectionViewCell? in
            
            // Dequeue reusable cell using cell registration (Reuse identifier no longer needed)
            let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration,
                                                                    for: indexPath,
                                                                    item: identifier)
            // Configure cell appearance
            cell.accessories = [.disclosureIndicator()]
            
            return cell
        
    }
    }


    func buildData() {
        
        let cvDataList = [
            CVData(name: self.CVDataLabels[0], value: "value1"),
            CVData(name: self.CVDataLabels[1], value: "value2"),
            CVData(name: self.CVDataLabels[2], value: "value3"),
            CVData(name: self.CVDataLabels[3], value: "value4"),
            CVData(name: self.CVDataLabels[4], value: "value5"),
            CVData(name: self.CVDataLabels[5], value: "value6"),
            CVData(name: self.CVDataLabels[6], value: "value6"), //added 20210510
            CVData(name: self.CVDataLabels[7], value: "value7")
        ]
        
        // Create a snapshot that define the current state of data source's data
        self.snapshot = NSDiffableDataSourceSnapshot<Section, CVData>()
        self.snapshot.appendSections([.main])
        self.snapshot.appendItems(cvDataList, toSection: .main)

        // Display data in the collection view by applying the snapshot to data source
        self.dataSource.apply(self.snapshot, animatingDifferences: false)
    }
}

这是 UICOllectionView 中的大小检查器设置

任何帮助将不胜感激👍

Answer 1

我没有与

UICollectionViewCompositionalLayout.list

合作过，所以这只是一些快速研究和实验的结果......

.headerMode

的默认

UICollectionLayoutListConfiguration

是

.none

...当使用

.insetGrouped

时会导致我们看到的“额外空间”。

奇怪的是，还有一个

headerTopPadding

属性，我们希望它能在这里有所帮助。它的默认值是

0

...但这似乎仅在存在 IS 标题视图时才适用。

因此，如果我们设置

.headerMode = .supplementary

并为标题返回一个空的

UICollectionReusableView

，我们就可以摆脱多余的空间：

现在，顶部空间与默认的左/右填充相同。

这是我用于标题视图的内容：

class EmptyHeaderView : UICollectionReusableView {
    static let reuseIdentifier:String = "emptyHeaderView"
}

并对您的

configureCollectionView()

功能进行三处编辑：

func configureCollectionView() {
    
    var layoutConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    
    // 1
    // we're going to supply an "empty" header supplementary view
    layoutConfig.headerMode = .supplementary
    
    let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
    
    myCollectionView.collectionViewLayout = listLayout
    myCollectionView.isScrollEnabled = false
    let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, CVData> { (cell, indexPath, item) in
        
        var content = UIListContentConfiguration.cell()
        content.text = item.name
        content.textProperties.font.withSize(8.0)
        content.textProperties.font = UIFont.preferredFont(forTextStyle: .body)
        content.secondaryText = item.value
        content.prefersSideBySideTextAndSecondaryText = true
        content.textProperties.adjustsFontSizeToFitWidth = false
        cell.contentConfiguration = content
    }
    
    dataSource = UICollectionViewDiffableDataSource<Section, CVData>(collectionView: myCollectionView) {
        (collectionView: UICollectionView, indexPath: IndexPath, identifier: CVData) -> UICollectionViewCell? in
        
        // Dequeue reusable cell using cell registration (Reuse identifier no longer needed)
        let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration,
                                                                for: indexPath,
                                                                item: identifier)
        // Configure cell appearance
        cell.accessories = [.disclosureIndicator()]
        
        return cell
        
    }
    
    // 2
    // register a reusable supplementary view for the header
    myCollectionView.register(EmptyHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: EmptyHeaderView.reuseIdentifier)

    // 3
    // provider for header suppleentary view
    dataSource.supplementaryViewProvider = { (collectionView: UICollectionView, kind: String, indexPath: IndexPath) -> UICollectionReusableView? in
        if kind == UICollectionView.elementKindSectionHeader {
            if let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: EmptyHeaderView.reuseIdentifier, for: indexPath) as? EmptyHeaderView {
                return headerView
            }
        }
        fatalError("Something's wrong with the setup...")
    }
}

Answer 2

仅供参考，您可以使用新的注册方法来注册

EmptyHeaderView

（在@DonMag的第2步）：

let headerRegistration = UICollectionView.SupplementaryRegistration<EmptyHeaderView>(elementKind: UICollectionView.elementKindSectionHeader) { _, _, _ in }

在这里我除了注册之外没有做任何其他事情。