より凝ったグラフィック編 http://www.ladybeetle-design.com/androidappdesigns/

1. ハッシュタグ
デザイナーが ##aaaaddeessiiggnnss
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第22回：より凝ったグラフィック
@@GGMMOO yyoouurrss
22001122..99..2200

2. ハッシュタグ
##aaaaddeessiiggnnss

3. ハッシュタグ
##aaaaddeessiiggnnss
がんばって作ったデザインが、
実装後に残念な結果にならないために
なぜ残念になるか？

4. 秋葉ちひろ
•･ @@ttoommmmmmmmyy
•･ デザイナー／アートディレクター
•･ WWeebb系・アプリ系
•･ BBaaiidduuでSSiimmeejjiiの開発のフロント
エンドの一部

5. http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/

6. 前回
変態99--ppaattcchh

7. 今回のテーマ
より凝ったグラフィック
前回は9-patchをした。
これはビットマップ（画像）を使っていた
が、今回はできるだけ画像を使わずに、ど
れだけこった表現ができるかを調べてみ
た。

8. WebでいうところのCSSと
同じと考えるとよい。
11..コードのみで
グラデーション、影など
CSS3で新たに加わった
可能な表現
•･ 画像を使わなくてもできる表現を
デザイナーが徹底解析！

9. 22..デザインが
組み込まれる仕組み
•･ 仕組みを知れば、いろいろと応用
がきく（かもしれない）

10. bbuuttttoonn__bbgg..ppnngg

11. bbuuttttoonn__bbgg ..99 ..ppnngg

12. main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
/>

13. テキストや画像を
表示したい場合

14. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
/>

15. main.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/photo"
/>
pphhoottoo..ppnngg

16. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
/>

17. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
android:textColor="#f00"
/>

18. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
android:textColor="#f00"
android:background="#ccc"
/>

19. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
android:textColor="#f00"
android:background="#ccc"
android:padding="10dp"
/>

20. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
android:textColor="#f00"
android:background=
"@drawable/button_bg"
android:padding="10dp"
/>

21. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
撮影する
android:text="撮影する"
android:textSize="20sp"
android:textColor="#fff"
android:background=
"@drawable/button_bg"
android:padding="10dp"
/>

22. main.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="撮影する"
android:textSize="20sp"
android:textColor="#fff"
android:background=
bbuuttttoonn__bbgg..99..ppnngg
"@drawable/button_bg"
android:padding="10dp"
/>

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"
/>

24. res
drawable-xhdpi
drawable-hdpi
drawable-mdpi
iimmgg
drawable-ldpi
layouts
JJAAVVAA
main.xml hhttmmll
構造
values
strings.xml ccssss
飾�り

25. res
drawable
xxmmll
drawable-xhdpi
drawable-hdpi
drawable-mdpi
iimmgg
drawable-ldpi JJAAVVAA
layouts
main.xml hhttmmll
構造
values
strings.xml ccssss
飾�り

26. 重要！
<<sshhaappee>>
コードでグラフィックを
表現するためのタグ

27. <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="xxxxxx" >
ここにいろいろ書くよ
</shape>

28. rreeccttaannggllee
長方形 角丸長方形

29. oovvaall
円

30. lliinnee
線�

31. rriinngg
リング

32. rreeccttaannggllee
長方形 角丸長方形

33. rreeccttaannggllee
<shape android:shape="rectangle">
</shape>
長方形 角丸長方形

34. rreeccttaannggllee
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="50dp" />
</shape>
長方形 角丸長方形

35. rreeccttaannggllee
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="50dp" />
<solid android:color="#ff64ae" />
</shape>
長方形 角丸長方形

36. rreeccttaannggllee
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="50dp" />
<solid android:color="#ff64ae" />
長方形 角丸長方形
<stroke android:width="2dp"
android:color="#000" />
</shape>

37. rreeccttaannggllee
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="50dp" />
<solid android:color="#ff64ae" />
長方形 角丸長方形
<stroke android:width="2dp"
android:color="#000" />
<corners android:radius="10dp" />
</shape>

38. rreeccttaannggllee
<shape android:shape="rectangle">
</shape>
長方形 角丸長方形

39. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#000"
android:endColor="#fff"
android:centerColor="#f00" />
</shape>
長方形 角丸長方形

40. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#000"
android:endColor="#fff"
android:centerColor="#f00" />
android:angle="90" />
長方形 角丸長方形
</shape>

42. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#000"
android:endColor="#fff" />
</shape>
長方形 角丸長方形

43. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#fff"
android:endColor="#000" />
</shape>
長方形 角丸長方形

44. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#fff"
android:endColor="#000" />
android:type="radial" />
</shape>
長方形 角丸長方形

45. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#fff"
android:endColor="#000" />
android:type="radial" />
android:gradientRadial
長方形 角丸長方形
="50" />
</shape>

47. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#fff"
android:endColor="#000" />
android:type="radial" />
android:gradientRadial
長方形 角丸長方形
="50" />
</shape>

48. rreeccttaannggllee
<shape android:shape="rectangle">
<gradient android:startColor="#fff"
android:endColor="#000" />
android:type="radial" />
android:gradientRadial
長方形 角丸長方形
="33" />
</shape>

50. ポイント！
<<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
×

58. ssttrrookkee
ssttaarrttCCoolloorr
eennddCCoolloorr
×

59. rraaddiiaall
ssttaarrttCCoolloorr
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" />

62. ssttrrookkee
×

63. 実は不便
<<sshhaappee>>タグでできないこと
•･ 上下左右、個別の<<ssttrrookkee>>
•･ ドロップシャドウ的なもの

64. TTIIPP
SS
カラーコードについて
##dd6655ee9944
##cccccc
##88bbcc11ee22
##000000
##ffffaabb7755

65. TTIIPP
SS
##cccccc ##33cccccc
##000000 ##55000000
##dd6655ee9944 ##2255dd6655ee9944
##88bbcc11ee22 ##660088bbcc11ee22
##ffffaabb7755 ##5555ffffaabb7755

66. Q. こういう表現なら
どうする？

68. ccaassee..11
99--ppaattcchh
•･ グラデーション込みで99--ppaattcchhに
してしまう

77. ん〜
やっぱりやだ

78. ccaassee..22
重ねる
•･ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる

79. bbiittmmaapp
sshhaappee

80. bbiittmmaapp
sshhaappee

81. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
sshhaappee
</item>
<item>
bbiittmmaapp
</item>
</layer-list>

83. bbiittmmaapp
sshhaappee

84. bbiittmmaapp
bbiittmmaapp
sshhaappee

85. bbiittmmaapp
sshhaappee

86. bbiittmmaapp
sshhaappee

87. nniinnee--ppaattcchh
sshhaappee

88. nniinnee--ppaattcchh
sshhaappee

89. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
sshhaappee
</item>
<item>
nniinnee--ppaattcchh
</item>
</layer-list>

91. nniinnee--ppaattcchh
bbiittmmaapp

92. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
bbiittmmaapp
</item>
<item>
nniinnee--ppaattcchh
</item>
</layer-list>

93. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="@drawable/texture_bg"
android:tileMode="repeat" />
</item>
<item>
<nine-patch
android:src="@drawable/border" />
</item>
</layer-list>

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" />

97. android:shadowColor="#5000"
android:shadowDx="0" XX位置
android:shadowDy="-1" YY位置
android:shadowRadius="1" ぼかし
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
XX位置 ぼかし
YY位置

98. http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource

101. ##55000000
bbiittmmaapp sshhaappee
##00000000
tteexxttuurree__bbgg..ppnngg

103. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="@drawable/texture_bg"
android:tileMode="repeat" />
</item>
<item>
<shape>
<gradient
android:startColor="#0000"
android:endColor="#5000"

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>

106. まとめ
•･ コードでかけるものは、コードで表現
•･ 重ね技
<<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>>
•･ 位置調整も可能

107. ありがとうございました！
GGoooodd LLuucckk!!
•･ @@ttoommmmmmmmyy
•･ ffaacceebbooookk :: 秋葉ちひろ
•･ 次回は1100//44（木）＠CCAAさん
（カスタムUUIIについて）