UICollectionView Compositional Layout

YUMEMI.grow Mobile #1 - YouTube
https://www.youtube.com/watch?v=d13hyThK2vc&t=3911s

YUMEMI.grow Mobile #1 - connpass
https://yumemi.connpass.com/event/272491/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. API構成
   Data
   Layout
   Presentation
   UICollectionView Compositional 4
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide