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
140
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.7k
事業支援というお仕事
seto_hi
0
390
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.7k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
330
Jetpack Compose
seto_hi
2
700
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.5k
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
900
Kyashは なぜ使いやすいのか
seto_hi
1
2.4k
Other Decks in Technology
See All in Technology
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
公共交通データとアプリ制作 - Mini Tokyo 3D の初期制作過程を振り返る
nagix
1
110
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
230
Fediverse Discovery Providers overview
andypiper
0
170
Discovering AI Models
picardparis
4
3.9k
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
170
『GRANBLUE FANTASY: Relink』専任エンジニアチームで回す大規模開発QAサイクル
cygames
0
110
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
250
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
420
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
160
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
610
JEP 480: Structured Concurrency
aya_ebata
0
130
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Ruby is Unlike a Banana
tanoku
96
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
How to train your dragon (web standard)
notwaldorf
85
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Automating Front-end Workflow
addyosmani
1365
200k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
KATA
mclloyd
27
13k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Pragmatic Product Professional
lauravandoore
31
6.2k
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