Androidエンジニア デザイン部 #1 2018/03/28 @ymnd https://nohana.connpass.com/event/80530/
How to implement Material DesignAndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd
View Slide
ࠓͷ͓ॻ͖ᶃ ࣄલௐࠪᶄ ΨΠυϥΠϯ֬ೝᶅ σβΠϯͷ۩ମԽᶆ σόοά࡞ۀ2
Ͳ͏ͬͯσβΠϯΛʹ࣮ͯ͠·͔͢
ͨͱ͑͜ΜͳλεΫ• ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ• શ໘తʹελΠϧΛݟ͢• ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ• ݕࡧલʹཤྺϗοτΩʔϫʔυΛදࣔ͢Δ• ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ• ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ4
ࣗͷྗͰσβΠϯ͍ͯ͘͠
͍͖ͬͯͩʂʂʂ
ࠓͷ͓ॻ͖ᶃ ࣄલௐࠪᶄ ΨΠυϥΠϯ֬ೝᶅ σβΠϯͷ۩ମԽᶆ σόοά࡞ۀ8
ᶃࣄલௐࠪ• ઌߦࣄྫΛൺֱ͢Δ• ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ• ݕࡧػೳΛͬͯεΫγϣΛूΊΔ9
ᶃࣄલௐࠪͷ࣮ྫ10
ࠓͷ͓ॻ͖ᶃ ࣄલௐࠪᶄ ΨΠυϥΠϯ֬ೝᶅ σβΠϯͷ۩ମԽᶆ σόοά࡞ۀ11
ᶄΨΠυϥΠϯͷ֬ೝ• ΨΠυϥΠϯΛݟʹߦ͘• ࣄલʹҰ௨ΓΛ௨͓ͯ͘͜͠ͱ• ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠ߟྀࣄ߲ͨ͘͞Μ͋Δ• Patterns/Search• Components/Lists• Style/Color• Style/Icons12
ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ• ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ←ΫϦΞϘλϯͷେ͖͞ʗ༨നʁ←ςΩετͷϘτϜҐஔ←ελΠϧBoldʁ←ྻͷdpʁϚςϦΞϧΞΠίϯʁˠେ͖͞ͱҐஔʁˠ৭ςΩετΑΓೱ͍ʁˠଞͷΞΠίϯͷྫʁˠ←ંฦ͠ߟྀ͖͢ʁ←dividerͷ৭ʁଠ͞ʁ←ݟग़͠Ͳ͏͍ΕΔ͔ɹʢଞͷΞΠςϜͷఆʣςΩετͱͲΕ͘Β͍͢ʁˠ←ϑΥϯταΠζʁ13
ࠓͷ͓ॻ͖ᶃ ࣄલௐࠪᶄ ΨΠυϥΠϯ֬ೝᶅ σβΠϯͷ۩ମԽᶆ σόοά࡞ۀ14
ᶅσβΠϯͷ۩ମԽ• SketchͰෳҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ15
ࠓͷ͓ॻ͖ᶃ ࣄલௐࠪᶄ ΨΠυϥΠϯ֬ೝᶅ σβΠϯͷ۩ମԽᶆ σόοά࡞ۀ16
ᶆσόοά࡞ۀ• σόοάͷ͍͍ಓͷΓ• ΈํΛؒҧ͔ͬͨͳʁ• Ґஔ͕ἧΘͳ͍ଞ• • Կނ͔ಛఆͰͷΈڍಈ͕ҧ͏• OSόʔδϣϯ• Կނ͔̐ܥ่͚ͩΕΔ• λονϑΟʔυόοΫରԠ17
ᶆσόοά࡞ۀ• LayoutInspector• Stetho• ։ൃऀπʔϧ• Sketch18
ᶆσόοά࡞ۀ(LayoutInspector)• AndroidStudio > Tools > Layout Inspector• ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ• ViewͷVisibilityThemeɺ༨നɺେ͖͞ͳͲ19
ᶆσόοά࡞ۀ(LayoutInspector)
ᶆσόοά࡞ۀ(LayoutInspector)View Tree
ᶆσόοά࡞ۀ(LayoutInspector)View Properties
ᶆσόοά࡞ۀ(Stetho)• http://facebook.github.io/stetho/• ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ• TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ• ͘ͳͬͨ߹ͷݟͨΛνΣοΫͰ͖Δ23
ᶆσόοά࡞ۀ(Stetho)
ᶆσόοά࡞ۀ(Stetho)View Tree
ᶆσόοά࡞ۀ(Stetho)View Properties
ᶆσόοά࡞ۀ(Stetho)text෦Λબˍೖྗ
ᶆσόοά࡞ۀ(։ൃऀπʔϧ)• ઃఆ > ։ൃऀ͚Φϓγϣϯ > ϨΠΞτڥքΛදࣔ• ڥ͕Ͳ͜ʹ͋Δ͔ܶతʹ͔Γ͘͢ͳΔ32
ᶆσόοά࡞ۀ(Sketch)• σβΠϯҊʹεΫγϣΛॏͶͯඍௐΛ܁Γฦ͢• OpacityΛ80%ʹͯ͠ॏͶΔ33
Ͱ͖͕͋Γ34
whoami• twitter:@ymnd, github:@ymnder• Application Engineer• Android ܦిࢠ൛ΞϓϦ• Android ࢴ໘ϏϡʔΞʔΞϓϦ• ٕज़ॻయ̐Ͱܦిࢠ൛ͷݟΛ·ͱΊͨຊΛग़͠·͢ɻ35
Design͍͖ͬͯ