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

Material Components for Android触ってみる

Material Components for Android触ってみる

きりみん

May 23, 2018
Tweet

More Decks by きりみん

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. App bars:bottom

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Floating Action Button
    • Extended FAB͕௥Ճ
    • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ
    ελΠϧʹग़དྷΔΑ͏ʹ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ४උ׬ྃʙ

    View full-size slide

  21. ͔ͭͬͯΈΑ͏

    View full-size slide

  22. Text field
    • ී௨ͷEdit Textͱಉ͡Α͏ʹ࢖͏͚ͩ
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="test">
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

    View full-size slide

  23. Text field
    • styleΛมߋ
    style="@style/
    Widget.MaterialComponents.TextInputLayout.OutlineBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="test">
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

    View full-size slide

  24. Text field
    • Ͱ͖ͨʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide