Zenn
Closed8

モダンなCollectionViewを深掘る

iOS
蔀蔀

スクラップでメモ書きにして、最終的に記事にする

蔀蔀

とりあえず今はこういうレイアウトがつくりたい

蔀蔀

レイアウトの出しわけはこんな感じでやっていた
（DistinctSectionsViewController を見ている）
基本セクション番号を基準に処理する思想っぽいな

    enum SectionLayoutKind: Int, CaseIterable {
        case list, grid5, grid3
        var columnCount: Int {
            switch self {
            case .grid3:
                return 3

            case .grid5:
                return 5

            case .list:
                return 1
            }
        }
    }

guard let sectionLayoutKind = SectionLayoutKind(rawValue: sectionIndex) else { return nil }
            let columns = sectionLayoutKind.columnCount

            // …

            let groupHeight = columns == 1 ?
                NSCollectionLayoutDimension.absolute(44) :
                NSCollectionLayoutDimension.fractionalWidth(0.2)
            // …
            return section
蔀蔀

データの追加がこう

// initial data
        let itemsPerSection = 10
        var snapshot = NSDiffableDataSourceSnapshot<SectionLayoutKind, Int>()
        SectionLayoutKind.allCases.forEach {
            snapshot.appendSections([$0])
            let itemOffset = $0.rawValue * itemsPerSection
            let itemUpperbound = itemOffset + itemsPerSection
            snapshot.appendItems(Array(itemOffset..<itemUpperbound))
        }
        dataSource.apply(snapshot, animatingDifferences: false)

そしたらこう

割とわかりやすいかも

蔀蔀

今回やりたいことは、APIからgroupAで[1, 2, 3, …]、groupBで[1, 2, 3, …]みたいなデータを受け取って、
それをgroupA/groupBをセクションのタイトルとして表示したい、というもの。
groupはいくつくるか不定なので、EnumでSection切るのが厳しいのに気づいた

このスクラップは2022/05/28にクローズされました