[社内LT]あたらしいMaterial Design

by きりみん

Slide 1

Slide 1 text

͋ͨΒ͍͠Material Design @kirimin

Slide 2

Slide 2 text

͋ͨΒ͍͠Material Design • Material Theming • New Components

Slide 3

Slide 3 text

͋ͨΒ͍͠Material Design • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕௥Ճ͞Εͨ ଞɺComponentsʹ΋ଟ͘ͷมߋ͕͋ͬͨɻ

Slide 4

Slide 4 text

Material Themingʁ • ϚςϦΞϧσβΠϯΛΞϓϦͷϒϥϯυ༻ʹ ΧελϚΠζ͢ΔͨΊͷࢦ਑ɻ • ΧϥʔύϨοτ΍ϘλϯͳͲͷؙ֯ͷܗͳͲ ΛมߋͰ͖Δɻ

Slide 5

Slide 5 text

Material Themingʁ

Slide 6

Slide 6 text

Material Themingʁ • Material Theme Editorͱ͍͏΋ͷ͕ެ։͞Εͨɻ • Material ThemingΛ࡞ΕΔπʔϧɻ • ݱঢ়͸SketchͷPluginͱͯ͠༻ҙ͞Ε͍ͯΔɻ • σβΠϯϞοΫͱͯ͠ग़ྗग़དྷΔ͕ɺAndroidϓϩ δΣΫτͷThemeϑΝΠϧͱͯ͠ΠϯϙʔτͰ͖ͨ Γ͢ΔΘ͚Ͱ͸ͳ͍Β͍͠ɻ

Slide 7

Slide 7 text

New Components • ϚςϦΞϧσβΠϯΨΠυϥΠϯࣗମ΋େ෯ʹߋ৽͞Εɺ৽͠ ͍Component͕ଟ͘௥Ճ͞Εͨɻ • App bars:bottom • Backdrop • Banners • Extended FAB • Progress indicators

Slide 8

Slide 8 text

App bars:bottom

Slide 9

Slide 9 text

App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔ΍ϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯ΁ͷΞΫηεΛఏڙ͢Δɻ

Slide 10

Slide 10 text

When to use • ͲΜͳ࣌ʹ࢖͏΂͖͔ • ϞόΠϧσόΠεݶఆ • φϏήʔγϣϯυϩϫʔ΁ͷΞΫηε • ͔̎Β̑ͷΞΫγϣϯ • App babrs: topͱಉ࣌ʹ࢖͏͜ͱ΋Մ • ͲΜͳ࣌ʹ࢖͏΂͖Ͱ͸ͳ͍͔ • Bottom Navigation Bar(Լλϒ)Λར༻ͨ͠ΞϓϦ • ୯Ұͷը໘΋͘͠͸ΞΫγϣϯ͕ͳ͍ΞϓϦ

Slide 11

Slide 11 text

Backdrop

Slide 12

Slide 12 text

Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ੒͞ΕΔɻ όοΫϨΠϠʔ͸ΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹ͸ͦΕΒͷૢ࡞΍௨஌Λදࣔɻ

Slide 13

Slide 13 text

Backdrop • όοΫϨΠϠʔ͸extend͢ΔϔομʔΈ͍ͨͳΠ ϝʔδʁಈըϓϨΠϠʔ΍ΤσΟλʔͳͲૢ࡞͕த ৺ͷΞϓϦͰ࢖ΘΕΔΠϝʔδ͔΋͠Εͳ͍ɻ

Slide 14

Slide 14 text

Banners

Slide 15

Slide 15 text

Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Banners͸ը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ

Slide 16

Slide 16 text

Banners • Banners͸ಉ࣌ʹҰ͔ͭ͠දࣔͤͯ͞͸͍͚ͳ͍ • ը໘಺NotiﬁcationΈ͍ͨͳҐஔ͚ͮʁ • ࠓ·Ͱख࡞Γ͍͓ͯͨ͠஌ΒͤόφʔͷΨΠυϥ ΠϯԽ

Slide 17

Slide 17 text

Floating Action Button • ԡԼ࣌ͷΞΫγϣϯͷΨΠυϥΠϯԽ

Slide 18

Slide 18 text

Floating Action Button • Extended FAB͕௥Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ ελΠϧʹग़དྷΔΑ͏ʹ

Slide 19

Slide 19 text

Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બ΂ΔΑ͏ʹ ͳͬͨ

Slide 20

Slide 20 text

Text Fields • ̎ͭͷλΠϓ͸ಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔͸ΞϓϦͷελΠϧʹґଘ͢Δ

Slide 21

Slide 21 text

·ͱΊ • ϚςϦΞϧσβΠϯΨΠυϥΠϯ͸೔ʑਐԽ͍ͯ͠Δɻ • ΨΠυϥΠϯʹ͸ͳ͍͕σβΠφʔ͕ಠࣗʹఆ͍ٛͯ͠ ͨΑ͏ͳComponent͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹ͸ࠓ·Ͱʮ͜Ε͸ඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ ͪΐͬͱෳࡶͳ૝͍ʹͳΔ͜ͱ΋

Slide 22

Slide 22 text

͓ΘΓ