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
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
830
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
自己的售票系統自己做！
Avatar for 高見龍 eddie
0
430
Claude Code 10連ガチャ
Avatar for uhyo uhyo
3
650
エンジニア採用と 技術広報の取り組みと注力点/techpr1112
Avatar for Ichiro Nishiuma nishiuma
0
130
探求の技術
Avatar for azukiazusa azukiazusa1
3
800
Flutterコントリビューションのススメ
Avatar for Koji Wakamiya d_r_1009
1
340
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
3
1.3k
手を動かしながら学ぶデータモデリング - 論理設計から物理設計まで / Data modeling
Avatar for soudai sone soudai
PRO
9
3k
技術の総合格闘技！？AIインフラの現在と未来。
Avatar for ebiken ebiken
PRO
0
250
AWS資格は取ったけどIAMロールを腹落ちできてなかったので、年内に整理してみた
Avatar for Hiroto hiro_eng_
0
180
CDKの魔法を少し解いてみる ― synth・build・diffで覗くIaCの裏側 ―
Avatar for Nagai Takafumi takahumi27
1
110
エンジニアに定年なし！ AI時代にキャリアをReboot — 学び続けて未来を創る
Avatar for JunjiKoide junjikoide
0
180
ソフトウェアエンジニアとデータエンジニアの違い・キャリアチェンジ
Avatar for k.muguruma mtpooh
1
740

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
24
1.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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