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
KATA
mclloyd
30
14k
Fireside Chat
paigeccino
37
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Code Reviewing Like a Champion
maltzj
524
40k
The Cult of Friendly URLs
andyhume
79
6.5k
Navigating Team Friction
lara
187
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Being A Developer After 40
akosma
90
590k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Designing for humans not robots
tammielis
253
25k
Music & Morning Musume
bryan
46
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
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
ご静聴ありがとうございました😌