Drawable Resouceの話

Drawable？

● Androidで表示するUIパーツを１つの描画コンポーネントとしてまとめておくもの

● res/drawable/　以下に置く○ 画像ファイル（png推奨）

○ xmlファイル（後で説明する決められたフォーマットでか

かれたもの）

アクセスの方法

res/drawable/hoge_huga.pngを作成した場合

● Java○ R.drawable.hoge_huga

● xml(layout等)○ @drawable/hoge_huga

で呼び出せる

各Drawableリソースの説明

一覧● bitmap● 9-patch● layer-list=LayerDrawable● selector=StateListDrawable● level-list=LevelListDrawable● transition=TransitionDrawable● inset=InsetDrawable● clip=ClipDrawable● scale=ScaleDrawable● shape=ShapeDrawable

bitmap

● 通常の画像リソース● 入れた画像がそのまま表示されるわけではない

（見た目的には変わってないけど）○ アプリをビルドするときに最適化が行われて圧縮される

可能性がある

○ メモリ消費を抑えたりするためのものなのであまり意識

しないでもいいかも

○ （あまりないけど）直接のbitmapデータがほしい場合は

（res/raw/）以下において読む込むようにする(アクセス

は前述したdrawableをrawに変えるだけ)

bitmap

xml<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/myimage" />

xml bitmap

bitmapファイルにオプションを

いろいろ定義できる

● アンチエイリアス● タイル（敷き詰め）

xml<bitmapxmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/ic_launcher" android:tileMode="repeat" />

9-patch

● 伸縮可能なbitmapリソース● 説明済みなのでスキップ

layer-list

● 複数のdrawableを重ねあわせ表示を行うためのもの

● リソースを使い回したりするときに利用する

layer-list<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item> <bitmap android:src="@drawable/ic_launcher" android:gravity="center" />

</item><item android:top="10dp" android:left="10dp">

<bitmap android:src="@drawable/ic_launcher" android:gravity="center" />

</item><item android:top="20dp" android:left="20dp">

<bitmap android:src="@drawable/ic_launcher" android:gravity="center" />

</item>

</layer-list>

selector

● 各状態によって表示を変化させたりできる● タップ前、タップ中、タップ後で表示するものを変

更したりできる

タップ前タップ中

selector<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:drawable="@drawable/ic_launcher" />

<item android:state_focused="true" android:drawable="@android:drawable/ic_delete" />

<item android:state_hovered="true" android:drawable="@android:drawable/ic_menu_manage" />

<item android:drawable="@android:drawable/ic_menu_edit" /></selector>

level-list

● 閾値を設けてそれによって表示を制御することが出来る● １０回タップしたら色を変える。と言ったことが可能● 閾値は複数設定可能

<?xml version="1.0" encoding="utf-8"?><level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/status_off" android:maxLevel="0" /> <item android:drawable="@drawable/status_on" android:maxLevel="1" /></level-list>

transition

● ２つのdrawableリソースを利用● ２つをフェードで入れ替え表示が出来る● フェード速度は制御可能（開始や速度の制御は

Javaで行う）

<?xml version="1.0" encoding="utf-8"?><transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/on" /> <item android:drawable="@drawable/off" /></transition>

inset

● 特定のdrawableに差し込むためのdrawable● 用意されたdrawable領域に対していれるリソー

スが小さい場合に利用するといい○ layout側でmerginやpadding設定でも代用可能

<?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/background" android:insetTop="10dp" android:insetLeft="10dp" />

clip

● 設定したlevelパラメータによって表示度合いを制御できる

● levelは0~10,000まで(0で何も表示されない)<clipxmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android" android:clipOrientation="horizontal" android:gravity="left" />

scale

● 参照するdrawableリソースの表示サイズを制御できる

<scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/logo" android:scaleGravity="center_vertical|center_horizontal" android:scaleHeight="80%" android:scaleWidth="80%" />

shape

● 幾何学系の図形を描画出来る● 細かい設定を行えば画像リソースを用意しなく

てもよい

shapeの利点

● 表示されるときはベクター画像として扱われる○ 複数解像度に合わせてリソースを用意しないと行けない

という問題がない

● プログラム上での操作が割と容易○ アクションに応じて色を変えると言った事が行える

● 単純にファイルサイズが小さい○ アプリサイズを押さえられる

shapeだと難しいもの

● 文字のような複雑な図形○ アイコンなどは画像として用意した方がよい○ 例：公式アプリのイイネボタン等○ 共通のリソースが使えるのであればそれを使ってよい

● ボタンなどの縦横比が変化しやすい素材○ nine-patchでがんばる？

● API level(OSのバージョン)によって一部バグが存在する（API level 10以下）

● 大体CSSで作成できるものは作れる感覚

shapeで作れるものの例

これ

参考http://www.marineroad.com/staff-blog/4095.html

(xml)<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <gradient android:startColor="#CCEEEEEE" android:endColor="#CC222222" android:angle="90" android:type="linear"/> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape> </item> <item android:top="2dp" android:left="2dp" android:right="2dp" android:bottom="2dp">

<shape android:shape="rectangle"> <gradient android:startColor="#222222" android:endColor="#DDDDDD" android:angle="90" android:type="linear"/> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape></item><item android:top="2dp" android:left="2dp" android:right="2dp" android:bottom="2dp"> <shape android:shape="rectangle"> <gradient android:startColor="#CC222222" android:endColor="#22AAFFAA" android:angle="90" android:type="linear"/>

<corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape></item><item android:top="32dp" android:left="2dp" android:right="2dp" android:bottom="2dp"> <shape android:shape="rectangle"> <solid android:color="#40000000" /> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="0dp" android:topRightRadius="0dp" /> </shape> </item> </layer-list>

layer-list

shape

shape

shape

animation系リソース

● res/anim以下に設置● xmlで記述する● 設定を書いてあるだけで開始等の制御はJava

側で行う

おまけ：デフォルトのリソースも使おう

● 以下に存在するリソースの一覧がある

○ http://developer.android.com/reference/android/R.drawable.html

● 実際に表示されるとどういうものかを見たいとき

○ http://androiddrawableexplorer.appspot.com/● ただしOSのversionによって表示されるものが異なる場合あ

り

● 実機で確認したほうが良い

○ http://qiita.com/gfx/items/b0e36c4f871b2018c42a● 上のリストに存在しないが実際あるものもある

○ 各versionのSDKのdata/res/drawable-mdpi　をみる

リソースを入れるときのファイル名

● camelCase、もしくはsnake_caseでファイル名を記述して命名規則は統一

● 命名規則についてはこの辺を参照するといいかも○ http://www.kojion.com/android/naming_rule.html

● Androidがデフォルトでおいてあるdrawableリソースはすべてsnake_case○ 公式に習ってsnake_caseで統一○ 公式と区別できるようにするためにcamelCaseにする

■ エンジニアと相談して決めましょう

Androidの基本的なアイコン命名規則

● アイコン○ ic_xxxxxx

● ランチャー○ ic_launcher_xxxxx

● メニュー・アクションバー○ ic_menu_xxxxx

● ステータスバー○ ic_stat_notify_xxxx

● タブ○ ic_tab_xxxxxx

● ダイアログ○ ic_dialog_xxxxx