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
180
iOSクックパッドにおけるCompositional Layoutsの 活用事例とtips紹介
https://cookpad.connpass.com/event/222056/
Mutsumi Kakuta
October 04, 2021
Tweet
Share
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
160
13k
Building Your Own Lightsaber
phodgson
97
5.6k
Being A Developer After 40
akosma
56
580k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Designing for Performance
lara
601
67k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Happy Clients
brianwarren
91
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
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
ご静聴ありがとうございました😌