Tweet
Tweet

Slide 1

Slide 1 text

UICollectionView Compositional Layout 振り返り 宇佐見公輔 / 株式会社ゆめみ 2023-03-07 UICollectionView Compositional Layout 振り返り 1

Slide 2

Slide 2 text

自己紹介 宇佐見公輔（うさみこうすけ） 株式会社ゆめみ / iOSテックリード 大阪在住 UICollectionView Compositional Layout 振り返り 2

Slide 3

Slide 3 text

UICollectionView iOS 6 で登場した iOS 13 / 14 で大きく進化した Diffable Data Source Compositional Layout UICollectionView Compositional Layout 振り返り 3

Slide 4

Slide 4 text

API構成 Data Layout Presentation UICollectionView Compositional 4

Slide 5

Slide 5 text

Layout Layout クラス（抽象クラス） UICollectionViewLayout Flow Layout : iOS 6〜 UICollectionViewFlowLayout Compositional Layout : iOS 13〜 UICollectionViewCompositionalLayout UICollectionView Compositional Layout 振り返り 5

Slide 6

Slide 6 text

Compositional Layout でできること UICollectionView Compositional Layout 振り返り 6

Slide 7

Slide 7 text

Compositional Layout の構成 Layout Section Group Item UICollectionView Compositional Layout 振り返り 7

Slide 8

Slide 8 text

Layout ひとつのセクションにひとつの Section が対応する let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in let section = NSCollectionLayoutSection(...) return section } ※ 全部同じ Section の場合は簡単な init もある let layout = UICollectionViewCompositionalLayout(section: section) UICollectionView Compositional Layout 振り返り 8

Slide 9

Slide 9 text

Section ひとつの Group を持つ let section = NSCollectionLayoutSection(group: group) ただし、Group はネストできる let subgroups: [NSCollectionLayoutGroup] = ... let group = NSCollectionLayoutGroup.vertical( layoutSize: ..., subitems: subgroups ) let section = NSCollectionLayoutSection(group: group) UICollectionView Compositional Layout 振り返り 9

Slide 10

Slide 10 text

Group ひとつまたは複数個の Item を持つ let group = NSCollectionLayoutGroup.vertical( layoutSize: ..., subitems: items ) let group = NSCollectionLayoutGroup.horizontal( layoutSize: ..., subitems: items ) UICollectionView Compositional Layout 振り返り 10

Slide 11

Slide 11 text

Item ひとつのデータに対応する let item = NSCollectionLayoutItem(layoutSize: ...) UICollectionView Compositional Layout 振り返り 11

Slide 12

Slide 12 text

それぞれの関係まとめ Layout はセクションごとに Section を持つ Section はひとつの Group を持つ（Group のネスト可能） Group はひとつまたは複数個の Item を持つ Item はひとつのデータに対応する UICollectionView Compositional Layout 振り返り 12

Slide 13

Slide 13 text

Section / Group 「いくつかのものを並べる」 のはどちらも同じ どんなかたまりを Section に したらいいのか？ どんなかたまりを Group に したらいいのか？ UICollectionView Compositional Layout 振り返り 13

Slide 14

Slide 14 text

Section と Group の違い Section Section 単位で設定する機能がある ネストできない Group Group 単位の機能はなく、レイアウト定義用のもの ネストできる UICollectionView Compositional Layout 振り返り 14

Slide 15

Slide 15 text

Section の機能 (1) Sticky Header pinToVisibleBounds セクションが変わると Pinned にな っていたヘッダーが消えてしまう そのため、セクションの範囲を考慮 する必要がある UICollectionView Compositional Layout 振り返り 15

Slide 16

Slide 16 text

Section の機能 (2) 横スクロール orthogonalScrollingBehavior これはセクションのプロパティ 横スクロールしたい部分だけでセク ションにする必要がある UICollectionView Compositional Layout 振り返り 16

Slide 17

Slide 17 text

Section の範囲を考える Section はネストできない そのため、セクションわけは実現したい機能に応じて決める必要が ある UICollectionView Compositional Layout 振り返り 17

Slide 18

Slide 18 text

ふたつの機能が両立 しないケース Sticky Header を右のような単位で つけたいとする すると、上部分の横スクロールを orthogonalScrollingBehavior では 実現できなくなる UICollectionView Compositional Layout 振り返り 18

Slide 19

Slide 19 text

まとめ Section と Group はグルーピングの構造だが、役割が違う セクション単位で UI の機能を意識する必要がある 感想・ツッコミ・指摘・アドバイスなど歓迎します。 Sticky Header と横スクロールを両立する方法が知りたい CollectionView in CollectionView か？ UICollectionView Compositional Layout 振り返り 19