今更ながらEpoxy / Lateinit Epoxy

Transcript

1. ࠓߋͳ͕ΒEpoxy ɹ Sho Masegi

2. ࣗݾ঺հ • όέπඃͬͯ·͢ɻ • େֶੜͰ͢ɻ • Androidɺ࣌ʑiOS • ࠷ۙ͸ iOS

   > Android @boc_sho

3. ࢖ͬͨ͜ͱ͋Δํ͍·͔͢ʁ

4. ਌ກձΛଓ͚͍ͯͩ͘͞

5. ࠓճ࿩͢͜ͱ • Epoxyͱ͸ʁ • Epoxyͷ؆୯ͳ࢖͍ํ

6. ࿩͞ͳ͍͜ͱ • Epoxyͷ࣮ફతͳ࢖͍ํ • ଞͷϥΠϒϥϦͱൺ΂ͯͲ͏͔

7. ͜ͷϨΠΞ΢τͲ͏΍ͬͯ૊Ή?

8. ͜ͷϨΠΞ΢τͲ͏΍ͬͯ૊Ή?

9. RecyclerView or ScrollView ?

10. ͪΐͬͱ໘౗ͦ͘͞͏…

11. ෳࡶͳϨΠΞ΢τΛ ؆୯ʹ૊Έ͍ͨʂ

12. ͦ͜Ͱ Epoxy !!

13. Epoxyͱ͸?

14. Epoxyͱ͸? • ෳࡶͳը໘ΛRecyclerViewͰ࡞ΔͨΊͷϥΠϒϥϦ • Airbnb͕࡞੒͍ͯ͠Δ • 2016/08/25 Initial public release

    • ࠓͰ΋݁ߏ׆ಈ͍ͯ͠Δ

15. Ͳ͏͍͏͜ͱ͕Ͱ͖Δͷʁ

16. Epoxyͱ͸? • ҧ͏ϨΠΞ΢τͷCellΛRecyclerViewͰ؆୯ʹදࣔ Ͱ͖Δ • ಈతʹCellΛೖΕସ͑ͨΓͰ͖Δ

17. Epoxyͱ͸? .kt .xml or Epoxy EpoxyModel ϨΠΞ΢τϑΝΠϧ͔ΒEpoxyModelΛ ࣗಈੜ੒

18. override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)

    description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } carouselHeaderView { id(“carousel header view”) onClick { _ -> callbacks.onSeeAllClick() } } carouselView { id(“carousel view”) EpoxyModel EpoxyModel EpoxyModel EpoxyRecyclerView Epoxyͱ͸?

19. ͜ͷϨΠΞ΢τΛEpoxyͰ૊Ήͱ….

20. override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)

    description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰ૊Ήͱ….

21. override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)

    description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰ૊Ήͱ….

22. override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)

    description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰ૊Ήͱ….

23. override fun buildModels(city: City) { // . . . .

    carouselHeaderView { id(“carousel header view”) onClick { _ -> callbacks.onSeeAllClick() } } carouselView { id(“carousel view”) homes(city.homes) onClick { _ -> callbacks.onHomeClick() } } footerView { . . . . } EpoxyͰ૊Ήͱ….

24. override fun buildModels(city: City) { // . . . .

    carouselHeaderView { id(“carousel header view”) onClick { _ -> callbacks.onSeeAllClick() } } carouselView { id(“carousel view”) homes(city.homes) onClick { _ -> callbacks.onHomeClick() } } footerView { . . . . } EpoxyͰ૊Ήͱ….

25. override fun buildModels(city: City) { // . . . .

    carouselHeaderView { id(“carousel header view”) onClick { _ -> callbacks.onSeeAllClick() } } carouselView { id(“carousel view”) homes(city.homes) onClick { _ -> callbacks.onHomeClick() } } footerView { . . . . } EpoxyͰ૊Ήͱ….

26. override fun buildModels(city: City) { // . . . .

    carouselHeaderView { id(“carousel header view”) onClick { _ -> callbacks.onSeeAllClick() } } carouselView { id(“carousel view”) homes(city.homes) onClick { _ -> callbacks.onHomeClick() } } footerView { . . . . } EpoxyͰ૊Ήͱ….

27. ؆୯ͦ͏͡ΌΜ

28. ಋೖͯ͠ΈΑ͏ʂ

29. 1. ४උ 2. EpoxyModel (CellView)Λ࡞੒ 3. Controller (Adapter)Λ࡞੒ 4. EpoxyRecyclerViewΛFragmentʹ௥Ճ͢Δ

    खॱ

30. 1. ४උ

31. apply plugin: ‘kotlin-kapt’ kapt { correctErrorTypes = true // .

    . . } build.gradle ͍ͭ΋ͷ

32. dependencies { // . . . implementation ‘com.airbnb.android:epoxy:2.x.y’ implementation ‘com.airbnb.android:epoxy-databinding:2.x.y’

    kapt ‘com.airbnb.android:epoxy-processor:2.x.y’ // . . . } build.gradle ͍ͭ΋ͷ

33. ͜Ε package-info.java ͍ͭ΋ͷ͡Όͳ͍΍ͭ

34. package-info.javaͱ͸ʁ • DataBindingΛ࢖ͬͯEpoxyModelΛ࡞Δͷʹඞཁ

35. • DataBindingΛ࢖ͬͯEpoxyModelΛ࡞Δͷʹඞཁ package-info.javaͱ͸ʁ override fun buildModels(city: City) { headerView {

    id(“header view”) cityName(city.name) description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } EpoxyModel EpoxyModel

36. • DataBindingΛ࢖ͬͯEpoxyModelΛ࡞Δͷʹඞཁ • ͲͷϨΠΞ΢τϑΝΠϧ͔ΒEpoxyModelΛ࡞Δ͔ɺ ͱ͍͏Indexͷ໾ׂ • ಛघͳJavaϑΝΠϧ package-info.javaͱ͸ʁ

37. package-info.javaͱ͸ʁ @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) @EpoxyDataBindingLayouts({R.layout.header_view, . .

    .}) package com.tutorial.epoxy; import com.airbnb.epoxy.EpoxyDataBindingPattern; import com.airbnb.epoxy.EpoxyDataBindingLayouts; package-info.java

38. package-info.javaͱ͸ʁ @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) @EpoxyDataBindingLayouts({R.layout.header_view, . .

    .}) package com.tutorial.epoxy; import com.airbnb.epoxy.EpoxyDataBindingPattern; import com.airbnb.epoxy.EpoxyDataBindingLayouts; package-info.java

39. @EpoxyDataBindingPattern (઀಄ޠ) @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) epoxy_layout_header.xml Epoxy

    HeaderBindingModel_.java

40. package-info.javaͱ͸ʁ @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) @EpoxyDataBindingLayouts({R.layout.header_view, . .

    .}) package com.tutorial.epoxy; import com.airbnb.epoxy.EpoxyDataBindingPattern; import com.airbnb.epoxy.EpoxyDataBindingLayouts; package-info.java

41. package-info.javaͱ͸ʁ @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) @EpoxyDataBindingLayouts({R.layout.header_view, . .

    .}) package com.tutorial.epoxy; import com.airbnb.epoxy.EpoxyDataBindingPattern; import com.airbnb.epoxy.EpoxyDataBindingLayouts; package-info.java

42. @EpoxyDataBindingLayouts @EpoxyDataBindingLayouts({R.layout.header_view, . . .}) header_view.xml HeaderViewBindingModel_.java Epoxy

43. ४උ׬ྃʂ

44. ̎. CellΛ࡞੒͢Δ

45. CellΛ࡞੒͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />

    </data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> </layout> epoxy_layout_header.xml

46. CellΛ࡞੒͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />

    </data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> epoxy_layout_header.xml override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . SampleController.kt

47. CellΛ࡞੒͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />

    </data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> epoxy_layout_header.xml override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . SampleController.kt

48. Build !

49. epoxy_layout_header.xml Epoxy HeaderBindingModel_.java HeaderBindingModel_.java͕ੜ੒ʂ

50. 3. ControllerΛ࡞੒͢Δ

51. class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //

    ͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller

52. class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //

    ͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller

53. class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //

    ͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller

54. class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //

    ͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller

55. class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //

    ͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller

56. ViewΛ࡞͍ͬͯ͘

57. Controller epoxy_layout_header.xml epoxy_layout_link_view.xml

58. Controller epoxy_layout_header.xml epoxy_layout_link_view.xml Build !!

59. Controller HeaderBindingModel_.java LinkViewBindingModel_.java

60. override fun buildModels(city: City) { header { id(“header view”) cityName(city.name)

    description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . Controller HeaderBindingModel_.java LinkViewBindingModel_.java SampleController.kt

61. Controller HeaderBindingModel_.java LinkViewBindingModel_.java SampleController.kt override fun buildModels(city: City) { header

    { id(“header view”) cityName(city.name) description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . .

62. Controller HeaderBindingModel_.java LinkViewBindingModel_.java SampleController.kt override fun buildModels(city: City) { header

    { id(“header view”) cityName(city.name) description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . .

63. 4. EpoxyRecyclerViewΛ௥Ճʂ

64. Fragment <?xml version=“1.0” encoding=“utf-8”?> <layout> <FrameLayout . . .> <com.airbnb.epoxy.EpoxyRecyclerView

    . . . /> </FrameLayout> </layout> sample_fragment.xml

65. Fragment <?xml version=“1.0” encoding=“utf-8”?> <layout> <FrameLayout . . .> <com.airbnb.epoxy.EpoxyRecyclerView

    . . . /> </FrameLayout> </layout> sample_fragment.xml

66. Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()

    var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }

67. Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()

    var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }

68. Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()

    var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }

69. ׬੒ʂ

70. https://github.com/ShoMasegi/TutorialEpoxy ࠓճ࡞੒ͨ͠΋ͷ

71. ؆୯ʹ࡞੒͢Δ͜ͱ͕Ͱ͖·ͨ͠ɻ ޻෉࣍ୈͰڽͬͨ΋ͷ͕ൺֱతָʹ࣮૷Ͱ͖ͦ͏ɻ ײ૝

72. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ