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
Unsuck your backbone
ammeep
671
58k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Why Our Code Smells
bkeepers
PRO
336
57k
A Tale of Four Properties
chriscoyier
160
23k
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
ご静聴ありがとうございました😌