Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UICollectionView Compositional Layout

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/

USAMI Kosuke

March 07, 2023
Tweet

More Decks by USAMI Kosuke

Other Decks in Programming

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