Material Components for Android触ってみる

by きりみん

Embed

Start on current slide

Slide 1

Slide 1 text

Material Components for Android ৮ͬͯΈΔ @kirimin

Slide 2

Slide 2 text

͜͡͠ΐ͏͔͍ • @kiriminͱ͍͏IDͰੜ׆͍ͯ͠·͢ɻ • όʔνϟϧϢʔνϡʔόʔ • ͱ͖Ͳ͖AndroidΤϯδχΞ • ۓٸࢀઓͰ෇͚ম͖ਕLT

Slide 3

Slide 3 text

͜͡͠ΐ͏͔͍ • ͖ΓΈΜͪΌΜͶΔͱ͍͏ YoutubeνϟϯωϧͰಈըΛ Ξοϓϩʔυ͍ͯ͠·͢ɻ • όʔνϟϧLTͱ͔ϥΠϒίʔ σΟϯάͱ͔ٕज़ωλ΍ͬͯ ·͢ɻ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

New Components (Ұ෦) • App bars:bottom • Backdrop • Banners • Extended FAB • Progress indicators

Slide 6

Slide 6 text

App bars:bottom

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Backdrop

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Banners

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ͰɺͲ͏΍ͬͯ ࣮૷͢Δͷʁʁʁ

Slide 16

Slide 16 text

Material Components • ϚςϦΞϧσβΠϯͷComponentΛ࣮૷͢Δ ͨΊͷGoogleެࣜOSSϥΠϒϥϦ • AndroidҎ֎ʹ΋༷ʑͳϓϥοτϑΥʔϜ޲͚ ʹϥΠϒϥϦΛఏڙ͍ͯ͠Δ

Slide 17

Slide 17 text

Get started • ͍ͭ΋ͷ allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } }

Slide 18

Slide 18 text

Get started • ͍ͭ΋ͷ dependencies { // ... compile 'com.google.android.material:material:1.0.0-alpha1' // ... }

Slide 19

Slide 19 text

compileSdk • compileSdkVersionΛ'android-P'ʹ android { compileSdkVersion 'android-P' defaultConfig { applicationId "com.example.m00008.trymaterialcomponents" minSdkVersion 21 targetSdkVersion 27 ...

Slide 20

Slide 20 text

Material Components Theme Λ࢖͏ • Theme.MaterialComponents • Theme.MaterialComponents.NoActionBar • Theme.MaterialComponents.Light • Theme.MaterialComponents.Light.NoActionBar • Theme.MaterialComponents.Light.DarkActionBar

Slide 21

Slide 21 text

AndroidXʹϦϑΝΫλϦϯά • Android StudioΛ3.2ʹ͢Δඞཁ͋Γ • ϦϑΝΫλϦϯάϝχϡʔ͔ΒRefoctoring to Android XΛબ୒

Slide 22

Slide 22 text

४උ׬ྃʙ

Slide 23

Slide 23 text

͔ͭͬͯΈΑ͏

Slide 24

Slide 24 text

Text ﬁeld • ී௨ͷEdit Textͱಉ͡Α͏ʹ࢖͏͚ͩ

Slide 25

Slide 25 text

Text ﬁeld • styleΛมߋ

Slide 26

Slide 26 text

Text ﬁeld • Ͱ͖ͨʂ

Slide 27

Slide 27 text

ଞ͸ʁ • ݟͨײ͡৽Component͸·ͩ͋Μ·Γ࣮૷͞ Ε͍ͯͳ͍ͬΆ͍... • طଘͷComponent͸ΘΓͱἧͬͯͦ͏ • ଟ෼͍ۙ͏ͪʹ༻ҙ͞ΕΔ͸ͣ...!!!