Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Components for Android触ってみる

Material Components for Android触ってみる

D96c7e61d2f394f1d0af66945181a230?s=128

きりみん

May 23, 2018
Tweet

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. ͜ͷεϥΠυ͕ؾʹೖͬͨΒ νϟϯωϧొ࿥ͱ͍͍Ͷ ͓Ͷ͕͍͠·͢