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

MDCのButtonのCorner Family

Avatar for HiroYUKI Seto HiroYUKI Seto
February 08, 2019
Technology
1
190

MDCのButtonのCorner Family

2019/2/8
null

Avatar for HiroYUKI Seto

HiroYUKI Seto

February 08, 2019
Tweet

More Decks by HiroYUKI Seto

See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
Avatar for HiroYUKI Seto seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
Avatar for HiroYUKI Seto seto_hi
3
1.9k
事業支援というお仕事
Avatar for HiroYUKI Seto seto_hi
0
410
MDCの内部実装から学ぶ
表現力の高いViewの作り方
Avatar for HiroYUKI Seto seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
Avatar for HiroYUKI Seto seto_hi
1
400
Jetpack Compose
Avatar for HiroYUKI Seto seto_hi
2
790
UI改善に繋がるエンジニアの立ち回り
Avatar for HiroYUKI Seto seto_hi
2
4.7k
MDCのBottomAppBarのShadowの実現方法
Avatar for HiroYUKI Seto seto_hi
0
980
Kyashは なぜ使いやすいのか
Avatar for HiroYUKI Seto seto_hi
1
2.5k

Other Decks in Technology

See All in Technology
Oracle Base Database Service：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
20k
広島銀行におけるAWS活用の取り組みについて
Avatar for Masaki Mori[JAWS-UG広島] masakimori
0
140
Backboneとしてのtimm2025
Avatar for yu4u yu4u
4
1.6k
microCMS 最新リリース情報（microCMS Meetup 2025）
Avatar for microCMS microcms
0
110
アジャイルテストで高品質のスプリントレビューを
Avatar for Shigeki Shoji takesection
0
120
Postman MCP 関連機能アップデート / Postman MCP feature updates
Avatar for Yoichi Kawasaki yokawasa
0
150
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
Avatar for nextbeat-engineer nextbeatdev
0
140
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
30k
新卒(ほぼ)専業Kagglerという選択肢
Avatar for Ryota nocchi1
1
2.3k
知られざるprops命名の慣習 アクション編
Avatar for uhyo uhyo
11
2.5k
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
Avatar for tnir tnir
3
4.6k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
Avatar for Naomi Yamasaki naospon
2
220

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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