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

  • 15
    Like
  • 0
    Comment
More than 1 year has 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さんのどげんかしたい話です。はたしてどげんかなったのでしょうか?とても楽しみです。