Android Goodbye `shape`

231ca3ad65e9b2ef1172e06ff0e9612c?s=47 Shun Hosaka
September 28, 2018

Android Goodbye `shape`

MaterialDesignThemingに対応したアプリを個人の仕事で作ったのですが、その中で使用したmaterial-component-androidのMaterialButtonを始めとした新しいViewクラスを使うと、快適だとおう話をします。
---
I made an new Android app using material-component-android library.
This slides talk about "You do not have to make an Shape XML anymore." but comming soon new material design `shape`.

231ca3ad65e9b2ef1172e06ff0e9612c?s=128

Shun Hosaka

September 28, 2018
Tweet

Transcript

  1. Goodbye shape !

  2. About me • Accounts • ΞΧ΢ϯτ໊ɿ Reyurnible • Work: •

    ϑϦʔϥϯε • ΞϓϦΤϯδχΞͳͲ
  3. ͸͡Ίʹ ࠷ۙɺ1͔ΒAndroidXͱɺMaterialThemingʹରԠͨ͠ΞϓϦΛ࡞Δ ػձ͕͋Γ·ͨ͠ɻ ͦͷதͰײͨ͡ɺ৽͍͠MaterialDesignϥΠϒϥϦͷັྗΛ͝঺հ Ͱ͖Ε͹ͱࢥ͍·͢ɻ

  4. ࠓ೔࿩͢͜ͱ ࠓ·Ͱɺ͍Ζ͍Ζ࡞ͬͯͨXMLը૾Λ࡞Βͳͯ͘΋͍͍ͩͨͷϘ λϯͳͲͷσβΠϯΛ࡞ΕΔΑ͏ʹͳΓ·ͨ͠ɻ ࠓ೔͸ओʹϘλϯͷ࿩Λ͠·͢ɻ ʢεϥΠυ࡞ͬͯͨΒɺϘλϯͷ࿩Ͱ͍ͬͺ͍ʹ ! ʣ

  5. MaterialTheming MaterialDesignΛɺ࣮ࡍͷΞϓϦʹ߹ΘͤͯΧελϚΠζͰ͖ΔΑ ͏ʹগ͠΍ΘΒ͔ͨ͘͠΋ͷɻ1 MaterialThemingΛ࣮૷֤ͨ͠ϓϥοτϑΥʔϜ͝ͱͷ࣮૷ͳͲΛ ΋ఏڙ͞Ε͍ͯΔ[^2] 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md

  6. MaterialButton MaterialDesign Guidline1ͷϘλϯΛ࣮૷ͨ͠ϏϡʔΫϥεɻ material-designͷϥΠϒϥϦͷҰ෦ͱͯ͠ఏڙ͞Ε͍ͯΔɻ ࣮૷͸ɺAppCompatButtonΛϕʔεʹ͍ͯ͠Δ͕ɺΨΠυϥΠϯͷ جຊతͳ࣮૷͕ೖ͓ͬͯΓ͔ͳΓߴػೳɻ 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md

  7. σϑΥϧτͰ࣮૷Ͱ͖Δ΋ͷ

  8. Α͘࢖͏ελΠϧ Ϙλϯ ελΠϧ ؙ֯Ϙλϯ @style/Widget.MaterialComponents.Button ΞΠίϯϘλϯ @style/Widget.MaterialComponents.Button.Icon ςΩετϘλϯ @style/ Widget.MaterialComponents.Button.TextButton

    ֎࿮Ϙλϯ @style/ Widget.MaterialComponents.Button.OutlinedBut ton
  9. Α͘࢖͏ϓϩύςΟ ΧςΰϦ property ໾ׂ େ͖͞ android:inset λονྖҬ಺Ͱͷେ͖͞Λม͑ΒΕΔɻσϑΥϧτͰɺtopͱ bottomʹ4dp͍͍ͭͯΔɻ ΞΠίϯ app:icon

    ΞΠίϯΛදࣔͤ͞ΒΕΔɻdrawableLeftͷ্Ґޓ׵ɻ app:iconTint ΞΠίϯͷ৭Λม͑ΒΕΔɻmode΋ผͰࢦఆͰ͖Δɻ app:iconGravity ΞΠίϯͷҐஔΛςΩετʹ߹ΘͤΔ͔ɺશମʹ߹ΘͤΔ͔ܾΊ ΒΕΔɻ app:iconPadding ΞΠίϯͱͷڑ཭Λม͑ΒΕΔɻ ֯ app:cornerRadius Ϙλϯͷ֯ͷRadiusΛม͑ΒΕΔɻ ࿮ઢ app:strokeColor ઢͷ৭Λม͑ΒΕΔɻ app:strokeWidth ଠ͞Λม͑ΒΕΔɻ Ξχϝʔγϣϯ app:rippleColor Rippleͷ৭Λม͑ΒΕΔɻ android:stateListAnimator ԡͨ࣌͠ͳͲɺεςʔτ͝ͱͷΞχϝʔγϣϯΛม͑ΒΕΔɻ
  10. Ϗϡʔͷεϖʔεͷ࿩ • margin : ViewͷྖҬ֎ͱͷεϖʔε • padding : View಺ͷίϯςϯͱͷεϖʔε(ButtonͩͱɺTextͳͲ ίϯςϯπ͸ViewʹΑΔ)

    • inset : ViewͷྖҬͱDrawableͱͷεϖʔε˞Ө͸ؚ·ͳ͍ insetϓϩύςΟ΋ɺશ෦ʹ͖͘Θ͚͡Όͳ͍ʁࣗ࡞ͷdrawableͳ ͲͰ΋InsetͰͳ͍ͱޮ͔ͳ͍͔΋͠Εͳ͍ :thinking:
  11. Ϗϡʔͷεϖʔεͷ࿩

  12. ·ͱΊ • MaterialButton͍͢͝ • ͍͍ͩͨ͸ϓϩύςΟͱελΠϧͰ࣮૷Ͱ͖Δ • Ξχϝʔγϣϯͱ͔΋͍͍ײ͡ʹ෇͘ͷͰɺͰ͖Δ͚ͩελΠ ϧͱϓϩύςΟΛ࢖͏

  13. ͜ΕɺͲ͏΍Δͷ͔ʁ

  14. Welcome new shape !

  15. MaterialComponentͷ Shapeͷঢ়گ1 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md

  16. MaterialShapeDrawable1 • MaterialShapeDrawable : ը૾৘ใɻ৭ͱ͔MaterialDesignͬΆ͍ ΋ͷΛࢦఆͰ͖Δɻ • ShapePathModel : ύε৘ใ͚ͩ؅ཧͯ͠ΔϞσϧ

    • (Treatment) • CornerTreatment : ֯ͷύε੔ܗ͕Ͱ͖Δɻ • EdgeTreatment : ลͷύε੔ܗ͕Ͱ͖Δɻ 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md
  17. ࢖ͬͯΈͨ

  18. ໼ҹϘλϯͷ࣮ࡍͷίʔυ val shapePathModel = ShapePathModel().apply { // CutCornerTreatimentͱɺRoundedCornerTreatment͕༻ҙ͞Ε͍ͯΔ val cornerTreatment

    = CutCornerTreatment(resources.getDimension(R.dimen.btn_half_cut_corner_size)) topRightCorner = cornerTreatment bottomRightCorner = cornerTreatment // TriangleEdgeTreatment͕༻ҙ͞Ε͍ͯͯɺࡾ֯ʹ੾Γൈ͚Δɻ leftEdge = TriangleEdgeTreatment(resources.getDimension(R.dimen.btn_half_cut_corner_size), true) } val shapeDrawable = MaterialShapeDrawable(shapePathModel).apply { // MaterialButtonͱಉ༷͡ͳઃఆ͕Ͱ͖Δ setTint(ContextCompat.getColor(this@MainActivity, R.color.colorAccent)) } // toRipple͸ExtensionɻΠϯλϥΫγϣϯ͚ͭΔͷ͸͔ͳΓେมɻ sharp_cut_button.background = shapeDrawable.toRipple()
  19. ·ͩ໰୊͸৭ʑ͋Δ • BackgroundͷDrawableΛίʔυͰࢦఆ͢Δඞཁ͕͋Δ • ίʔυͰࢦఆ͢ΔͱɺInsetͱ͔Tintͱ͔ɺsteteList~~ͱ͔৭ʑແ ࢹ͞ΕΔ • ࣗ࡞ͷCornerTreatmentͱEdgeTreatmentΛ࡞Δͷ͸೉͍͠

  20. Comming Soon StyleͰશମͰɺCutʹ͢Δ͔Ͳ͏͔ͳͲΛࢦఆͰ͖ΔΑ͏ʹͳΔʁ 1 <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> ... <item name="cornerRadiusPrimary">8dp</item>

    <item name="cornerStylePrimary">cut</item> <item name="cornerRadiusSecondary">4dp</item> <item name="cornerStyleSecondary">cut</item> ... </style> 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md
  21. ·ͱΊ • ShapeͷStyleͰͷαϙʔτ͕଴ͪԕ͍͠ • Ͳ͏ͯ͠΋Χοτ͔ͨͬͨ͠ΒɺMaterialShapeDrawableΛ࢖͏ • ΞχϝʔγϣϯͳͲ৭ʑͱ೉͍͠ͷͰϘλϯͰ࢖༻͢ΔͳΒɺ ࣗ෼Ͱύεॻ͖ग़ͯ͠VectorDrawableͷํָ͕

  22. LINKS • ॻ͖ى͜͠ɿhttps:/ /qiita.com/Reyurnible/items/ 20457d2ef9572b0eee94 • αϯϓϧίʔυɿhttps:/ /github.com/Reyurnible/android-shape- sample