【第2回】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...

ハッシュタグ

##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をした。これはビットマップ（画像）を使っていたが、今回はできるだけ画像を使わずに、どれだけこった表現ができるかを調べてみた。

•･画像を使わなくてもできる表現をデザイナーが徹底解析！

11..コードのみで　可能な表現

WebでいうところのCSSと同じと考えるとよい。グラデーション、影などCSS3で新たに加わった

•･仕組みを知れば、いろいろと応用がきく（かもしれない）

22..デザインが　組み込まれる仕組み

bbuuttttoonn__bbgg..ppnngg

bbuuttttoonn__bbgg ..ppnngg..99

main.xml

<Button android:layout_width="wrap_content"

android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />

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

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

main.xml

pphhoottoo..ppnngg


android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" />

main.xml

撮影する


android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" />

main.xml

撮影する


android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" />

main.xml

撮影する


android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" android:padding="10dp" />

main.xml

撮影する


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

main.xml

撮影する


android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />

main.xml

撮影する



main.xml

bbuuttttoonn__bbgg..99..ppnngg



main.xml

<shape android:shape="rectangle" > <size android:height="100dp" android:width="100dp" /> <solid android:color="#cc2f2f2f" /></shape>

button_bg.xml

drawable-hdpi

drawable-mdpi

drawable-ldpi

layouts

main.xml

values

strings.xml

res

drawable-xhdpi

iimmgg

hhttmmll

ccssss

JJAAVVAA構造

飾�り

drawable-hdpi

drawable-mdpi

drawable-ldpi

layouts

main.xml

values

strings.xml

res

drawable-xhdpi

iimmgg

hhttmmll

ccssss

JJAAVVAA

構造

飾�り

drawable xxmmll

<<sshhaappee>>

重要！

コードでグラフィックを

表現するためのタグ

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="xxxxxx" >

</shape>

ここにいろいろ書くよ

http://schemas.android.com/apk/res/android


rreeccttaannggllee

長方形角丸長方形

oovvaall

円

lliinnee

線�

rriinngg

リング

rreeccttaannggllee


rreeccttaannggllee


<shape android:shape="rectangle"></shape>

rreeccttaannggllee


<shape android:shape="rectangle">

</shape>

<size android:width="100dp" android:height="50dp" />

rreeccttaannggllee



</shape>

<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" />

rreeccttaannggllee



</shape>

<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" /><stroke android:width="2dp" android:color="#000" />

rreeccttaannggllee



</shape>

<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" /><stroke android:width="2dp" android:color="#000" /><corners android:radius="10dp" />

rreeccttaannggllee


<shape android:shape="rectangle"></shape>

rreeccttaannggllee



</shape>

<gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" />

rreeccttaannggllee



</shape>

<gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> android:angle="90" />

rreeccttaannggllee



</shape>

<gradient android:startColor="#000" android:endColor="#fff" />

rreeccttaannggllee



</shape>

<gradient android:startColor="#fff" android:endColor="#000" />

rreeccttaannggllee



</shape> android:type="radial" />


rreeccttaannggllee



</shape>

android:type="radial" />


android:gradientRadial ="50" />

rreeccttaannggllee



</shape>

android:type="radial" />


android:gradientRadial ="33" />

<<sshhaappee>>タグでできること

ポイント！

<size><solid>

<stroke><corners>

<gradient><padding>

大きさ

塗り

線�

角丸

グラデーション

内側の余白

<size><solid>

<stroke><corners>

<gradient><padding>

大きさ

塗り

線�

角丸

グラデーション

内側の余白

wwiiddtthh,, hheeiigghhtt

bbaacckkggrroouunndd--ccoolloorr

bboorrddeerr

bboorrddeerr--rraaddiiuuss

ggrraaddiieenntt

ppaaddddiinngg

cceenntteerrCCoolloorr

ssttaarrttCCoolloorr

eennddCCoolloorr

ssttrrookkee

cceenntteerrCCoolloorr


eennddCCoolloorr

ssttrrookkee

×


eennddCCoolloorr

ssttrrookkee

×


eennddCCoolloorr

rraaddiiaall

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

cceenntteerrXXcceenntteerrYY

ssttrrookkee

×

<<sshhaappee>>タグでできないこと

実は不便

•･上下左右、個別の<<ssttrrookkee>>•･ドロップシャドウ的なもの

カラーコードについて

TTIIPPSS

##cccccc

##000000##88bbcc11ee22

##dd6655ee9944

##ffffaabb7755

TTIIPPSS

##cccccc

##000000

##88bbcc11ee22

##dd6655ee9944

##ffffaabb7755

##33cccccc

##55000000

##660088bbcc11ee22

##2255dd6655ee9944

##5555ffffaabb7755

こういう表現なら

どうする？Q.

99--ppaattcchhccaassee..11

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

ん〜

やっぱりやだ

重ねるccaassee..22

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

sshhaappee

bbiittmmaapp

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

</item> <item>

</item></layer-list>

sshhaappee

bbiittmmaapp

sshhaappee

bbiittmmaapp

sshhaappee

bbiittmmaapp

bbiittmmaapp

sshhaappee

bbiittmmaapp

sshhaappee

nniinnee--ppaattcchh


</item> <item>


sshhaappee



bbiittmmaapp


</item> <item>



bbiittmmaapp

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



android:shadowColor="#5000"android:shadowDx="0"android:shadowDy="-1"android:shadowRadius="1"

text-shadow: 0 -1px 1px rgba(0,0,0,0.5);

XX位置

YY位置

ぼかし

XX位置YY位置

ぼかし

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

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

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

##55000000

##00000000

tteexxttuurree__bbgg..ppnngg

sshhaappeebbiittmmaapp

<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:type="radial" android:gradientRadius="300" /> </shape> </item></layer-list>



まとめ

•･コードでかけるものは、コードで表現•･重ね技<<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>>

•･位置調整も可能

GGoooodd LLuucckk!!

ありがとうございました！

•･ @@ttoommmmmmmmyy•･ ffaacceebbooookk :: 秋葉ちひろ•･次回は1100//44（木）＠CCAAさん（カスタムUUIIについて）

【第2回】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...

Design