Material Components for Android触ってみる

Transcript

1. Material Components for Android ৮ͬͯΈΔ @kirimin

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

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

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

5. New Components (Ұ෦) • App bars:bottom • Backdrop • Banners

   • Extended FAB • Progress indicators

6. App bars:bottom

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

8. Backdrop

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

10. Banners

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

12. Floating Action Button • Extended FAB͕௥Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ

    ελΠϧʹग़དྷΔΑ͏ʹ

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

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

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

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

17. Get started • ͍ͭ΋ͷ allprojects { repositories { jcenter() maven

    { url "https://maven.google.com" } } }

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

    // ... }

19. compileSdk • compileSdkVersionΛ'android-P'ʹ android { compileSdkVersion 'android-P' defaultConfig { applicationId

    "com.example.m00008.trymaterialcomponents" minSdkVersion 21 targetSdkVersion 27 ...

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

    • Theme.MaterialComponents.Light.NoActionBar • Theme.MaterialComponents.Light.DarkActionBar

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

22. ४උ׬ྃʙ

23. ͔ͭͬͯΈΑ͏

24. Text field • ී௨ͷEdit Textͱಉ͡Α͏ʹ࢖͏͚ͩ <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="test"> <com.google.android.material.textfield.TextInputEditText

    android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout>

25. Text field • styleΛมߋ <com.google.android.material.textfield.TextInputLayout style="@style/ Widget.MaterialComponents.TextInputLayout.OutlineBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="test">

    <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.google.android.material.textfield.TextInputLayout>

26. Text field • Ͱ͖ͨʂ

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

28. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠

29. ͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొ࿥ͱ͍͍Ͷ ͓Ͷ͕͍͠·͢