今更ながらEpoxy / Lateinit Epoxy

30682a28206e455a1bc57d7d85cd1e14?s=47 Sho Masegi
November 06, 2018

今更ながらEpoxy / Lateinit Epoxy

今更ながらEpoxyを触ってみました。

30682a28206e455a1bc57d7d85cd1e14?s=128

Sho Masegi

November 06, 2018
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ