MDCのButtonのCorner Family

2019/2/8
null

Transcript

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

   View Slide

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

   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