$30 off During Our Annual Pro Sale. View Details »

MDCのButtonのCorner Family

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

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
5k
UI TestやVisual Regression Testを コスパ良くやる
Avatar for HiroYUKI Seto seto_hi
3
1.9k
事業支援というお仕事
Avatar for HiroYUKI Seto seto_hi
0
420
MDCの内部実装から学ぶ
表現力の高いViewの作り方
Avatar for HiroYUKI Seto seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
Avatar for HiroYUKI Seto seto_hi
1
410
Jetpack Compose
Avatar for HiroYUKI Seto seto_hi
2
840
UI改善に繋がるエンジニアの立ち回り
Avatar for HiroYUKI Seto seto_hi
2
4.7k
MDCのBottomAppBarのShadowの実現方法
Avatar for HiroYUKI Seto seto_hi
0
1k
Kyashは なぜ使いやすいのか
Avatar for HiroYUKI Seto seto_hi
1
2.5k

Other Decks in Technology

See All in Technology
セキュリティAIエージェントの現在と未来 / PSS #2 Takumi Session
Avatar for GMO Flatt Security flatt_security
3
1.4k
AI/MLのマルチテナント基盤を支えるコンテナ技術
Avatar for Preferred Networks pfn
PRO
5
720
なぜ使われないのか？──定量×定性で見極める本当のボトルネック
Avatar for KAKEHASHI kakehashi
PRO
1
760
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
640
MAP-7thplaceSolution
Avatar for yukichi0403 yukichi0403
2
250
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
16k
安いGPUレンタルサービスについて
Avatar for Aratako aratako
1
1.6k
.NET 10 のパフォーマンス改善
Avatar for neno nenonaninu
2
4.7k
著者と読み解くAIエージェント現場導入の勘所　Lancers TechBook#2
Avatar for Shumpei Miyawaki smiyawaki0820
7
2.8k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.3k
Oracle Cloud Infrastructure：2025年11月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
110
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
340

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k

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