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
iOSクックパッドにおけるCompositional Layoutsの 活用事例とtips紹介
Search
Mutsumi Kakuta
October 04, 2021
0
240
iOSクックパッドにおけるCompositional Layoutsの 活用事例とtips紹介
https://cookpad.connpass.com/event/222056/
Mutsumi Kakuta
October 04, 2021
Tweet
Share
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GitHub's CSS Performance
jonrohan
1031
460k
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1k
Faster Mobile Websites
deanohume
308
31k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
iOSクックパッドにおける Compositional Layoutsの 活用事例とtips紹介 角田 睦美
自己紹介 • 角田 睦美 (Mutsumi Kakuta) • レシピ事業開発部 iOSエンジニア ◦
検索や有料会員向け機能を開発 • 登山と個人開発が趣味 ◦ → 登山イベントアプリを作っています
None
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
Compositional Layouts概要 • WWDC2019で発表 • セクション毎にレイアウトを個別に実装が可能で、複雑な レイアウトも比較的簡単に実現できる
Compositional Layouts概要
Compositional Layouts概要
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
スタンダードなレイアウト
リスト
リスト
リスト
リスト
グリッド
グリッド
グリッド
グリッド
やや複雑なレイアウト
ヘッダー+カルーセル
ヘッダー+カルーセル
ヘッダー+カルーセル
ヘッダー+カルーセル
ヘッダー+カルーセル
ヘッダー+カルーセル
page controlとカルーセルの組み合わせ
page controlとカルーセルの組み合わせ
page controlとカルーセルの組み合わせ
page controlとカルーセルの組み合わせ
page controlとカルーセルの組み合わせ
複数アイテムで構成されるレイアウト
複数アイテムで構成されるレイアウト
複数アイテムで構成されるレイアウト
複数アイテムで構成されるレイアウト
複数アイテムで構成されるレイアウト
サンプルコード ここまで紹介した実装は、以下のリポジトリに置いています。 https://github.com/muchan611/compositional-layouts-sample
セクションの分け方やデータの持ち方 Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつくれぽ詳細画面を実装する https://techlife.cookpad.com/entry/2020/12/24/130000
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
NSCollectionLayoutDimension .estimated の罠
NSCollectionLayoutDimension.estimatedとは
NSCollectionLayoutDimension.estimatedとは • itemやgroupのサイズに指定できる推定値 • 文字数によって高さを可変にしたり、文字サイズ変更の際に 適切な高さ・幅を適用してくれる便利な仕組み
カルーセルと組み合わせると動作が不安定に😓 • orthogonalScrollingBehavi or = .continuous 等と組み 合わせて利用すると、タップ 可能な領域がずれてしま い、押下できなくなることが
ある
カルーセルは 突き抜けて表示される
カルーセルは突き抜けて表示される • sectionにはcontentInsets設定できる が、カルーセルは突き抜けて表示され る • 両サイドに広くマージンをとっている場 合など(例えばiPadでのレイアウト等)に 意図しないレイアウトになることがある ので、デザイナーと擦り合わせが大事
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
良かった点 • 実装量が減り、開発効率が向上 ◦ 複雑なレイアウトを1枚のUICollectionViewで実現でき るようになったため、実装量が減った • 見通しが良い ◦ セクション毎にレイアウトを実装するので、直感的でわか
りやすい
今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点
• まとめ
まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
参考資料 • サンプルコード ◦ https://github.com/muchan611/compositional-layouts-sample • Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつく
れぽ詳細画面を実装する ◦ https://techlife.cookpad.com/entry/2020/12/24/130000
ご静聴ありがとうございました😌