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

MDCのButtonのCorner Family

Ad449f3f4e595ade283a30c4f66010be?s=47 HiroYUKI Seto
February 08, 2019
Technology
1
100

MDCのButtonのCorner Family

2019/2/8
null

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

February 08, 2019
Tweet

More Decks by HiroYUKI Seto

See All by HiroYUKI Seto
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
220
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
5
1.3k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
200
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
430
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
3.1k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
590
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
1.8k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
18k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
3
640

Other Decks in Technology

See All in Technology
Fb025419ed38f98df595eb2eafc859f4?s=48 ihcomega56
2
850
C265a1a7dadb2713ff2262025e91d133?s=48 akabekobeko
0
160
462feb0fe0493c40d55650da664e8773?s=48 clustervr
PRO
0
150
D8730970396729af16546cc69ce63b44?s=48 shwars
0
110
Fecdd3417cd7375cc0bd0352d72db27e?s=48 1ftseabass
PRO
0
110
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
9
6.1k
525442fc70ca92f82ae503f826956137?s=48 finengine
0
340
Fe475df4e28cef1175a787fb032e0489?s=48 bolonio
4
560
7e3cdbf62ad6e34cf379443678b1b378?s=48 sogaoh
2
440
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
220
73dfdf58c8072916f1b4c62c93279fd7?s=48 yuzoiwasaki
0
170
Abea0dcdfdd2fccad64461d1e2798864?s=48 hacker2202
0
100

Featured

See All Featured
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
7
450
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
53k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
70
3.6k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
176
14k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
502
36k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
146
12k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
201
9.7k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k

Transcript

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

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

  3. None

  4. .BUFSJBM%FTJHO$PNQPOFOUT

  5. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="0dp"

  6. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="4dp"

  7. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="18dp"

  8. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="30dp"

  9. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="60dp"

  10. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="70dp"

  11. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="80dp"

  12. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="90dp"

  13. #VUUPO • app:shapeAppearance=
 "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius=“100dp"

  14. ಺෦࣮૷

  15. ొ৔ਓ෺ • MaterialShapeDrawable • Buttonͷഎܠɺ͍͕ͭ͜ݪҼ • ShapeAppearanceModel • ݟͨ໨Λ࢘ΔϚϯɺ֯΍ลͷShapePathΛ࡞Δ •

    ShapePath • ͲΜͳݟͨ໨͔ͷ஋Ϋϥε • ShapeAppearancePathProvider • ShapeAppearanceModelΛPathʹม׵͢ΔϚϯ

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

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

  18. 4IBQF"QQFBSBODF1BUI1SPWJEFSDBMDVMBUF1BUI • setCornerPathAndTransform /
 setEdgePathAndTransform
 → ShapePathΛ࡞੒ • appendCornerPath /appendEdgePath


    → ShapePathΛPathʹม׵
 ɹ→ ShapePath.applyToPath
 ɹɹ→ PathOperation.applyToPath

  19. DPSOFS3BEJVTlEQ

  20. DPSOFS3BEJVTEQ

  21. DPSOFS3BEJVTEQ

  22. $PSOFS'BNJMZ306/%&%

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

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

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

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

  27. ·ͱΊ w $VUͰϦϘϯܕʹͳΔͷ͸ҙਤ͍ͯ͠Δ͔  w ˠڪΒ͘ҙਤ͍ͯ͠ͳ͍ w എܠͷඳը w 3PVOEFEˠ3PVOE3FDU

    w $VUˠ1BUIΛඳը w 1BUI΁ͷม׵͸φΠʔϒ
  28. None