Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSクックパッドにおけるCompositional Layoutsの 活用事例とtips紹介

2a78dcdf4fe3666b2135eddced81095c?s=47 Mutsumi Kakuta
October 04, 2021
120

iOSクックパッドにおけるCompositional Layoutsの 活用事例とtips紹介

2a78dcdf4fe3666b2135eddced81095c?s=128

Mutsumi Kakuta

October 04, 2021
Tweet

Transcript

  1. iOSクックパッドにおける Compositional Layoutsの 活用事例とtips紹介 角田 睦美

  2. 自己紹介 • 角田 睦美 (Mutsumi Kakuta) • レシピ事業開発部 iOSエンジニア ◦

    検索や有料会員向け機能を開発 • 登山と個人開発が趣味 ◦ → 登山イベントアプリを作っています
  3. None
  4. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  5. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  6. Compositional Layouts概要 • WWDC2019で発表 • セクション毎にレイアウトを個別に実装が可能で、複雑な レイアウトも比較的簡単に実現できる

  7. Compositional Layouts概要

  8. Compositional Layouts概要

  9. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  10. スタンダードなレイアウト

  11. リスト

  12. リスト

  13. リスト

  14. リスト

  15. グリッド

  16. グリッド

  17. グリッド

  18. グリッド

  19. やや複雑なレイアウト

  20. ヘッダー+カルーセル

  21. ヘッダー+カルーセル

  22. ヘッダー+カルーセル

  23. ヘッダー+カルーセル

  24. ヘッダー+カルーセル

  25. ヘッダー+カルーセル

  26. page controlとカルーセルの組み合わせ

  27. page controlとカルーセルの組み合わせ

  28. page controlとカルーセルの組み合わせ

  29. page controlとカルーセルの組み合わせ

  30. page controlとカルーセルの組み合わせ

  31. 複数アイテムで構成されるレイアウト

  32. 複数アイテムで構成されるレイアウト

  33. 複数アイテムで構成されるレイアウト

  34. 複数アイテムで構成されるレイアウト

  35. 複数アイテムで構成されるレイアウト

  36. サンプルコード ここまで紹介した実装は、以下のリポジトリに置いています。 https://github.com/muchan611/compositional-layouts-sample

  37. セクションの分け方やデータの持ち方 Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつくれぽ詳細画面を実装する https://techlife.cookpad.com/entry/2020/12/24/130000

  38. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  39. NSCollectionLayoutDimension .estimated の罠

  40. NSCollectionLayoutDimension.estimatedとは

  41. NSCollectionLayoutDimension.estimatedとは • itemやgroupのサイズに指定できる推定値 • 文字数によって高さを可変にしたり、文字サイズ変更の際に 適切な高さ・幅を適用してくれる便利な仕組み

  42. カルーセルと組み合わせると動作が不安定に😓 • orthogonalScrollingBehavi or = .continuous 等と組み 合わせて利用すると、タップ 可能な領域がずれてしま い、押下できなくなることが

    ある
  43. カルーセルは 突き抜けて表示される

  44. カルーセルは突き抜けて表示される • sectionにはcontentInsets設定できる が、カルーセルは突き抜けて表示され る • 両サイドに広くマージンをとっている場 合など(例えばiPadでのレイアウト等)に 意図しないレイアウトになることがある ので、デザイナーと擦り合わせが大事

  45. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  46. 良かった点 • 実装量が減り、開発効率が向上 ◦ 複雑なレイアウトを1枚のUICollectionViewで実現でき るようになったため、実装量が減った • 見通しが良い ◦ セクション毎にレイアウトを実装するので、直感的でわか

    りやすい
  47. 今日お話すること • Compositional Layouts概要 • クックパッドのiOSアプリにおける活用 • 気をつけたいポイント • 良かった点

    • まとめ
  48. まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ

    ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
  49. まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ

    ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
  50. まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ

    ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
  51. まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ

    ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
  52. まとめ • Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な レイアウトも比較的簡単に実装ができる • クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している • NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ

    ルーセルが突き抜けて表示される点には要注意 • Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現 する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、 コードの見通しも良くなる
  53. 参考資料 • サンプルコード ◦ https://github.com/muchan611/compositional-layouts-sample • Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつく

    れぽ詳細画面を実装する ◦ https://techlife.cookpad.com/entry/2020/12/24/130000
  54. ご静聴ありがとうございました😌