iOS13,14 CollectionView(1)Grid实现

前情提要

    iOS13对CollectionView进行了大的更新之后，一个CollectionView几乎可以应对开发中90%的UI需求。

    开发过程中，我们不再需要思考"怎么做"而是"需要什么"。比如有些CollectionView嵌套CollectionView或者TableView甚至ScrollView的问题，无论是UI，数据源，还是边界滑动问题都会让人头大，效率很低。

    本文依据WWDC2019/20关于CollectionView的session，与大家共同学习。

---

正文内容

示例代码:

https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views

1.GridViewController:

从最简单的入手来看CollectionView的基本使用:

一:把CollectionView添加到控制器上，就是代码中的configureHierarchy()方法；

二:写布局，也就是createLayout()方法;

下图是iOS13中CollectionView中的布局关系:

所以在createLayout中需要我们配置itemSize,groupSize,以及section;

private func createLayout() -> UICollectionViewLayout {

//fractionalWidth: dimension is computed as a fraction of the width of the containing group

//fractionalHeight: dimension is computed as a fraction of the height of the containing group

//absolute: dimension with an absolute point value

//estimated: dimension is estimated with a point value. Actual size will be determined when the content is rendered.

        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),

                                             heightDimension: .fractionalHeight(1.0))

        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),

                                              heightDimension: .fractionalWidth(0.2))

        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,

                                                         subitems: [item])

        let section = NSCollectionLayoutSection(group: group)

        let layout = UICollectionViewCompositionalLayout(section: section)

        return layout

    }

三:处理数据源,也就是configureDataSource()方法:

private func configureDataSource() {

//注册cell 系统默认给了3个cell,Text..,List..,Label..也可以自定义cell

        let cellRegistration =UICollectionView.CellRegistration<TextCell, Int> { (cell, indexPath, identifier)in

            // Populate the cell with our item description.

            cell.label.text="\(identifier)"

            cell.contentView.backgroundColor = .cornflowerBlue

            cell.layer.borderColor = UIColor.black.cgColor

            cell.layer.borderWidth=1

            cell.label.textAlignment= .center

            cell.label.font=UIFont.preferredFont(forTextStyle: .subheadline)

        }

        dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) {

            (collectionView:UICollectionView, indexPath:IndexPath, identifier:Int) ->UICollectionViewCell?in

            // Return the cell.

            return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)

        }

        // initial data

// snapshot

// Truth of UI state

// Unique identifiers for sections and items

// No more IndexPaths

// snapshot还有很多方法，足够处理UI变化的方方面面

        var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()

        snapshot.appendSections([.main])

        snapshot.appendItems(Array(0..<94))

// 更新，提交数据

        dataSource.apply(snapshot, animatingDifferences:false)

    }