Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

΍͍͖ͬͯͩʂʂʂ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ᶃࣄલௐࠪͷ࣮ྫ 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ᶆσόοά࡞ۀ(LayoutInspector)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ᶆσόοά࡞ۀ(Stetho)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ᶆσόοά࡞ۀ(Stetho)

Slide 28

Slide 28 text

ᶆσόοά࡞ۀ(Stetho)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ᶆσόοά࡞ۀ(Stetho)

Slide 31

Slide 31 text

ᶆσόοά࡞ۀ(Stetho)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Ͱ͖͕͋Γ 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Design΍͍͖ͬͯ