Weitere ähnliche Inhalte
Ähnlich wie 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips (20)
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
- 1. ハッシュタグ
デザイナーが ##aaaaddeessiiggnnss
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第22回:より凝ったグラフィック
@@GGMMOO yyoouurrss
22001122..99..2200
- 3. ハッシュタグ
##aaaaddeessiiggnnss
がんばって作ったデザインが、
実装後に残念な結果にならないために
なぜ残念になるか?
- 7. 今回のテーマ
より凝ったグラフィック
前回は9-patchをした。
これはビットマップ(画像)を使っていた
が、今回はできるだけ画像を使わずに、ど
れだけこった表現ができるかを調べてみ
た。
- 8. WebでいうところのCSSと
同じと考えるとよい。
11..コードのみで
グラデーション、影など
CSS3で新たに加わった
可能な表現
•・ 画像を使わなくてもできる表現を
デザイナーが徹底解析!
- 23. main.xml
<TextView
android:layout_width="wrap_content"
<shape android:shape="rectangle" >
android:layout_height="wrap_content"
<size
android:text="撮影する"
android:height="100dp"
android:width="100dp" />
<solid android:color="#cc2f2f2f" />
android:textSize="20sp"
</shape>
android:textColor="#fff"
button_bg.xml
android:background=
"@drawable/button_bg"
android:padding="10dp"
/>
- 25. res
drawable
xxmmll
drawable-xhdpi
drawable-hdpi
drawable-mdpi
iimmgg
drawable-ldpi JJAAVVAA
layouts
main.xml hhttmmll
構造
values
strings.xml ccssss
飾�り
- 26. 重要!
<<sshhaappee>>
コードでグラフィックを
表現するためのタグ
- 51. <size> 大きさ
<solid> 塗り
<stroke> 線�
<corners> 角丸
<gradient> グラデーション
<padding> 内側の余白
- 52. <size> 大きさ wwiiddtthh,, hheeiigghhtt
solid> 塗り bbaacckkggrroouunndd--ccoolloorr
troke> 線� bboorrddeerr
rners> 角丸 bboorrddeerr--rraaddiiuuss
dient> グラデーション ggrraaddiieenntt
dding> 内側の余白 ppaaddddiinngg
- 54. ssttrrookkee
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr
- 56. ssttrrookkee
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr
×
- 60. <gradient
android:startColor="#87d1bc"
cceenntteerrXX android:endColor="#00845d"
cceenntteerrYY android:type="radial"
android:gradientRadius="300"
android:centerX="0.2"
android:centerY="0.5" />
- 64. TTIIPP
SS
カラーコードについて
##dd6655ee9944
##cccccc
##88bbcc11ee22
##000000
##ffffaabb7755
- 65. TTIIPP
SS
##cccccc ##33cccccc
##000000 ##55000000
##dd6655ee9944 ##2255dd6655ee9944
##88bbcc11ee22 ##660088bbcc11ee22
##ffffaabb7755 ##5555ffffaabb7755
- 68. ccaassee..11
99--ppaattcchh
•・ グラデーション込みで99--ppaattcchhに
してしまう
- 78. ccaassee..22
重ねる
•・ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
- 96. <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:shadowColor="#5000"
android:shadowDx="0"
android:shadowDy="-1"
android:shadowRadius="1"
android:text="11:20" />
- 101. ##55000000
bbiittmmaapp sshhaappee
##00000000
tteexxttuurree__bbgg..ppnngg
- 104. android:src="@drawable/texture_bg"
android:tileMode="repeat" />
</item>
<item>
<shape>
<gradient
android:startColor="#0000"
android:endColor="#5000"
android:type="radial"
android:gradientRadius="300" />
</shape>
</item>
</layer-list>