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

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!