Drawable
Resouceの話
Drawable?
● Androidで表示するUIパーツを1つの描画コン
ポーネントとしてまとめておくもの
● 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=LevelListDrawa...
bitmap
● 通常の画像リソース
● 入れた画像がそのまま表示されるわけではない
(見た目的には変わってないけど)
○ アプリをビルドするときに最適化が行われて圧縮される
可能性がある
○ メモリ消費を抑えたりするためのものなのであまり意識...
bitmap
xml
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/myim...
xml bitmap
bitmapファイルにオプションを
いろいろ定義できる
● アンチエイリアス
● タイル(敷き詰め)
xml
<bitmap
xmlns:android="http://schemas.android.
com/apk/r...
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">...
selector
● 各状態によって表示を変化させたりできる
● タップ前、タップ中、タップ後で表示するものを変
更したりできる
タップ前
タップ中
selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<ite...
level-list
● 閾値を設けてそれによって表示を制御することが出来る
● 10回タップしたら色を変える。と言ったことが可能
● 閾値は複数設定可能
<?xml version="1.0" encoding="utf-8"?>
<leve...
transition
● 2つのdrawableリソースを利用
● 2つをフェードで入れ替え表示が出来る
● フェード速度は制御可能(開始や速度の制御は
Javaで行う)
<?xml version="1.0" encoding="utf-8"...
inset
● 特定のdrawableに差し込むためのdrawable
● 用意されたdrawable領域に対していれるリソー
スが小さい場合に利用するといい
○ layout側でmerginやpadding設定でも代用可能
<?xml ver...
clip
● 設定したlevelパラメータによって表示度合いを
制御できる
● levelは0~10,000まで(0で何も表示されない)
<clip
xmlns:android="http://schemas.android.
com/apk/...
scale
● 参照するdrawableリソースの表示サイズを制御
できる
<scale xmlns:android="http://schemas.android.
com/apk/res/android"
android:drawable=...
shape
● 幾何学系の図形を描画出来る
● 細かい設定を行えば画像リソースを用意しなく
てもよい
shapeの利点
● 表示されるときはベクター画像として扱われる
○ 複数解像度に合わせてリソースを用意しないと行けない
という問題がない
● プログラム上での操作が割と容易
○ アクションに応じて色を変えると言った事が行える
● 単純にファイ...
shapeだと難しいもの
● 文字のような複雑な図形
○ アイコンなどは画像として用意した方がよい
○ 例:公式アプリのイイネボタン等
○ 共通のリソースが使えるのであればそれを使ってよい
● ボタンなどの縦横比が変化しやすい素材
○ nine...
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">
<g...
layer-list
shape
shape
shape
animation系リソース
● res/anim以下に設置
● xmlで記述する
● 設定を書いてあるだけで開始等の制御はJava
側で行う
おまけ:デフォルトのリソースも使おう
● 以下に存在するリソースの一覧がある
○ http://developer.android.com/reference/android/R.
drawable.html
● 実際に表示されるとどういうもの...
リソースを入れるときのファイル名
● camelCase、もしくはsnake_caseでファイル名
を記述して命名規則は統一
● 命名規則についてはこの辺を参照するといいか
も
○ http://www.kojion.com/android/n...
Androidの基本的なアイコン命名規則
● アイコン
○ ic_xxxxxx
● ランチャー
○ ic_launcher_xxxxx
● メニュー・アクションバー
○ ic_menu_xxxxx
● ステータスバー
○ ic_stat_not...
Upcoming SlideShare
Loading in …5
×

android drawable

2,568 views

Published on

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,568
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

android drawable

  1. 1. Drawable Resouceの話
  2. 2. Drawable? ● Androidで表示するUIパーツを1つの描画コン ポーネントとしてまとめておくもの ● res/drawable/ 以下に置く ○ 画像ファイル(png推奨) ○ xmlファイル(後で説明する決められたフォーマットでか かれたもの)
  3. 3. アクセスの方法 res/drawable/hoge_huga.pngを作成した場合 ● Java ○ R.drawable.hoge_huga ● xml(layout等) ○ @drawable/hoge_huga で呼び出せる
  4. 4. 各Drawableリソースの説明 一覧 ● bitmap ● 9-patch ● layer-list=LayerDrawable ● selector=StateListDrawable ● level-list=LevelListDrawable ● transition=TransitionDrawable ● inset=InsetDrawable ● clip=ClipDrawable ● scale=ScaleDrawable ● shape=ShapeDrawable
  5. 5. bitmap ● 通常の画像リソース ● 入れた画像がそのまま表示されるわけではない (見た目的には変わってないけど) ○ アプリをビルドするときに最適化が行われて圧縮される 可能性がある ○ メモリ消費を抑えたりするためのものなのであまり意識 しないでもいいかも ○ (あまりないけど)直接のbitmapデータがほしい場合は (res/raw/)以下において読む込むようにする(アクセス は前述したdrawableをrawに変えるだけ)
  6. 6. bitmap xml <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/myimage" />
  7. 7. xml bitmap bitmapファイルにオプションを いろいろ定義できる ● アンチエイリアス ● タイル(敷き詰め) xml <bitmap xmlns:android="http://schemas.android. com/apk/res/android" android:src="@drawable/ic_launcher" android:tileMode="repeat" />
  8. 8. 9-patch ● 伸縮可能なbitmapリソース ● 説明済みなのでスキップ
  9. 9. layer-list ● 複数のdrawableを重ねあわせ表示を行うため のもの ● リソースを使い回したりするときに利用する
  10. 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. 11. selector ● 各状態によって表示を変化させたりできる ● タップ前、タップ中、タップ後で表示するものを変 更したりできる タップ前 タップ中
  12. 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. 13. level-list ● 閾値を設けてそれによって表示を制御することが出来る ● 10回タップしたら色を変える。と言ったことが可能 ● 閾値は複数設定可能 <?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. 14. transition ● 2つのdrawableリソースを利用 ● 2つをフェードで入れ替え表示が出来る ● フェード速度は制御可能(開始や速度の制御は 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. 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. 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. 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. 18. shape ● 幾何学系の図形を描画出来る ● 細かい設定を行えば画像リソースを用意しなく てもよい
  19. 19. shapeの利点 ● 表示されるときはベクター画像として扱われる ○ 複数解像度に合わせてリソースを用意しないと行けない という問題がない ● プログラム上での操作が割と容易 ○ アクションに応じて色を変えると言った事が行える ● 単純にファイルサイズが小さい ○ アプリサイズを押さえられる
  20. 20. shapeだと難しいもの ● 文字のような複雑な図形 ○ アイコンなどは画像として用意した方がよい ○ 例:公式アプリのイイネボタン等 ○ 共通のリソースが使えるのであればそれを使ってよい ● ボタンなどの縦横比が変化しやすい素材 ○ nine-patchでがんばる? ● API level(OSのバージョン)によって一部バグが 存在する(API level 10以下) ● 大体CSSで作成できるものは作れる感覚
  21. 21. shapeで作れるものの例 これ 参考 http://www.marineroad.com/staff-blog/4095.html
  22. 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. 23. layer-list shape shape shape
  24. 24. animation系リソース ● res/anim以下に設置 ● xmlで記述する ● 設定を書いてあるだけで開始等の制御はJava 側で行う
  25. 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. 26. リソースを入れるときのファイル名 ● camelCase、もしくはsnake_caseでファイル名 を記述して命名規則は統一 ● 命名規則についてはこの辺を参照するといいか も ○ http://www.kojion.com/android/naming_rule.html ● Androidがデフォルトでおいてあるdrawableリ ソースはすべてsnake_case ○ 公式に習ってsnake_caseで統一 ○ 公式と区別できるようにするためにcamelCaseにする ■ エンジニアと相談して決めましょう
  27. 27. Androidの基本的なアイコン命名規則 ● アイコン ○ ic_xxxxxx ● ランチャー ○ ic_launcher_xxxxx ● メニュー・アクションバー ○ ic_menu_xxxxx ● ステータスバー ○ ic_stat_notify_xxxx ● タブ ○ ic_tab_xxxxxx ● ダイアログ ○ ic_dialog_xxxxx

×