Download to read offline
android drawable
- 1.
- 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.
- 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.
- 10. layer-list <?xml version="1.0" encoding="utf-8"?> <layer-listxmlns: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.
- 12. selector <?xml version="1.0" encoding="utf-8"?> <selectorxmlns: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.
- 17.
- 18.
- 19. shapeの利点 ● 表示されるときはベクター画像として扱われる ○ 複数解像度に合わせてリソースを用意しないと行けない という問題がない ●プログラム上での操作が割と容易 ○ アクションに応じて色を変えると言った事が行える ● 単純にファイルサイズが小さい ○ アプリサイズを押さえられる
- 20. shapeだと難しいもの ● 文字のような複雑な図形 ○ アイコンなどは画像として用意した方がよい ○例：公式アプリのイイネボタン等 ○ 共通のリソースが使えるのであればそれを使ってよい ● ボタンなどの縦横比が変化しやすい素材 ○ nine-patchでがんばる？ ● API level(OSのバージョン)によって一部バグが 存在する（API level 10以下） ● 大体CSSで作成できるものは作れる感覚
- 21.
- 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.
- 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