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
110

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
4.1k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
3
1.3k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
250
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
5
1.4k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
210
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
460
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
3.4k
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
620
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
1.8k

Other Decks in Technology

See All in Technology
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
430
648cff4d467bb490796a225da8f33797?s=48 onysuke
1
190
404139d782ec666acea93dffc86e089f?s=48 sylph01
3
410
107ea34bd4da51e40f1c30b9ca0c459e?s=48 inomasosan
0
890
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
150
3318abf64ba11ee70d4f5dee62051801?s=48 tagucch
0
180
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
440
325ce6fcd0a74ff78990b8632817da55?s=48 yukihirochiba
0
230
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
1
560
8dea1f82c78ad28481eebe3bcd345504?s=48 shishamous
0
590
D8d463da5ab4a99265ffc1d12e76cbc9?s=48 sagara
1
400
B78199b075c1bbf42f205e04eb2bd764?s=48 himidev
6
3.6k

Featured

See All Featured
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
335
16k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.5k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.6k

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