複雑なレイアウト組む時あるあるは コンポーネント化で解決しよう

Transcript

1. ෳࡶͳϨΠΞ΢τ૊Ή࣌͋Δ͋Δ͸ ίϯϙʔωϯτԽͰղܾ͠Α͏ ͋Δ͋ΔLTʙεϚϗΞϓϦ։ൃΤϯδχΞʙ VOL.3 2019/03/19 @GINYOLITH_TECH
2. ςΩετ SELF INTRODUCTION data class Ginyolith( val realName : String = “Fumiya Akagi", val nickName : String = "ぎーにょ", var belongingTo : String = "株式会社アイリッジ", var position : String = "Androidアプリ開発", val loves : List<String> = mutableListOf( "写真", "アカペラ（音楽）", "インドカレー", "仮面ライダー"), val twitterId : String = "@ginyolith_tech" ) : Human()
3. AGENDA ࠓ೔͓࿩͢Δࣄ ▸ ෳࡶͳϨΠΞ΢τΛ૊Ή࣌͋Δ͋Δ ▸ Style/CustomView/include/Fragment ͷಛੑ ▸ Style/CustomView/include/Fragment ͷ࢖͍෼͚ ▸ ݱࡏͷ՝୊
4. ARUARU ෳࡶͳϨΠΞ΢τΛ૊Ή࣌͋Δ͋Δ ▸ ωετ͗ͯ͢͠ҙຯෆ໌ʹͳΔlayout.xml ▸ େྔͷViewΛίϯτϩʔϧ͢ΔɺActivity/Fragment/ViewModel ▸ width΍heightɺbackgroundͷઃఆʹσδϟϰΛײ͡Δࣄ͕ଟൃ ▸ Α͘Θ͔Μͳ͍͚Ͳdatabinding͕ಈ͔ͳ͍ʢٽʣ
5. HOW TO COMMONIZE VIEWS VIEWͷڞ௨Խͷํ๏ FRAGMENT INCLUDE STYLE CUSTOM VIEW ACTIVITY DIMEN.XML
6. HOW TO COMMONIZE VIEWS ࠓ೔͓࿩͢Δࣄ FRAGMENT INCLUDE STYLE CUSTOM VIEW ͦΕͧΕԿ͕ग़དྷΔͷʁ Ͳ͏࢖͍෼͚Δͷʁ
7. HOW TO COMMONIZE VIEWS STYLE ▸ ʮView ΍΢Οϯυ΢ͷ֎؍΍ॻࣜΛࢦఆ͢ΔϓϩύςΟͷू߹ʯ by Google Developers ▸ ThemeʹԠͯ͡ಈతʹ৭Λఆٛ͢Δ͜ͱ΋Մೳ ▸ ϩδοΫ΍ঢ়ଶΛ࣋ͭ͜ͱ͸ෆՄೳɻ͋͘·Ͱݟͨ໨ͷΈ੍ޚ
8. HOW TO COMMONIZE VIEWS - STYLE - View ΍΢Οϯυ΢ͷ֎؍΍ॻࣜΛࢦఆ͢ΔϓϩύςΟͷू߹ <View android:layout_height=“match_parent" android:layout_width="1dp" android:layout_marginBottom=“10dp" android:layout_marginTop=“10dp” android:background=“@color/borderGray”/> <View style="@styleAppTheme.Border.Gray"/>
9. HOW TO COMMONIZE VIEWS - STYLE - View ΍΢Οϯυ΢ͷ֎؍΍ॻࣜΛࢦఆ͢ΔϓϩύςΟͷू߹ <View android:layout_height=“match_parent" android:layout_width="1dp" android:layout_marginBottom=“10dp" android:layout_marginTop=“10dp” android:background=“@color/borderGray”/> <View style="@style/ AppTheme.Border.Gray"/> <style name="AppTheme.Border"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">1dp</item> <item name="android:layout_marginBottom">10dp</item> <item name="android:layout_marginTop">10dp</item> </style> <style name="AppTheme.Border.Gray" parent="AppTheme.Border"> <item name="android:background">@color/borderGray</item> </style>
10. HOW TO COMMONIZE VIEWS INCLUDE ▸ layout.xmlͰ࡞੒ͨ͠ϨΠΞ΢τΛ࢖͍·Θ͢ ▸ ϩδοΫΛ಺แ͠ͳ͍ ▸ ϩδοΫͱϨΠΞ΢τΛ෼཭ͯ͠ɺϩδοΫ͚ͩڞ༗Խ͕Մೳ ▸ ϩδοΫͰContextΛऔಘ͢Δͷ͕೉͍͠
11. HOW TO COMMONIZE VIEWS - INCLUDE - ϩδοΫΛ಺แ͠ͳ͍ class UserViewModel() { val searchTerm :String fun search() { repository .search(searchTerm) } } <?xml version="1.0" encoding="utf-8"?> <layout> <data> <variable name="viewModel" type=“hoge.UserViewModel”/> </data> <android.support.constraint.ConstraintLayout> <Button android:onClick="@{() -> viewModel.search()}"/> </android.support.constraint.ConstraintLayout> </layout> component_user_search.xml <include layout=“@layout/component_user_search” app:viewModel="@{userViewModel}"/> ϩδοΫͱঢ়ଶΛ ࣋ͭΠϯελϯεΛ஫ೖՄ ೳ
12. <?xml version="1.0" encoding="utf-8"?> <layout> <data> <variable name="viewModel" type=“hoge.UserViewModel”/> </data> <android.support.constraint.ConstraintLayout> <Button android:onClick="@{() -> viewModel.search()}"/> </android.support.constraint.ConstraintLayout> </layout> HOW TO COMMONIZE VIEWS - INCLUDE - ϩδοΫͱϨΠΞ΢τΛ෼཭ͯ͠ɺϩδοΫ͚ͩڞ༗Խ͕Մೳ component_user_search.xml <?xml version="1.0" encoding="utf-8"?> <layout> <data> <variable name="viewModel" type=“hoge.UserViewModel”/> </data> <android.support.constraint.ConstraintLayout> <TextView android:onClick="@{() -> viewModel.search()}"/> </android.support.constraint.ConstraintLayout> </layout> component_user_search_text.xml ΄΅ߏ଄͸ಉ͕ͩ͡ɺඍົʹݟ ͨ໨͕ҟͳΔ ΄΅ߏ଄͸ಉ͕ͩ͡ɺ ඍົʹݟͨ໨͕ҟͳΔ
13. HOW TO COMMONIZE VIEWS - INCLUDE - ϩδοΫͱϨΠΞ΢τΛ෼཭ͯ͠ɺϩδοΫ͚ͩڞ༗Խ͕Մೳ component_user_search.xml <include layout="@layout/hoge" app:viewModel="@{userViewModel}"/> <include layout=“@layout/fuga" app:viewModel="@{userViewModel}"/> ΄΅ߏ଄͸ಉ͕ͩ͡ɺඍົʹݟ ͨ໨͕ҟͳΔ ϩδοΫͷڞ௨ԽΛɺ
 ಛघͳॲཧΛॻ͔ͣʹߦ͏͜ͱ͕Մೳ component_user_search_text.xml
14. HOW TO COMMONIZE VIEWS CUSTOM VIEW ▸ ঢ়ଶͱϩδοΫΛ಺แ ▸ contextΛ༻͍ͨϩδοΫΛ࣮૷ՄೳʢIntentͷൃߦͳͲʣ ▸ ಠࣗͷattributeΛఆٛग़དྷΔ ▸ طଘͷViewΛ֦ுͯ͠࢖͏͜ͱ΋Մೳ ▸ ViewGroupΛࣗ࡞͢Δࣄ΋Մೳ ੍໿͕গͳ͘ɺ෯޿͍ػೳͱҙຯΛ΋ͨͤΒΕΔ
15. HOW TO COMMONIZE VIEWS - CUSTOM VIEW - ঢ়ଶͱϩδοΫΛ಺แ STYLE VIEW INCLUDE VIEW VIEW VIEW LOGIC(INJECTED) CUSTOM VIEW VIEW VIEW VIEW LOGIC ATTRIBUTE LOGIC(INJECTED) UI
16. HOW TO COMMONIZE VIEWS - CUSTOM VIEW - ঢ়ଶͱϩδοΫΛ಺แ CUSTOM VIEW VIEW VIEW VIEW LOGIC ATTRIBUTE LOGIC(INJECTED) UI Viewͷ૊Έ߹Θͤʢ୯ମView΋Մʣ Viewͷݟͨ໨ɺଐੑɺStyle Viewݻ༗ͷଐੑΛఆٛՄೳ Viewʹݻ༗ϩδοΫΛΧϓηϧԽ OnClickListener౳ɺϩδοΫΛ஫ೖ
17. HOW TO COMMONIZE VIEWS FRAGMENT ▸ ಠࣗʹϥΠϑαΠΫϧΛ࣋ͭɻʢ།ҰϥΠϑαΠΫϧपΓͷॲཧΛΧϓηϧԽՄೳʣ ▸ ਌Viewͱͷίϛϡχέʔγϣϯ͸೉͍͠ɻ ▸ ಛఆͷActivity/Fragement͔ΒͷΈݺͼग़ͤΔΑ͏ʹ͢Δ౳ରࡦ͕ඞཁ ▸ ϩδοΫΛ஫ೖग़དྷͳ͍ ▸ CustomView΍Styleͱൺ΂ɺݟͨ໨Λ਌͔Β੍ޚ͠ਏ͍ ಠཱੑ͕ߴ͍CUSTOMVIEW
18. Ͳ͏࢖͍෼͚Ε͹͍͍ʁ ಛੑ͸ཧղͨ͠
19. COMPARISON OF COMMONIZING WAYS ൺֱ / Style include CustomView Fragment LifecycleΛݕ஌ × × ˚ ◦ ਌View͔Βঢ়ଶΛ੍ޚ × ˚ ◦ × layout.xmlͰݟͨ໨Λ੍ޚ ◦ × ◦ × ϩδοΫΛ಺แ × × ◦ ◦ ϩδοΫΛ஫ೖ × ◦ ◦ × attr.xmlʹΑΔΧελϜཁૉ × × ◦ ×
20. COMPARISON OF COMMONIZING WAYS ൺֱ / Style include CustomView Fragment LifecycleΛݕ஌ × × ˚ ◦ ਌View͔Βঢ়ଶΛ੍ޚ × ˚ ◦ × layout.xmlͰݟͨ໨Λ੍ޚ ◦ × ◦ × ϩδοΫΛ಺แ × × ◦ ◦ ϩδοΫΛ஫ೖ × ◦ ◦ × attr.xmlʹΑΔΧελϜཁૉ × × ◦ × ݟͨ໨ͷڞ௨ԽʹಛԽ
21. COMPARISON OF COMMONIZING WAYS ൺֱ / Style include CustomView Fragment LifecycleΛݕ஌ × × ˚ ◦ ਌View͔Βঢ়ଶΛ੍ޚ × ˚ ◦ × layout.xmlͰݟͨ໨Λ੍ޚ ◦ × ◦ × ϩδοΫΛ಺แ × × ◦ ◦ ϩδοΫΛ஫ೖ × ◦ ◦ × attr.xmlʹΑΔΧελϜཁૉ × × ◦ × ϩδοΫΛ஫ೖՄೳ
22. COMPARISON OF COMMONIZING WAYS ൺֱ / Style include CustomView Fragment LifecycleΛݕ஌ × × ˚ ◦ ਌View͔Βঢ়ଶΛ੍ޚ × ˚ ◦ × layout.xmlͰݟͨ໨Λ੍ޚ ◦ × ◦ × ϩδοΫΛ಺แ × × ◦ ◦ ϩδοΫΛ஫ೖ × ◦ ◦ × attr.xmlʹΑΔΧελϜཁૉ × × ◦ × Ұ௨Γग़དྷΔ
23. COMPARISON OF COMMONIZING WAYS ൺֱ / Style include CustomView Fragment LifecycleΛݕ஌ × × ˚ ◦ ਌View͔Βঢ়ଶΛ੍ޚ × ˚ ◦ × layout.xmlͰݟͨ໨Λ੍ޚ ◦ × ◦ × ϩδοΫΛ಺แ × × ◦ ◦ ϩδοΫΛ஫ೖ × ◦ ◦ × attr.xmlʹΑΔΧελϜཁૉ × × ◦ × ਌VIEW͔Βͷ੍ޚ ʹ੍͓͍ͯ໿
24. ·ͱΊ
25. SUMMURY ڞ௨Խର৅͕ɾɾɾ ෳ਺ͷVIEWͷ ૊Έ߹Θͤ STYLE NO Yes ϩδοΫΛ ಺แ Yes ਌VIEW͔Βݟ ͨ໨Λ੍ޚ INCLUDE NO NO FRAGMENT CUSTOM VIEW Yes
26. SUMMARY ·ͱΊ ▸ AndroidͷViewͷڞ௨Խʹ΋৭ʑͳํ๏͕͋Δ ▸ ੍໿΍ҙຯ෇͚ʹԠͯ͡࢖͍෼͚Δͱ… ▸ Ϧʔμϒϧͳίϯϙʔωϯτʹ ▸ ༨෼ͳ࣮૷ΛͤͣΑΓޮ཰తʹViewΛ࡞੒Մೳ
27. PROBLEMS ՝୊ ▸ component_ͩͬͨΓview_ͩͬͨΓɺ໋໊نଇ ͕όϥόϥ ▸ atomic designͷߟ͑ํΛద༻ͯ͠componentͷ ཻ౓Λ੔ཧग़དྷͳ͍͔ߟ͍͑ͯΔ
28. THANK YOU FOR LISTENING!!