How to implement Material Design

Androidエンジニア デザイン部 #1 2018/03/28 @ymnd
https://nohana.connpass.com/event/80530/

Transcript

1. How to implement Material Design
   AndroidΤϯδχΞ σβΠϯ෦ #1 2018/03/28 @ymnd
   

   View Slide

2. ࠓ೔ͷ͓඼ॻ͖
   ᶃ ࣄલௐࠪ
   ᶄ ΨΠυϥΠϯ֬ೝ
   ᶅ σβΠϯͷ۩ମԽ
   ᶆ σόοά࡞ۀ
   2
   

   View Slide

3. Ͳ͏΍ͬͯσβΠϯΛ੡඼ʹ
   ࣮૷ͯ͠·͔͢
   

   View Slide

4. ͨͱ͑͹͜ΜͳλεΫ
   • ݕࡧը໘ΛϚςϦΞϧσβΠϯԽ͢Δ
   • શ໘తʹελΠϧΛݟ௚͢
   • ৭ʗ༨നʗॻମʗΞΠίϯɾɾɾɾ
   • ݕࡧલʹཤྺ΍ϗοτΩʔϫʔυΛදࣔ͢Δ
   • ݕࡧը໘ʹೖͬͨͱ͖ʹϗοτΩʔϫʔυΛදࣔ
   • ݕࡧBoxΛλοϓͯ͠ཤྺΛදࣔ
   4
   

   View Slide

5. ࣗ෼ͷྗͰ
   σβΠϯ͍ͯ͘͠
   

   View Slide

6. View Slide

7. ΍͍͖ͬͯͩʂʂʂ
   

   View Slide

8. ࠓ೔ͷ͓඼ॻ͖
   ᶃ ࣄલௐࠪ
   ᶄ ΨΠυϥΠϯ֬ೝ
   ᶅ σβΠϯͷ۩ମԽ
   ᶆ σόοά࡞ۀ
   8
   

   View Slide

9. ᶃࣄલௐࠪ
   • ઌߦࣄྫΛൺֱ͢Δ
   • ͍ΖΜͳΞϓϦΛ৮ͬͯΈΔ
   • ݕࡧػೳΛ࢖ͬͯεΫγϣΛूΊΔ
   9
   

   View Slide

10. ᶃࣄલௐࠪͷ࣮ྫ
    10
    

    View Slide

11. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    11
    

    View Slide

12. ᶄΨΠυϥΠϯͷ֬ೝ
    • ΨΠυϥΠϯΛݟʹߦ͘
    • ࣄલʹҰ௨Γ໨Λ௨͓ͯ͘͜͠ͱ
    • ̍ͭͷը໘Λͭ͘Δʹࡍͯ͠΋ߟྀࣄ߲͸ͨ͘͞Μ͋Δ
    • Patterns/Search
    • Components/Lists
    • Style/Color
    • Style/Icons
    12
    

    View Slide

13. ᶄΨΠυϥΠϯͷ֬ೝͷ࣮ྫ
    • ݕࡧɺϦετɺΞΠίϯɺϑΥϯτͷଠ͞ɺ৭ຯ
    ←ΫϦΞϘλϯͷେ͖͞ʗ༨ന͸ʁ
    ←ςΩετͷϘτϜҐஔ
    ←ελΠϧ͸Boldʁ
    ←ྻͷdp͸ʁ
    ϚςϦΞϧΞΠίϯ͸ʁˠ
    େ͖͞ͱҐஔ͸ʁˠ
    ৭͸ςΩετΑΓೱ͍ʁˠ
    ଞͷΞΠίϯͷྫ͸ʁˠ
    ←ંฦ͠͸ߟྀ͢΂͖ʁ
    ←dividerͷ৭͸ʁଠ͞͸ʁ
    ←ݟग़͠͸Ͳ͏͍ΕΔ͔
    ɹʢଞͷΞΠςϜͷ૝ఆʣ
    ςΩετͱͲΕ͘Β͍཭͢ʁˠ
    ←ϑΥϯταΠζ͸ʁ
    13
    

    View Slide

14. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    14
    

    View Slide

15. ᶅσβΠϯͷ۩ମԽ
    • SketchͰෳ਺ҊΛඳ͍ͯνʔϜͰ૬ஊ͢Δ
    15
    

    View Slide

16. ࠓ೔ͷ͓඼ॻ͖
    ᶃ ࣄલௐࠪ
    ᶄ ΨΠυϥΠϯ֬ೝ
    ᶅ σβΠϯͷ۩ମԽ
    ᶆ σόοά࡞ۀ
    16
    

    View Slide

17. ᶆσόοά࡞ۀ
    • σόοάͷ௕͍௕͍ಓͷΓ
    • ૊ΈํΛؒҧ͔ͬͨͳʁ
    • Ґஔ͕ἧΘͳ͍ଞ
    • ୺຤໰୊
    • Կނ͔ಛఆ୺຤ͰͷΈڍಈ͕ҧ͏
    • OSόʔδϣϯ໰୊
    • Կނ͔̐ܥ่͚ͩΕΔ
    • λονϑΟʔυόοΫରԠ
    17
    

    View Slide

18. ᶆσόοά࡞ۀ
    • LayoutInspector
    • Stetho
    • ։ൃऀπʔϧ
    • Sketch
    18
    

    View Slide

19. ᶆσόοά࡞ۀ(LayoutInspector)
    • AndroidStudio > Tools > Layout Inspector
    • ViewHierarchyͱ֤ཁૉͷঢ়ଶΛ֬ೝͰ͖Δ
    • ViewͷVisibility΍Themeɺ༨നɺେ͖͞ͳͲ
    19
    

    View Slide

20. ᶆσόοά࡞ۀ(LayoutInspector)
    

    View Slide

21. ᶆσόοά࡞ۀ(LayoutInspector)
    View Tree
    

    View Slide

22. ᶆσόοά࡞ۀ(LayoutInspector)
    View Properties
    

    View Slide

23. ᶆσόοά࡞ۀ(Stetho)
    • http://facebook.github.io/stetho/
    • ChromeDeveloperToolsΛར༻͠CSS-likeʹ֬ೝͰ͖Δ
    • TextΛϦΞϧλΠϜͰૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
    • ௕͘ͳͬͨ৔߹ͷݟͨ໨ΛνΣοΫͰ͖Δ
    23
    

    View Slide

24. ᶆσόοά࡞ۀ(Stetho)
    

    View Slide

25. ᶆσόοά࡞ۀ(Stetho)
    View Tree
    

    View Slide

26. ᶆσόοά࡞ۀ(Stetho)
    View Properties
    

    View Slide

27. ᶆσόοά࡞ۀ(Stetho)
    

    View Slide

28. ᶆσόοά࡞ۀ(Stetho)
    

    View Slide

29. ᶆσόοά࡞ۀ(Stetho)
    text෦෼Λબ୒ˍೖྗ
    

    View Slide

30. ᶆσόοά࡞ۀ(Stetho)
    

    View Slide

31. ᶆσόοά࡞ۀ(Stetho)
    

    View Slide

32. ᶆσόοά࡞ۀ(։ൃऀπʔϧ)
    • ઃఆ > ։ൃऀ޲͚Φϓγϣϯ > ϨΠΞ΢τڥքΛදࣔ
    • ڥ໨͕Ͳ͜ʹ͋Δ͔ܶతʹ෼͔Γ΍͘͢ͳΔ
    32
    

    View Slide

33. ᶆσόοά࡞ۀ(Sketch)
    • σβΠϯҊʹεΫγϣΛॏͶͯඍௐ੔Λ܁Γฦ͢
    • OpacityΛ80%ʹͯ͠ॏͶΔ
    33
    

    View Slide

34. Ͱ͖͕͋Γ
    34
    

    View Slide

35. whoami
    • twitter:@ymnd, github:@ymnder
    • Application Engineer
    • Android ೔ܦిࢠ൛ΞϓϦ
    • Android ࢴ໘ϏϡʔΞʔΞϓϦ
    • ٕज़ॻయ̐Ͱ೔ܦిࢠ൛ͷ஌ݟΛ·ͱΊͨຊΛग़͠·͢ɻ
    35
    

    View Slide

36. Design΍͍͖ͬͯ
    

    View Slide