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

8/27(火)に開催された pixiv App Night(ゲスト: Bitrise) での発表資料です

Transcript

1. EpoxyΛ༻͍ͨϨΠΞ΢τߏஙज़
     pixiv.inc kobaken
2. 
    kobaken ϐΫγϒגࣜձࣾ AndroidΞϓϦΤϯδχΞ Kotlin / Swift / Ruby ੠༏ / εϚϒϥ / ϙέΧ Twitter: @koba_dog_
 GitHub: @kobaken0029
3. ɾEpoxyͬͯԿʁ ɾྨࣅϥΠϒϥϦ͸ʁ ɾEpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾpixiv Sketch AndroidͰͷ׆༻ࣄྫ
    Index
4. 
    EpoxyͬͯԿʁ
5. 
    EpoxyͬͯԿʁ RecyclerView(Ϧετ΍άϦουදࣔʹ࢖͏)ʹΑΔෳࡶͳϨΠΞ΢τΛએݴతʹ ߏஙग़དྷΔAndroidϥΠϒϥϦɻAirbnb੡ɻ https://github.com/airbnb/epoxy
6. 
    ྨࣅϥΠϒϥϦ͸ʁ
7. 
    ྨࣅϥΠϒϥϦ͸ʁ RecyclerViewΛ͍͍ײ͡ʹ͢Δܥ ɾGroupie એݴతʹUIΛ૊ΈཱͯΒΕΔܥ ɾKotlin/anko ɾJetpack Compose ɾsquare/contour←NEW! એݴతʹUIΛ૊ΈཱͯΒΕΔܥ ɾSwiftUI
8. 
    Ͱɺ࣮ࡍͲ͏ศརʹͳΔͷʁʁʁ
9. 
    EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
10. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
11. 
     Adapter
12. 
     %BUB4PVSDF
 -JTU "EBQUFS -JTU7JFX
13. 
     σʔλ͕Viewʹ఻ΘΔ Α͏ʹ͍͍ײ͡ʹม׵ ͯ͘͠ΕΔౕ
14. 
     Ϧετදࣔ͢ΔͨΊͷ࠷খίʔυ
15. 
     Ϧετදࣔ͢ΔͨΊͷ࠷খίʔυ
16. 
     CustomAdapterͷ࣮૷
17. 
     RecyclerView.Adapter with ViewTypeͷ࣮૷
18. 
    
19. 
     &QPYZ͍ͬͯ͏ͷ͕͋ΔΑʂ
 ͔ΜͨΜͩΑʂ
 ΈΜͳ࢖ͬͯΔΑʂ
20. 
    
21. 
     Epoxyͩͱ͜͏
22. 
    
23. 
    
24. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
25. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
26. 
     ࠩ෼؅ཧ ɾEpoxyController͕ࣗಈͰࠩ෼Λऔͬͯ͘ΕΔ ɾͦ͜Ͱੜ੒͢ΔEpoxyModelͷequals΍hashCodeΛࢀর͍ͯ͠Δ ɾࠩ෼ߋ৽ΞϧΰϦζϜʹ͸DiffUtilΛ࠾༻ ɾhttps://github.com/airbnb/epoxy/wiki/Diffing
27. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
28. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
29. 
     EpoxyModelͱ͸ Epoxy͸EpoxyModelΛհͯ͠ViewʹDataΛόΠϯυ͍ͯ͠Δ
 EpoxyModel͸ࣗಈੜ੒͞ΕΔ EpoxyModelΛੜ੒͢Δํ๏͸3ͭ ɾCustomViewʹରͯ͠ΞϊςʔγϣϯΛ෇༩͢Δ ɾEpoxyModelWithHolderΛܧঝͯ͠ΞϊςʔγϣϯΛ෇༩͢Δ ɾpackage-info.javaΛهड़ͯ͠xmlΛData BindingରԠ͢Δ
30. 
     Data BindingʹରԠ ɾ֤ηϧʹؔͯ͠େମͷ৔߹ɺxmlͷΈͰ׬݁Ͱ͖Δ ɾCustomViewΛ࡞Βͳͯ͘΋ྑ͍ ɾࠐΈೖͬͨॲཧ͸BindingAdapterͰ੾Γग़͢
31. 
     EpoxyΛ࢖͏ͱͲ͏ศརʹͳΔʁ ɾAdapterΛॻ͔ͳ͍͍ͯ͘ʂˡ͜Ε͖͢ ɾࠩ෼؅ཧΛࣗಈͰ΍ͬͯ͘ΕΔʂˡ͜Ε͖͢ ɾData Binding ʹରԠ ɾศརͳΞυΦϯ͕ͨ͘͞Μʂ
32. 
     ศརͳΞυΦϯ ɾը૾ͷPreLoading on ɾศརʹΧελϚΠζ͞ΕͨRecyclerViewΛఏڙ ɾΧϧʔηϧ࣮૷ ɾεϫΠϓ΍υϥοά&υϩοϓ
33. 
     pixiv Sketch AndroidͰͷ׆༻ࣄྫ
34. 
     ௨஌ը໘
35. 
     ௨஌ը໘ ɾpackage-info.java ɾlayout xml ɾdata class ɾController ɾActivity/Fragment
36. 
     package-info.java
37. 
     Layout xml
38. 
     Layout xml
39. 
     Data class
40. 
     Controller (ఆٛ)
41. 
     Controller (Listener)
42. 
     Controller
43. 
     Activity / Fragment
44. 
    
45. 
     ଞʹ΋…
46. 
    
47. ɾEpoxy͸ෳࡶͳϦετ/ίϨΫγϣϯUIΛએݴతʹ࣮૷ग़དྷΔ ɾ֤row/cellͷ࣮૷ʹूதͰ͖Δ ɾEpoxyModelͷࠩ෼ΛݟͯɺࣗಈͰࠩ෼ߋ৽ͯ͘͠ΕΔ ɾ๛෋ͳΞυΦϯ͕ศར ɾEpoxy͸͍͍ͧ
     ·ͱΊ
48. 
     Let’s Epoxy!