Tweet
Tweet

Slide 1

Slide 1 text

ࠓߋͳ͕ΒEpoxy ɹ Sho Masegi

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

਌ກձΛଓ͚͍ͯͩ͘͞

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

RecyclerView or ScrollView ?

Slide 10

Slide 10 text

ͪΐͬͱ໘౗ͦ͘͞͏…

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͦ͜Ͱ Epoxy !!

Slide 13

Slide 13 text

Epoxyͱ͸?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

؆୯ͦ͏͡ΌΜ

Slide 28

Slide 28 text

ಋೖͯ͠ΈΑ͏ʂ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

1. ४උ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

• 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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

४උ׬ྃʂ

Slide 44

Slide 44 text

̎. CellΛ࡞੒͢Δ

Slide 45

Slide 45 text

CellΛ࡞੒͢Δ epoxy_layout_header.xml

Slide 46

Slide 46 text

CellΛ࡞੒͢Δ 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

Slide 47

Slide 47 text

CellΛ࡞੒͢Δ 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

Slide 48

Slide 48 text

Build !

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

3. ControllerΛ࡞੒͢Δ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ViewΛ࡞͍ͬͯ͘

Slide 57

Slide 57 text

Controller epoxy_layout_header.xml epoxy_layout_link_view.xml

Slide 58

Slide 58 text

Controller epoxy_layout_header.xml epoxy_layout_link_view.xml Build !!

Slide 59

Slide 59 text

Controller HeaderBindingModel_.java LinkViewBindingModel_.java

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

4. EpoxyRecyclerViewΛ௥Ճʂ

Slide 64

Slide 64 text

Fragment sample_fragment.xml

Slide 65

Slide 65 text

Fragment sample_fragment.xml

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

׬੒ʂ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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