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

Android Goodbye `shape`

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`.

Shun Hosaka

September 28, 2018
Tweet

More Decks by Shun Hosaka

Other Decks in Technology

Transcript

  1. Α͘࢖͏ϓϩύςΟ ΧςΰϦ 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 ԡͨ࣌͠ͳͲɺεςʔτ͝ͱͷΞχϝʔγϣϯΛม͑ΒΕΔɻ
  2. Ϗϡʔͷεϖʔεͷ࿩ • margin : ViewͷྖҬ֎ͱͷεϖʔε • padding : View಺ͷίϯςϯͱͷεϖʔε(ButtonͩͱɺTextͳͲ ίϯςϯπ͸ViewʹΑΔ)

    • inset : ViewͷྖҬͱDrawableͱͷεϖʔε˞Ө͸ؚ·ͳ͍ insetϓϩύςΟ΋ɺશ෦ʹ͖͘Θ͚͡Όͳ͍ʁࣗ࡞ͷdrawableͳ ͲͰ΋InsetͰͳ͍ͱޮ͔ͳ͍͔΋͠Εͳ͍ :thinking:
  3. MaterialShapeDrawable1 • MaterialShapeDrawable : ը૾৘ใɻ৭ͱ͔MaterialDesignͬΆ͍ ΋ͷΛࢦఆͰ͖Δɻ • ShapePathModel : ύε৘ใ͚ͩ؅ཧͯ͠ΔϞσϧ

    • (Treatment) • CornerTreatment : ֯ͷύε੔ܗ͕Ͱ͖Δɻ • EdgeTreatment : ลͷύε੔ܗ͕Ͱ͖Δɻ 1 https:/ /github.com/material-components/material-components-android/blob/8f7dc21a27880eed391f45548a40de8189f31172/docs/theming/Shape.md
  4. ໼ҹϘλϯͷ࣮ࡍͷίʔυ 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()
  5. 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