Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What is going on with this article?
@yashims85

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

More than 5 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さんのどげんかしたい話です。はたしてどげんかなったのでしょうか?とても楽しみです。

22
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
22
Help us understand the problem. What is going on with this article?