Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MDCのButtonのCorner Family
Search
HiroYUKI Seto
February 08, 2019
Technology
1
190
MDCのButtonのCorner Family
2019/2/8
null
HiroYUKI Seto
February 08, 2019
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
390
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
970
Kyashは なぜ使いやすいのか
seto_hi
1
2.5k
Other Decks in Technology
See All in Technology
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.2k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
680
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.2k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
AI導入の理想と現実~コストと浸透〜
oprstchn
0
140
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
110
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
650
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
580
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Writing Fast Ruby
sferik
628
62k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Transcript
גࣜձࣾϊϋφɹށ༏೭ .%$ͷ#VUUPOͷ $PSOFS'BNJMZ
ށ༏೭ˏTFUP@IJ גࣜձࣾϊϋφ ΞϓϦΤϯδχΞɺ ϦαʔνɺࢪࡦɺσβΠϯ
None
.BUFSJBM%FTJHO$PNQPOFOUT
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="0dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="4dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="18dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="30dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="60dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="70dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="80dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius="90dp"
#VUUPO • app:shapeAppearance= "@style/ShapeAppearanceOverlay.Cut" • app:cornerRadius=“100dp"
෦࣮
ొਓ • MaterialShapeDrawable • Buttonͷഎܠɺ͍͕ͭ͜ݪҼ • ShapeAppearanceModel • ݟͨΛ࢘ΔϚϯɺ֯ลͷShapePathΛ࡞Δ •
ShapePath • ͲΜͳݟ͔ͨͷΫϥε • ShapeAppearancePathProvider • ShapeAppearanceModelΛPathʹม͢ΔϚϯ
എܠͷඳը MaterialShapeDrawable.draw MaterialShapeDrawable.drawFillShape → MaterialShapeDrawable.drawShape → Canvas.drawRoundRect/Canvas.drawPath CutdrawPath
എܠͷ1BUIͷ࡞ MaterialShapeDrawable.draw MaterialShapeDrawable.calculatePath → MSD.calculatePathForSize → ShapeAppearancePathProvider.calculatePath → ShapeAppearancePathProvider.calculatePath
4IBQF"QQFBSBODF1BUI1SPWJEFSDBMDVMBUF1BUI • setCornerPathAndTransform / setEdgePathAndTransform → ShapePathΛ࡞ • appendCornerPath /appendEdgePath
→ ShapePathΛPathʹม ɹ→ ShapePath.applyToPath ɹɹ→ PathOperation.applyToPath
DPSOFS3BEJVTlEQ
DPSOFS3BEJVTEQ
DPSOFS3BEJVTEQ
$PSOFS'BNJMZ306/%&%
$PSOFS'BNJMZ306/%&% • app:cornerRadius="100dp"
$PSOFS'BNJMZ306/%&% • app:cornerRadius="100dp"
എܠͷඳը MaterialShapeDrawable.draw MaterialShapeDrawable.drawFillShape → MaterialShapeDrawable.drawShape → Canvas.drawRoundRect/Canvas.drawPath
$PSOFS'BNJMZ306/%&% • app:cornerRadius="100dp"
·ͱΊ w $VUͰϦϘϯܕʹͳΔͷҙਤ͍ͯ͠Δ͔ w ˠڪΒ͘ҙਤ͍ͯ͠ͳ͍ w എܠͷඳը w 3PVOEFEˠ3PVOE3FDU
w $VUˠ1BUIΛඳը w 1BUIͷมφΠʔϒ
None