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/
UICollectionViewCompositional Layout 振り返り宇佐見公輔 / 株式会社ゆめみ2023-03-07UICollectionView Compositional Layout 振り返り 1
View Slide
自己紹介宇佐見公輔(うさみこうすけ)株式会社ゆめみ / iOSテックリード大阪在住UICollectionView Compositional Layout 振り返り 2
UICollectionViewiOS 6 で登場したiOS 13 / 14 で大きく進化したDiffable Data SourceCompositional LayoutUICollectionView Compositional Layout 振り返り 3
API構成DataLayoutPresentationUICollectionView Compositional 4
LayoutLayout クラス(抽象クラス)UICollectionViewLayoutFlow Layout : iOS 6〜UICollectionViewFlowLayoutCompositional Layout : iOS 13〜UICollectionViewCompositionalLayoutUICollectionView Compositional Layout 振り返り 5
Compositional Layout でできることUICollectionView Compositional Layout 振り返り 6
CompositionalLayout の構成LayoutSectionGroupItemUICollectionView Compositional Layout 振り返り 7
Layoutひとつのセクションにひとつの Section が対応するlet layout = UICollectionViewCompositionalLayout {(sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? inlet section = NSCollectionLayoutSection(...)return section}※ 全部同じ Section の場合は簡単なinitもあるlet layout = UICollectionViewCompositionalLayout(section: section)UICollectionView Compositional Layout 振り返り 8
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
Groupひとつまたは複数個の Item を持つlet group = NSCollectionLayoutGroup.vertical(layoutSize: ..., subitems: items)let group = NSCollectionLayoutGroup.horizontal(layoutSize: ..., subitems: items)UICollectionView Compositional Layout 振り返り 10
Itemひとつのデータに対応するlet item = NSCollectionLayoutItem(layoutSize: ...)UICollectionView Compositional Layout 振り返り 11
それぞれの関係まとめLayout はセクションごとに Section を持つSection はひとつの Group を持つ(Group のネスト可能)Group はひとつまたは複数個の Item を持つItem はひとつのデータに対応するUICollectionView Compositional Layout 振り返り 12
Section / Group「いくつかのものを並べる」のはどちらも同じどんなかたまりを Section にしたらいいのか?どんなかたまりを Group にしたらいいのか?UICollectionView Compositional Layout 振り返り 13
Section と Group の違いSectionSection 単位で設定する機能があるネストできないGroupGroup 単位の機能はなく、レイアウト定義用のものネストできるUICollectionView Compositional Layout 振り返り 14
Section の機能 (1)Sticky HeaderpinToVisibleBoundsセクションが変わると Pinned になっていたヘッダーが消えてしまうそのため、セクションの範囲を考慮する必要があるUICollectionView Compositional Layout 振り返り 15
Section の機能 (2)横スクロールorthogonalScrollingBehaviorこれはセクションのプロパティ横スクロールしたい部分だけでセクションにする必要があるUICollectionView Compositional Layout 振り返り 16
Section の範囲を考えるSection はネストできないそのため、セクションわけは実現したい機能に応じて決める必要があるUICollectionView Compositional Layout 振り返り 17
ふたつの機能が両立しないケースSticky Header を右のような単位でつけたいとするすると、上部分の横スクロールをorthogonalScrollingBehaviorでは実現できなくなるUICollectionView Compositional Layout 振り返り 18
まとめSection と Group はグルーピングの構造だが、役割が違うセクション単位で UI の機能を意識する必要がある感想・ツッコミ・指摘・アドバイスなど歓迎します。Sticky Header と横スクロールを両立する方法が知りたいCollectionView in CollectionView か?UICollectionView Compositional Layout 振り返り 19