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

この記事はモバイルファクトリー 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さんのどげんかしたい話です。はたしてどげんかなったのでしょうか？とても楽しみです。