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

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. ご静聴ありがとうございました😌