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

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

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

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

E8e0607f1d935e9595375e04498f223a?s=128

kobayashi_kento

August 27, 2019
Tweet

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!