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

今更ながらEpoxy / Lateinit Epoxy

Sho Masegi
November 06, 2018

今更ながらEpoxy / Lateinit Epoxy

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

Sho Masegi

November 06, 2018
Tweet

More Decks by Sho Masegi

Other Decks in Technology

Transcript

  1. ࠓߋͳ͕ΒEpoxy
    ɹ
    Sho Masegi

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. RecyclerView or ScrollView ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ͦ͜Ͱ Epoxy !!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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ͱ͸?

    View full-size slide

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

    View full-size slide

  19. override fun buildModels(city: City) {
    headerView {
    id(“header view”)
    cityName(city.name)
    description(city.description)
    }
    linkView {
    id(“link view”)
    onClick { _ ->
    callbacks.onLinkClick() }
    }
    // . . . .
    EpoxyͰ૊Ήͱ….

    View full-size slide

  20. override fun buildModels(city: City) {
    headerView {
    id(“header view”)
    cityName(city.name)
    description(city.description)
    }
    linkView {
    id(“link view”)
    onClick { _ ->
    callbacks.onLinkClick() }
    }
    // . . . .
    EpoxyͰ૊Ήͱ….

    View full-size slide

  21. override fun buildModels(city: City) {
    headerView {
    id(“header view”)
    cityName(city.name)
    description(city.description)
    }
    linkView {
    id(“link view”)
    onClick { _ ->
    callbacks.onLinkClick() }
    }
    // . . . .
    EpoxyͰ૊Ήͱ….

    View full-size slide

  22. 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Ͱ૊Ήͱ….

    View full-size slide

  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Ͱ૊Ήͱ….

    View full-size slide

  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Ͱ૊Ήͱ….

    View full-size slide

  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Ͱ૊Ήͱ….

    View full-size slide

  26. ؆୯ͦ͏͡ΌΜ

    View full-size slide

  27. ಋೖͯ͠ΈΑ͏ʂ

    View full-size slide

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

    View full-size slide

  29. apply plugin: ‘kotlin-kapt’
    kapt {
    correctErrorTypes = true
    // . . .
    }
    build.gradle
    ͍ͭ΋ͷ

    View full-size slide

  30. 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
    ͍ͭ΋ͷ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. • 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

    View full-size slide

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

    View full-size slide

  35. 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

    View full-size slide

  36. 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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  39. 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

    View full-size slide

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

    View full-size slide

  41. ४උ׬ྃʂ

    View full-size slide

  42. ̎. CellΛ࡞੒͢Δ

    View full-size slide

  43. CellΛ࡞੒͢Δ



    name=“cityName”
    type=“String” />


    . . .
    android:text=“@{cityName}” />


    epoxy_layout_header.xml

    View full-size slide

  44. CellΛ࡞੒͢Δ



    name=“cityName”
    type=“String” />


    . . .
    android:text=“@{cityName}” />

    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

    View full-size slide

  45. CellΛ࡞੒͢Δ



    name=“cityName”
    type=“String” />


    . . .
    android:text=“@{cityName}” />

    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

    View full-size slide

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

    View full-size slide

  47. 3. ControllerΛ࡞੒͢Δ

    View full-size slide

  48. class SampleController: TypedEpoxyController() {
    override fun buildModels(city: City?) {
    // ͜͜ͰViewΛ࡞Δ
    . . . .
    }
    }
    SampleController.kt
    Controller

    View full-size slide

  49. class SampleController: TypedEpoxyController() {
    override fun buildModels(city: City?) {
    // ͜͜ͰViewΛ࡞Δ
    . . . .
    }
    }
    SampleController.kt
    Controller

    View full-size slide

  50. class SampleController: TypedEpoxyController() {
    override fun buildModels(city: City?) {
    // ͜͜ͰViewΛ࡞Δ
    . . . .
    }
    }
    SampleController.kt
    Controller

    View full-size slide

  51. class SampleController: TypedEpoxyController() {
    override fun buildModels(city: City?) {
    // ͜͜ͰViewΛ࡞Δ
    . . . .
    }
    }
    SampleController.kt
    Controller

    View full-size slide

  52. class SampleController: TypedEpoxyController() {
    override fun buildModels(city: City?) {
    // ͜͜ͰViewΛ࡞Δ
    . . . .
    }
    }
    SampleController.kt
    Controller

    View full-size slide

  53. ViewΛ࡞͍ͬͯ͘

    View full-size slide

  54. Controller
    epoxy_layout_header.xml
    epoxy_layout_link_view.xml

    View full-size slide

  55. Controller
    epoxy_layout_header.xml
    epoxy_layout_link_view.xml
    Build !!

    View full-size slide

  56. Controller
    HeaderBindingModel_.java
    LinkViewBindingModel_.java

    View full-size slide

  57. 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

    View full-size slide

  58. 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() }
    }
    // . . . .

    View full-size slide

  59. 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() }
    }
    // . . . .

    View full-size slide

  60. 4. EpoxyRecyclerViewΛ௥Ճʂ

    View full-size slide

  61. Fragment



    . . . />


    sample_fragment.xml

    View full-size slide

  62. Fragment



    . . . />


    sample_fragment.xml

    View full-size slide

  63. Fragment
    SampleFragment.kt
    class SampleFragment: Fragment() {
    val controller = SampleController()
    var city = City(~)
    override fun onCreateView(~): View {
    . . .
    binding.epoxyRecyclerView.setController(controller)
    controller.setData(city)
    . . .
    }
    . . .
    }

    View full-size slide

  64. Fragment
    SampleFragment.kt
    class SampleFragment: Fragment() {
    val controller = SampleController()
    var city = City(~)
    override fun onCreateView(~): View {
    . . .
    binding.epoxyRecyclerView.setController(controller)
    controller.setData(city)
    . . .
    }
    . . .
    }

    View full-size slide

  65. Fragment
    SampleFragment.kt
    class SampleFragment: Fragment() {
    val controller = SampleController()
    var city = City(~)
    override fun onCreateView(~): View {
    . . .
    binding.epoxyRecyclerView.setController(controller)
    controller.setData(city)
    . . .
    }
    . . .
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide