【Swift】UICollectionViewでUITableViewのUIを表示する

はじめに
開発環境
実装
おわりに
参考

はじめに

iOS14で実装できるようになった、Lists in UICollectionViewを試してみました。

開発環境

macOS Catalina 10.15.7
Xcode 12.2
Swift 5.3.1

実装

Main.storyboardでUICollectionViewを追加。

Main.storyboard

f:id:hfoasi8fje3:20210305212234p:plain

UICollectionViewにレイアウトの制約を追加。

Main.storyboard

f:id:hfoasi8fje3:20210305212544p:plain

UICollectionViewをカスタムクラスに関連づける。

Main.storyboard

f:id:hfoasi8fje3:20210305212657p:plain

f:id:hfoasi8fje3:20210306230853p:plain

UICollectionViewのデリゲートを設定する。

Main.storyboard

f:id:hfoasi8fje3:20210305220044p:plain

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)
    }
}