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
200

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
420
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
990
Kyashは なぜ使いやすいのか
Avatar for HiroYUKI Seto seto_hi
1
2.5k

Other Decks in Technology

See All in Technology
Findy Team+のSOC2取得までの道のり
Avatar for adachi.ryo rvirus0817
0
230
あなたのWebサービスはAIに自動テストしてもらえる？アクセシビリティツリーで読み解く、AIの『視点』
Avatar for Yusuke Iwaki yusukeiwaki
1
3.3k
組織観点から IAM Identity CenterとIAMの設計を考える
Avatar for NRI Netcom nrinetcom
PRO
1
130
FastAPIの魔法をgRPC/Connect RPCへ
Avatar for MonotaRO monotaro
PRO
0
470
Windows で省エネ
Avatar for Murachi Akira murachiakira
0
140
データエンジニアがこの先生きのこるには...?
Avatar for 10xinc 10xinc
0
400
そのグラフに「魂」は宿っているか？ ～生成AI全盛期におけるデータ可視化手法とライブラリ比較～
Avatar for negi111111 negi111111
2
830
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
Avatar for Shohei Kobayashi srockstyle
3
1.3k
AI×Data×SaaS×Operation
Avatar for SansanTech sansantech
PRO
0
110
いまさら聞けない ABテスト入門
Avatar for 木村彩恵（skmr2348） skmr2348
0
170
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
Avatar for Ken’ichiro Oyama k1low
1
240
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
2
430

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
23k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
880
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k

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