Epoxyを用いたレイアウト構築術

Slide 1

Slide 1 text

EpoxyΛ༻͍ͨϨΠΞ΢τߏஙज़ pixiv.inc kobaken

Slide 2

Slide 2 text

kobaken ϐΫγϒגࣜձࣾ AndroidΞϓϦΤϯδχΞ Kotlin / Swift / Ruby ੠༏ / εϚϒϥ / ϙέΧ Twitter: @koba_dog_  GitHub: @kobaken0029

Slide 3

Slide 3 text

ɾEpoxyͬͯԿʁ ɾྨࣅϥΠϒϥϦ͸ʁ ɾEpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾpixiv Sketch AndroidͰͷ׆༻ࣄྫ Index

Slide 4

Slide 4 text

EpoxyͬͯԿʁ

Slide 5

Slide 5 text

EpoxyͬͯԿʁ RecyclerView(Ϧετ΍άϦουදࣔʹ࢖͏)ʹΑΔෳࡶͳϨΠΞ΢τΛએݴతʹ ߏஙग़དྷΔAndroidϥΠϒϥϦɻAirbnb੡ɻ https://github.com/airbnb/epoxy

Slide 6

Slide 6 text

ྨࣅϥΠϒϥϦ͸ʁ

Slide 7

Slide 7 text

ྨࣅϥΠϒϥϦ͸ʁ RecyclerViewΛ͍͍ײ͡ʹ͢Δܥ ɾGroupie એݴతʹUIΛ૊ΈཱͯΒΕΔܥ ɾKotlin/anko ɾJetpack Compose ɾsquare/contour←NEW! એݴతʹUIΛ૊ΈཱͯΒΕΔܥ ɾSwiftUI

Slide 8

Slide 8 text

Ͱɺ࣮ࡍͲ͏ศརʹͳΔͷʁʁʁ

Slide 9

Slide 9 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 10

Slide 10 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 11

Slide 11 text

Adapter

Slide 12

Slide 12 text

%BUB4PVSDF  -JTU "EBQUFS -JTU7JFX

Slide 13

Slide 13 text

σʔλ͕Viewʹ఻ΘΔ Α͏ʹ͍͍ײ͡ʹม׵ ͯ͘͠ΕΔౕ

Slide 14

Slide 14 text

Ϧετදࣔ͢ΔͨΊͷ࠷খίʔυ

Slide 15

Slide 15 text

Ϧετදࣔ͢ΔͨΊͷ࠷খίʔυ

Slide 16

Slide 16 text

CustomAdapterͷ࣮૷

Slide 17

Slide 17 text

RecyclerView.Adapter with ViewTypeͷ࣮૷

Slide 18

Slide 18 text

Slide 19

Slide 19 text

&QPYZ͍ͬͯ͏ͷ͕͋ΔΑʂ  ͔ΜͨΜͩΑʂ  ΈΜͳ࢖ͬͯΔΑʂ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Epoxyͩͱ͜͏

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 25

Slide 25 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 26

Slide 26 text

ࠩ෼؅ཧ ɾEpoxyController͕ࣗಈͰࠩ෼Λऔͬͯ͘ΕΔ ɾͦ͜Ͱੜ੒͢ΔEpoxyModelͷequals΍hashCodeΛࢀর͍ͯ͠Δ ɾࠩ෼ߋ৽ΞϧΰϦζϜʹ͸DiﬀUtilΛ࠾༻ ɾhttps://github.com/airbnb/epoxy/wiki/Diﬃng

Slide 27

Slide 27 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 28

Slide 28 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 29

Slide 29 text

EpoxyModelͱ͸ Epoxy͸EpoxyModelΛհͯ͠ViewʹDataΛόΠϯυ͍ͯ͠Δ  EpoxyModel͸ࣗಈੜ੒͞ΕΔ EpoxyModelΛੜ੒͢Δํ๏͸3ͭ ɾCustomViewʹରͯ͠ΞϊςʔγϣϯΛ෇༩͢Δ ɾEpoxyModelWithHolderΛܧঝͯ͠ΞϊςʔγϣϯΛ෇༩͢Δ ɾpackage-info.javaΛهड़ͯ͠xmlΛData BindingରԠ͢Δ

Slide 30

Slide 30 text

Data BindingʹରԠ ɾ֤ηϧʹؔͯ͠େମͷ৔߹ɺxmlͷΈͰ׬݁Ͱ͖Δ ɾCustomViewΛ࡞Βͳͯ͘΋ྑ͍ ɾࠐΈೖͬͨॲཧ͸BindingAdapterͰ੾Γग़͢

Slide 31

Slide 31 text

EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ

Slide 32

Slide 32 text

ศརͳΞυΦϯ ɾը૾ͷPreLoading on ɾศརʹΧελϚΠζ͞ΕͨRecyclerViewΛఏڙ ɾΧϧʔηϧ࣮૷ ɾεϫΠϓ΍υϥοά&υϩοϓ

Slide 33

Slide 33 text

pixiv Sketch AndroidͰͷ׆༻ࣄྫ

Slide 34

Slide 34 text

௨஌ը໘

Slide 35

Slide 35 text

௨஌ը໘ ɾpackage-info.java ɾlayout xml ɾdata class ɾController ɾActivity/Fragment

Slide 36

Slide 36 text

package-info.java

Slide 37

Slide 37 text

Layout xml

Slide 38

Slide 38 text

Layout xml

Slide 39

Slide 39 text

Data class

Slide 40

Slide 40 text

Controller (ఆٛ)

Slide 41

Slide 41 text

Controller (Listener)

Slide 42

Slide 42 text

Controller

Slide 43

Slide 43 text

Activity / Fragment

Slide 44

Slide 44 text

Slide 45

Slide 45 text

ଞʹ΋…

Slide 46

Slide 46 text

Slide 47

Slide 47 text

ɾEpoxy͸ෳࡶͳϦετ/ίϨΫγϣϯUIΛએݴతʹ࣮૷ग़དྷΔ ɾ֤row/cellͷ࣮૷ʹूதͰ͖Δ ɾEpoxyModelͷࠩ෼ΛݟͯɺࣗಈͰࠩ෼ߋ৽ͯ͘͠ΕΔ ɾ๛෋ͳΞυΦϯ͕ศར ɾEpoxy͸͍͍ͧ ·ͱΊ

Slide 48

Slide 48 text

Let’s Epoxy!