はじめに
iOS14で実装できるようになった、Lists in UICollectionViewを試してみました。
開発環境
実装
Main.storyboardでUICollectionViewを追加。
Main.storyboard
UICollectionViewにレイアウトの制約を追加。
Main.storyboard
UICollectionViewをカスタムクラスに関連づける。
Main.storyboard
UICollectionViewのデリゲートを設定する。
Main.storyboard
ViewController.swiftで以下を実装
ViewController.swift
import UIKit class ViewController: UIViewController { @IBOutlet weak var collectionView: UICollectionView! // セルをUICollectionViewに提供するために使用するオブジェクト var dataSource: UICollectionViewDiffableDataSource<Section, String>! = nil // セクションの種類 enum Section { case main } // 表示するデータ let colorNames = ["red", "blue", "green", "yellow", "black", "white"] override func viewDidLoad() { super.viewDidLoad() configureLayout() configureDataSource() } private func configureLayout() { // リストのレイアウトの設定 let configuration = UICollectionLayoutListConfiguration(appearance: .plain) // すべてのセクションでconfigurationの設定を使用する let layout = UICollectionViewCompositionalLayout.list(using: configuration) collectionView.collectionViewLayout = layout } private func configureDataSource() { // セルを登録 let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, item) in var content = cell.defaultContentConfiguration() content.text = item cell.contentConfiguration = content } dataSource = UICollectionViewDiffableDataSource<Section, String>(collectionView: collectionView) { (collectionView: UICollectionView, indexPath: IndexPath, item: String) -> UICollectionViewCell? in // 再利用可能なセルを返す return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: item) } // UICollectionViewにデータを提供する構造体 var snapshot = NSDiffableDataSourceSnapshot<Section, String>() // セクションを追加 snapshot.appendSections([.main]) // 表示するデータを追加 snapshot.appendItems(colorNames) // snapshotを適用して、UIの変更を反映 dataSource.apply(snapshot, animatingDifferences: false) } }
ビルドするとUITableViewのUIが表現できていることを確認できる。
おわりに
iOS14からは、他にもUICollectionViewで複雑なUIを実現できるようなので、機会があればまた触ってみようと思います。
参考
-
https://developer.apple.com/documentation/uikit/uicollectionlayoutlistconfiguration
-
https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout
-
https://developer.apple.com/documentation/uikit/uicollectionview/cellregistration
-
https://developer.apple.com/documentation/uikit/uicollectionviewdiffabledatasource
-
https://developer.apple.com/documentation/uikit/uitableviewcell/3601058-defaultcontentconfiguration