Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今更ながらEpoxy / Lateinit Epoxy
Search
Sho Masegi
November 06, 2018
Technology
2
710
今更ながらEpoxy / Lateinit Epoxy
今更ながらEpoxyを触ってみました。
Sho Masegi
November 06, 2018
Tweet
Share
More Decks by Sho Masegi
See All by Sho Masegi
独自の共通認証基盤を用いているサービスでアカウント削除機能を提供したときの道程
shomasegi
1
1.9k
Migrate Swift 4.2 to 5.2
shomasegi
4
740
Material Components ことはじめ / Get Started Material Components
shomasegi
0
670
Other Decks in Technology
See All in Technology
Handling focus in 2024
tahia910
0
230
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
680
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
130
データベース02: データベースの概念
trycycle
0
180
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
310
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
890
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
180
MapLibreとAmazon Location Service
dayjournal
1
190
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
130
Cracking the KubeCon CfP
inductor
2
270
DMM.com アルファ室採用案内資料
hsugita
1
230
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
The Cult of Friendly URLs
andyhume
74
5.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing the Hi-DPI Web
ddemaree
276
33k
Why Our Code Smells
bkeepers
PRO
331
56k
How to Ace a Technical Interview
jacobian
273
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Producing Creativity
orderedlist
PRO
338
39k
Transcript
ࠓߋͳ͕ΒEpoxy ɹ Sho Masegi
ࣗݾհ • όέπඃͬͯ·͢ɻ • େֶੜͰ͢ɻ • Androidɺ࣌ʑiOS • ࠷ۙ iOS
> Android @boc_sho
ͬͨ͜ͱ͋Δํ͍·͔͢ʁ
ກձΛଓ͚͍ͯͩ͘͞
ࠓճ͢͜ͱ • Epoxyͱʁ • Epoxyͷ؆୯ͳ͍ํ
͞ͳ͍͜ͱ • Epoxyͷ࣮ફతͳ͍ํ • ଞͷϥΠϒϥϦͱൺͯͲ͏͔
͜ͷϨΠΞτͲ͏ͬͯΉ?
͜ͷϨΠΞτͲ͏ͬͯΉ?
RecyclerView or ScrollView ?
ͪΐͬͱ໘ͦ͘͞͏…
ෳࡶͳϨΠΞτΛ ؆୯ʹΈ͍ͨʂ
ͦ͜Ͱ Epoxy !!
Epoxyͱ?
Epoxyͱ? • ෳࡶͳը໘ΛRecyclerViewͰ࡞ΔͨΊͷϥΠϒϥϦ • Airbnb͕࡞͍ͯ͠Δ • 2016/08/25 Initial public release
• ࠓͰ݁ߏ׆ಈ͍ͯ͠Δ
Ͳ͏͍͏͜ͱ͕Ͱ͖Δͷʁ
Epoxyͱ? • ҧ͏ϨΠΞτͷCellΛRecyclerViewͰ؆୯ʹදࣔ Ͱ͖Δ • ಈతʹCellΛೖΕସ͑ͨΓͰ͖Δ
Epoxyͱ? .kt .xml or Epoxy EpoxyModel ϨΠΞτϑΝΠϧ͔ΒEpoxyModelΛ ࣗಈੜ
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ͱ?
͜ͷϨΠΞτΛEpoxyͰΉͱ….
override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)
description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰΉͱ….
override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)
description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰΉͱ….
override fun buildModels(city: City) { headerView { id(“header view”) cityName(city.name)
description(city.description) } linkView { id(“link view”) onClick { _ -> callbacks.onLinkClick() } } // . . . . EpoxyͰΉͱ….
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ͰΉͱ….
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ͰΉͱ….
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ͰΉͱ….
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ͰΉͱ….
؆୯ͦ͏͡ΌΜ
ಋೖͯ͠ΈΑ͏ʂ
1. ४උ 2. EpoxyModel (CellView)Λ࡞ 3. Controller (Adapter)Λ࡞ 4. EpoxyRecyclerViewΛFragmentʹՃ͢Δ
खॱ
1. ४උ
apply plugin: ‘kotlin-kapt’ kapt { correctErrorTypes = true // .
. . } build.gradle ͍ͭͷ
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 ͍ͭͷ
͜Ε package-info.java ͍ͭͷ͡Όͳ͍ͭ
package-info.javaͱʁ • DataBindingΛͬͯEpoxyModelΛ࡞Δͷʹඞཁ
• 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
• DataBindingΛͬͯEpoxyModelΛ࡞Δͷʹඞཁ • ͲͷϨΠΞτϑΝΠϧ͔ΒEpoxyModelΛ࡞Δ͔ɺ ͱ͍͏Indexͷׂ • ಛघͳJavaϑΝΠϧ package-info.javaͱʁ
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
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
@EpoxyDataBindingPattern (಄ޠ) @EpoxyDataBindnigPattern(rClass = R.class, layoutPrefix = “epoxy_layout”) epoxy_layout_header.xml Epoxy
HeaderBindingModel_.java
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
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
@EpoxyDataBindingLayouts @EpoxyDataBindingLayouts({R.layout.header_view, . . .}) header_view.xml HeaderViewBindingModel_.java Epoxy
४උྃʂ
̎. CellΛ࡞͢Δ
CellΛ࡞͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />
</data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> </layout> epoxy_layout_header.xml
CellΛ࡞͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />
</data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> 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
CellΛ࡞͢Δ <?xml version=“1.0” encoding=“utf-8”?> <layout> <data> <variable name=“cityName” type=“String” />
</data> <LinearLayout . . .> <TextView . . . android:text=“@{cityName}” /> </LinearLayout> 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
Build !
epoxy_layout_header.xml Epoxy HeaderBindingModel_.java HeaderBindingModel_.java͕ੜʂ
3. ControllerΛ࡞͢Δ
class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //
͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller
class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //
͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller
class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //
͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller
class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //
͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller
class SampleController: TypedEpoxyController<City>() { override fun buildModels(city: City?) { //
͜͜ͰViewΛ࡞Δ . . . . } } SampleController.kt Controller
ViewΛ࡞͍ͬͯ͘
Controller epoxy_layout_header.xml epoxy_layout_link_view.xml
Controller epoxy_layout_header.xml epoxy_layout_link_view.xml Build !!
Controller HeaderBindingModel_.java LinkViewBindingModel_.java
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
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() } } // . . . .
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() } } // . . . .
4. EpoxyRecyclerViewΛՃʂ
Fragment <?xml version=“1.0” encoding=“utf-8”?> <layout> <FrameLayout . . .> <com.airbnb.epoxy.EpoxyRecyclerView
. . . /> </FrameLayout> </layout> sample_fragment.xml
Fragment <?xml version=“1.0” encoding=“utf-8”?> <layout> <FrameLayout . . .> <com.airbnb.epoxy.EpoxyRecyclerView
. . . /> </FrameLayout> </layout> sample_fragment.xml
Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()
var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }
Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()
var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }
Fragment SampleFragment.kt class SampleFragment: Fragment() { val controller = SampleController()
var city = City(~) override fun onCreateView(~): View { . . . binding.epoxyRecyclerView.setController(controller) controller.setData(city) . . . } . . . }
ʂ
https://github.com/ShoMasegi/TutorialEpoxy ࠓճ࡞ͨ͠ͷ
؆୯ʹ࡞͢Δ͜ͱ͕Ͱ͖·ͨ͠ɻ ࣍ୈͰڽͬͨͷ͕ൺֱతָʹ࣮Ͱ͖ͦ͏ɻ ײ
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ