Edited at

Android drawableは画像を入れておくだけじゃない

More than 3 years have passed since last update.

この記事はモバイルファクトリー Advent Calendar 17日目の記事です。

昨日はmattakさんのKotlinをプロジェクトに導入してわかったことでした。

今日は@yashims85がお送りします。


drawableは画像を入れておくだけじゃない

drawableは画像だけではなく様々な描画用リソースを定義出来ます。


  • Bitmap File


    • 画像ファイル



  • Nine-Patch File


    • 9パッチ



  • Layer List


    • 他のDrawableを重ねて一つのDrawableにする



  • State List


    • 状態によって描画するDrawableを変えれる



  • Level List


    • レベルによって描画するDrawableを変える



  • Transition Drawable


    • 複数のDrawable間でクロスフェードを行える



  • Inset Drawable


    • 他のDrawableを内包する



  • Clip Drawable


    • レベルによって描画する幅を変える



  • Scale Drawable


    • DrawableをScaleする



  • Shape Drawable


    • 単純なDrawableを作る



詳しくは公式をみてもらうとして、ここでは、ShapeとStateListを使って、ボタン用のリソースを作る過程を例示したいと思います。


Shape

Shapeは四角、角丸、円、楕円、リングの簡単な図形やグラデーションをもつDrawableを作成できます。


80x40dpに内接するグラデーションのかかった楕円を作る

プロジェクトツリーのdrawableのコンテキストメニューからDrawable resource fileを選択し、Root elementにはshapeを指定してxmlファイルを作成して下さい。


drawable_default_shape.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:endColor="#ffaaaa"
android:startColor="#ff0000"
android:type="linear" />
<size
android:width="80dp"
android:height="40dp" />
</shape>


drawable_pressed_shapre.xml

drawable_default_shape.xmlのstartColorとendColorを入れ替えただけなので省略



StateListでボタン用Drawableを作る

StateListはViewの状態に応じて、描画するDrawableを切り替えることができるDrawableです。

今回はShapeで作成したDrawableを使用しますが、Bitmap fileも当然のように使えるので、普段はそちらのほうが使用頻度は高いでしょう。


ボタン用のDrawableを作る

Shapeと同じくDrawable resource fileを選択したら、Root elementにはselectorを指定します。

xmlはstate_pressed="true"の時だけ、pressedのdrawableを表示するように指定します。


drawable_example_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawable_default_shape" android:state_pressed="false" android:state_selected="false" android:state_enabled="true" />
<item android:drawable="@drawable/drawable_pressed_shape" android:state_pressed="true" android:state_selected="false" android:state_enabled="true" />
<item android:drawable="@drawable/drawable_default_shape" android:state_pressed="false" android:state_selected="true" android:state_enabled="true" />
</selector>


ラジオボタン用のDrawableを作る

ラジオボタン、チェックボックス、トグル、スイッチなどは、state_checkedで判断します。


drawable_example_radio

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawable_default_shape" android:state_checked="false" android:state_enabled="true" />
<item android:drawable="@drawable/drawable_pressed_shape" android:state_checked="true" android:state_enabled="true" />
</selector>


DrawableをViewに当てる

StateListで作ったものを、通常の画像と同じようにImageButtonやRadioButtonに当てはめていけば良いだけです。同じインターフェースで扱えるのはとてもうれしいですね。


まとめ

というわけ、ノーコードでボタンを作ることが出来てしまいました。Drawableには他にも便利な機能があるので、APIガイドを読んでみるととても楽しいです。

明日はmasasuzuさんのどげんかしたい話です。はたしてどげんかなったのでしょうか?とても楽しみです。