今更ながらEpoxy / Lateinit Epoxy

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