UI Component Catalog for Android

AndroidでUI Componentの一覧を表示をする

Transcript

1. UI Component Catalog for Android ϐοΫΞοϓגࣜձࣾ @kazutoyo
2. ࣗݾ঺հ ϐοΫΞοϓגࣜձࣾ ౦ւ ࿨๛ ʢ@kazutoyoʣ νϟοτܕখઆͷDMM TELLERͷ iOS/Androidͷ։ൃΛ୲౰
4. UI Component
6. UI Component • ΞϓϦέʔγϣϯ্Ͱ࠶ར༻Ͱ͖ΔΑ͏ͳViewΛ·ͱΊΔ • ϘλϯɺϦετɺΧʔυ…etc
7. UI Component Catalog
9. Storybook • React/Vue/AngularͰͷUI Component Catalog • StorybookΛ࢖͏͜ͱͰɺ։ൃऀ΍σβΠφʔ͸ίϯϙʔωϯ τ୯ҐͰͦΕͧΕͷ࣮૷΍ৼΔ෣͍Λ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ • ͲΜͳίϯϙʔωϯτ͕͋Δ͔΋ಈ͔ͯ֬͠ೝ͢Δ͜ͱ͕Ͱ͖ Δ
10. ΊͬͪΌ͍͍ʂʂ
11. AndroidͰ΋࢖͍ͨͯ͘ ʢࡶʹʣͭͬͯ͘Έ·ͨ͠
12. https://github.com/kazutoyo/ UIComponentCatalog
13. طଘͷϓϩδΣΫτʹ௥Ճͯ͠ΈΔ
14. طଘͷطଘͷϓϩδΣΫτʹ௥Ճͯ͠ΈΔ • TELLERͷΞϓϦͰ͸ݱࡏϚϧνϞδϡʔϧʹͳ͍ͬͯͳ͍ • ৽نͰ࡞ΔίϯϙʔωϯτΛ:uicomponentͱͯ͠Ϟδϡʔϧʹ੾ Γग़͢ • UIComponentCatalog༻ͷPhone&TabletϞδϡʔϧΛ௥Ճͯ͠ɺ ͦ͜Ͱ:uicomponentϞδϡʔϧΛಡΈࠐΈUIComponentCatalog Λ࣮૷͢Δ
15. NewModule → Android Library
16. ͜Μͳײ͡ͰUIComponent༻ͷϞδϡʔϧΛ௥Ճ
17. :uicomponentʹͭͬͨ͘ComponentΛ௥Ճ
18. NewModule → Phone & Tablet Module
19. UIComponentCatalogϞδϡʔϧΛ௥Ճ
20. ActivityΛ௥ՃʢLayout File͸ੜ੒͠ͳ͍ʣ
21. JitPackϦϙδτϦΛ௥Ճ > build.gradle (project) repositories { google() jcenter() maven { url "https://jitpack.io" } }
22. UIComponentCatalogͱ :uicomponentϞδϡʔϧΛ௥Ճ > uicomponentcatalog/build.gradle dependencies { implementation ‘com.github.kazutoyo:UIComponentCatalog:0.0.+’ implementation project(':uicomponent') }
23. ComponentCatalogActivityΫϥεΛܧঝͯ͠ createCollections()Λ࣮૷͢Δ class TellerUIComponentCatalogActivity : ComponentCatalogActivity() { override fun createCollections(): List<ComponentCatalogCategory> = listOf( ComponentCatalogCategory("Common", listOf( ComponentCatalogSubCategory("ϑΥϩʔϘλϯ", listOf( object : ComponentItem("ϑΥϩʔϘλϯʢະϑΥϩʔʣ") { override fun buildItem(): View { return FollowButton(this@TellerUIComponentCatalogActivity).apply { setIsFollowed(false) } } } )) )) ) }
24. ͔ͭͬͯΈͯ • ߴ଎ʹUIίϯϙʔωϯτͷ։ൃͰ͖ΔΑ͏ʹͳͬͨ • ͱ͘ʹຊମΞϓϦ͕Ϟδϡʔϧ෼ׂ͞Ε͍ͯͳ͔͔ͬͨΒ͍··ͰΊͪΌͪ͘Ό Ϗϧυ͕͔͔͍͚࣌ؒͬͯͨͲɺUIComponentCategoryͷΞϓϦέʔγϣϯ Ͱ֬ೝͰ͖ΔͷͰϏϧυ଴͕ͪͳ͘ͳͬͨ • ViewΛίϯϙʔωϯτԽ͢Δบ͕ͭ͘Α͏ͳؾ͕͢Δ • σβΠφʔ͞Μͱίϯϙʔωϯτ୯ҐͰσβΠϯνΣοΫ͕Ͱ͖ΔͷͰɺ΍Γ ΍͘͢ͳΓͦ͏
25. ·ͩ·ͩUIComponentCatalog͸࡞Γ్தͳͷͰ ఏҊ΍PullRequestͳͲ׻ܴ͠·͢ʂ
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ϐοΫΞοϓגࣜձࣾͰ͸ΤϯδχΞΛ ืू͍ͯ͠·͢ͷͰԿଔ