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

ハッシュタグ
##aaaaddeessiiggnnss

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

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

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

前回
変態99--ppaattcchh

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

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

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

bbuuttttoonn__bbgg..ppnngg

bbuuttttoonn__bbgg ..99 ..ppnngg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

rreeccttaannggllee
長方形 角丸長方形

oovvaall
円

lliinnee
線�

rriinngg
リング

rreeccttaannggllee
長方形 角丸長方形

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

ポイント！
<<sshhaappee>>タグでできること

<size> 大きさ
<solid> 塗り
<stroke> 線�
<corners> 角丸
<gradient> グラデーション
<padding> 内側の余白

<size> 大きさ wwiiddtthh,, hheeiigghhtt
solid> 塗り bbaacckkggrroouunndd--ccoolloorr
troke> 線� bboorrddeerr
rners> 角丸 bboorrddeerr--rraaddiiuuss
dient> グラデーション ggrraaddiieenntt
dding> 内側の余白 ppaaddddiinngg

ssttrrookkee
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr

ssttrrookkee
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr
×

ssttrrookkee
ssttaarrttCCoolloorr
eennddCCoolloorr
×

rraaddiiaall
ssttaarrttCCoolloorr
eennddCCoolloorr

<gradient
android:startColor="#87d1bc"
cceenntteerrXX android:endColor="#00845d"
cceenntteerrYY android:type="radial"
android:gradientRadius="300"
android:centerX="0.2"
android:centerY="0.5" />

ssttrrookkee
×

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

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

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

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

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

ん〜
やっぱりやだ

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

bbiittmmaapp
sshhaappee

bbiittmmaapp
sshhaappee

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

bbiittmmaapp
sshhaappee

bbiittmmaapp
bbiittmmaapp
sshhaappee

bbiittmmaapp
sshhaappee

bbiittmmaapp
sshhaappee

nniinnee--ppaattcchh
sshhaappee

nniinnee--ppaattcchh
sshhaappee

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

nniinnee--ppaattcchh
bbiittmmaapp

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

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

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

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位置

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

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

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

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>

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

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