1. Drawable
Resouceの話

2. Drawable？
● Androidで表示するUIパーツを１つの描画コン
ポーネントとしてまとめておくもの
● res/drawable/ 以下に置く
○ 画像ファイル（png推奨）
○ xmlファイル（後で説明する決められたフォーマットでか
かれたもの）

3. アクセスの方法
res/drawable/hoge_huga.pngを作成した場合
● Java
○ R.drawable.hoge_huga
● xml(layout等)
○ @drawable/hoge_huga
で呼び出せる

4. 各Drawableリソースの説明
一覧
● bitmap
● 9-patch
● layer-list=LayerDrawable
● selector=StateListDrawable
● level-list=LevelListDrawable
● transition=TransitionDrawable
● inset=InsetDrawable
● clip=ClipDrawable
● scale=ScaleDrawable
● shape=ShapeDrawable

5. bitmap
● 通常の画像リソース
● 入れた画像がそのまま表示されるわけではない
（見た目的には変わってないけど）
○ アプリをビルドするときに最適化が行われて圧縮される
可能性がある
○ メモリ消費を抑えたりするためのものなのであまり意識
しないでもいいかも
○ （あまりないけど）直接のbitmapデータがほしい場合は
（res/raw/）以下において読む込むようにする(アクセス
は前述したdrawableをrawに変えるだけ)

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

7. xml bitmap
bitmapファイルにオプションを
いろいろ定義できる
● アンチエイリアス
● タイル（敷き詰め）
xml
<bitmap
xmlns:android="http://schemas.android.
com/apk/res/android"
android:src="@drawable/ic_launcher"
android:tileMode="repeat" />

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

9. layer-list
● 複数のdrawableを重ねあわせ表示を行うため
のもの
● リソースを使い回したりするときに利用する

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

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

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

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

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

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

16. clip
● 設定したlevelパラメータによって表示度合いを
制御できる
● levelは0~10,000まで(0で何も表示されない)
<clip
xmlns:android="http://schemas.android.
com/apk/res/android"
android:drawable="@drawable/android"
android:clipOrientation="horizontal"
android:gravity="left" />

17. 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%" />

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

19. shapeの利点
● 表示されるときはベクター画像として扱われる
○ 複数解像度に合わせてリソースを用意しないと行けない
という問題がない
● プログラム上での操作が割と容易
○ アクションに応じて色を変えると言った事が行える
● 単純にファイルサイズが小さい
○ アプリサイズを押さえられる

20. shapeだと難しいもの
● 文字のような複雑な図形
○ アイコンなどは画像として用意した方がよい
○ 例：公式アプリのイイネボタン等
○ 共通のリソースが使えるのであればそれを使ってよい
● ボタンなどの縦横比が変化しやすい素材
○ nine-patchでがんばる？
● API level(OSのバージョン)によって一部バグが
存在する（API level 10以下）
● 大体CSSで作成できるものは作れる感覚

21. shapeで作れるものの例
これ
参考
http://www.marineroad.com/staff-blog/4095.html

22. (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="10
android:bottomLeftRadius="10d
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
</shape>
</item>
<item
android:top="32dp"
android:left="2dp"
android:right="2dp"
android:bottom="2dp">
<shape android:shape="rectangl
<solid android:color="#4000000
<corners
android:bottomRightRadius=
android:bottomLeftRadius="1
android:topLeftRadius="0dp"
android:topRightRadius="0dp
</shape>
</item>
</layer-list>

23. layer-list
shape
shape
shape

24. animation系リソース
● res/anim以下に設置
● xmlで記述する
● 設定を書いてあるだけで開始等の制御はJava
側で行う

25. おまけ：デフォルトのリソースも使おう
● 以下に存在するリソースの一覧がある
○ 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 をみる

26. リソースを入れるときのファイル名
● camelCase、もしくはsnake_caseでファイル名
を記述して命名規則は統一
● 命名規則についてはこの辺を参照するといいか
も
○ http://www.kojion.com/android/naming_rule.html
● Androidがデフォルトでおいてあるdrawableリ
ソースはすべてsnake_case
○ 公式に習ってsnake_caseで統一
○ 公式と区別できるようにするためにcamelCaseにする
■ エンジニアと相談して決めましょう

27. Androidの基本的なアイコン命名規則
● アイコン
○ ic_xxxxxx
● ランチャー
○ ic_launcher_xxxxx
● メニュー・アクションバー
○ ic_menu_xxxxx
● ステータスバー
○ ic_stat_notify_xxxx
● タブ
○ ic_tab_xxxxxx
● ダイアログ
○ ic_dialog_xxxxx