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

MDCのButtonのCorner Family

HiroYUKI Seto
February 08, 2019

MDCのButtonのCorner Family

2019/2/8
null

HiroYUKI Seto

February 08, 2019
Tweet

More Decks by HiroYUKI Seto

Other Decks in Technology

Transcript

  1. גࣜձࣾϊϋφɹ੉ށ༏೭
    .%$ͷ#VUUPOͷ
    $PSOFS'BNJMZ

    View Slide

  2. ੉ށ༏೭ˏ[email protected]
    גࣜձࣾϊϋφ
    ΞϓϦΤϯδχΞɺ
    ϦαʔνɺࢪࡦɺσβΠϯ

    View Slide

  3. View Slide

  4. .BUFSJBM%FTJHO$PNQPOFOUT

    View Slide

  5. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="0dp"

    View Slide

  6. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="4dp"

    View Slide

  7. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="18dp"

    View Slide

  8. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="30dp"

    View Slide

  9. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="60dp"

    View Slide

  10. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="70dp"

    View Slide

  11. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="80dp"

    View Slide

  12. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius="90dp"

    View Slide

  13. #VUUPO
    • app:shapeAppearance=

    "@style/ShapeAppearanceOverlay.Cut"
    • app:cornerRadius=“100dp"

    View Slide

  14. ಺෦࣮૷

    View Slide

  15. ొ৔ਓ෺
    • MaterialShapeDrawable
    • Buttonͷഎܠɺ͍͕ͭ͜ݪҼ
    • ShapeAppearanceModel
    • ݟͨ໨Λ࢘ΔϚϯɺ֯΍ลͷShapePathΛ࡞Δ
    • ShapePath
    • ͲΜͳݟͨ໨͔ͷ஋Ϋϥε
    • ShapeAppearancePathProvider
    • ShapeAppearanceModelΛPathʹม׵͢ΔϚϯ

    View Slide

  16. എܠͷඳը
    MaterialShapeDrawable.draw
    MaterialShapeDrawable.drawFillShape
    → MaterialShapeDrawable.drawShape
    → Canvas.drawRoundRect/Canvas.drawPath
    Cut͸drawPath

    View Slide

  17. എܠͷ1BUIͷ࡞੒
    MaterialShapeDrawable.draw
    MaterialShapeDrawable.calculatePath
    → MSD.calculatePathForSize
    → ShapeAppearancePathProvider.calculatePath
    → ShapeAppearancePathProvider.calculatePath

    View Slide

  18. 4IBQF"QQFBSBODF1BUI1SPWJEFSDBMDVMBUF1BUI
    • setCornerPathAndTransform /

    setEdgePathAndTransform

    → ShapePathΛ࡞੒
    • appendCornerPath /appendEdgePath

    → ShapePathΛPathʹม׵

    ɹ→ ShapePath.applyToPath

    ɹɹ→ PathOperation.applyToPath

    View Slide

  19. DPSOFS3BEJVTlEQ

    View Slide

  20. DPSOFS3BEJVTEQ

    View Slide

  21. DPSOFS3BEJVTEQ

    View Slide

  22. $PSOFS'BNJMZ306/%&%

    View Slide

  23. $PSOFS'BNJMZ306/%&%
    • app:cornerRadius="100dp"

    View Slide

  24. $PSOFS'BNJMZ306/%&%
    • app:cornerRadius="100dp"

    View Slide

  25. എܠͷඳը
    MaterialShapeDrawable.draw
    MaterialShapeDrawable.drawFillShape
    → MaterialShapeDrawable.drawShape
    → Canvas.drawRoundRect/Canvas.drawPath

    View Slide

  26. $PSOFS'BNJMZ306/%&%
    • app:cornerRadius="100dp"

    View Slide

  27. ·ͱΊ
    w $VUͰϦϘϯܕʹͳΔͷ͸ҙਤ͍ͯ͠Δ͔
    w ˠڪΒ͘ҙਤ͍ͯ͠ͳ͍
    w എܠͷඳը
    w 3PVOEFEˠ3PVOE3FDU
    w $VUˠ1BUIΛඳը
    w 1BUI΁ͷม׵͸φΠʔϒ

    View Slide

  28. View Slide