Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UICollectionView Compositional Layout
Search
USAMI Kosuke
March 07, 2023
Programming
0
780
UICollectionView Compositional Layout
※ Docswell に移行しました
https://www.docswell.com/s/usami-k/Z3894J-uicollectionview-compositional-layout
USAMI Kosuke
March 07, 2023
Tweet
Share
More Decks by USAMI Kosuke
See All by USAMI Kosuke
Onsager代数とその周辺 / Onsager algebra tsudoi
usamik26
0
620
Apple HIG 正式名称クイズ結果発表 / HIG Quiz Result
usamik26
0
170
ゆめみ大技林製作委員会の立ち上げの話 / daigirin project
usamik26
0
320
@ViewLoadingプロパティラッパの紹介と自前で実装する方法 / @ViewLoading property wrapper implementation
usamik26
0
480
これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView
usamik26
1
740
Xcodeとの最近の付き合い方のはなし / Approach To Xcode
usamik26
2
670
Coding Swift with Visual Studio Code and Docker
usamik26
0
510
Swift Extension for Visual Studio Code
usamik26
2
1k
ソリトンとリー代数 / soliton history
usamik26
0
900
Other Decks in Programming
See All in Programming
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
700
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
事業KPIを基に価値の解像度を上げる
nealle
0
200
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
120
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
人には人それぞれのサービス層がある
shimabox
3
450
メモリリークが発生した時にpprofを使用して原因特定した話
zono33lhd
0
100
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
570
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
がんばりすぎないコーディングルール運用術
tsukakei
1
180
Duke on CRaC with Jakarta EE
ivargrimstad
1
700
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.8k
4 Signs Your Business is Dying
shpigford
183
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
77
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Embracing the Ebb and Flow
colly
85
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
A designer walks into a library…
pauljervisheath
205
24k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Designing for Performance
lara
608
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Transcript
UICollectionView Compositional Layout 振り返り 宇佐見公輔 / 株式会社ゆめみ 2023-03-07 UICollectionView Compositional
Layout 振り返り 1
自己紹介 宇佐見公輔(うさみこうすけ) 株式会社ゆめみ / iOSテックリード 大阪在住 UICollectionView Compositional Layout 振り返り
2
UICollectionView iOS 6 で登場した iOS 13 / 14 で大きく進化した Diffable
Data Source Compositional Layout UICollectionView Compositional Layout 振り返り 3
API構成 Data Layout Presentation UICollectionView Compositional 4
Layout Layout クラス(抽象クラス) UICollectionViewLayout Flow Layout : iOS 6〜 UICollectionViewFlowLayout
Compositional Layout : iOS 13〜 UICollectionViewCompositionalLayout UICollectionView Compositional Layout 振り返り 5
Compositional Layout でできること UICollectionView Compositional Layout 振り返り 6
Compositional Layout の構成 Layout Section Group Item UICollectionView Compositional Layout
振り返り 7
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
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 の違い Section Section 単位で設定する機能がある ネストできない Group Group
単位の機能はなく、レイアウト定義用のもの ネストできる UICollectionView Compositional Layout 振り返り 14
Section の機能 (1) Sticky Header pinToVisibleBounds セクションが変わると 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