Android CheckBoxをxmlでカスタマイズ

やりたい事、

• 自前のチェックボックス画像にしたい
• タッチした時だけ背景色を変更

分かればなんて事ないんですが....

後者は動的にやると、OnTouchListenerを使ってMotionEvent.ACTION_DOWNで背景を変更し、MotionEvent.ACTION_UPで背景を戻すというコードを書かなければならないのですが、XMLで書くとコード中で余計な事(onTouchメソッドのreturn値とか)を気にしなく良くなるので、スマートだと思います。

まず、

自前のチェックボックス画像にしたい

以下の二つの画像を用意します。

box_kara.png

box_peke.png

これを、resのdrawableディレクトリに配置。
xmlファイルを作成して、以下のように記述

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 未チェック -->
    <item
        android:state_checked="false"
        android:drawable="@drawable/box_kara" />

    <!-- チェック済み -->
    <item
        android:state_checked="true"
        android:drawable="@drawable/box_peke" />

</selector>

配置はこんな感じ

これを、チェックボックスのプロパティのButtonに配置してやればおｋ

上記の画像でチェックボックスが変ります。

これを応用して、それぞれ反転した画像を追加してこんな風にすると、

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 未チェック時 -->
    <item
        android:state_checked="false"
        android:state_pressed="false"
        android:drawable="@drawable/box_kara" />

    <!-- 未チェック押下時 -->
    <item
        android:state_checked="false"
        android:state_pressed="true"
        android:drawable="@drawable/box_kara2" />

    <!-- 押下後 -->
    <item
        android:state_checked="true"
        android:state_pressed="false"
        android:drawable="@drawable/box_peke" />

    <!-- チェック済み押下時 -->
    <item
        android:state_checked="true"
        android:state_pressed="true"
        android:drawable="@drawable/box_peke2" />
</selector>

上から順に、

1. 未チェック時
   
   
2. 未チェック押下時
   
   
3. 押下後
   
   
4. チェック済み押下時
   
   

のように細かく変更する事もできます。

タッチした時だけ背景色を変更

同じようにDrawableディレクトリ配下にxmlファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 通常-->
    <item android:state_pressed="false" >
        <color android:color="#FFF" />
    </item>

    <!-- 押下時 -->
    <item android:state_pressed="true">
        <color android:color="#55FF0000" />
    </item>

</selector>

これを、チェックボックスのプロパティのBackgroundに設定します。

これで、押下時のみ背景色が薄赤色にかわります。

Button用とBackground用の２つXMLファイルを用意してやるってとこがポイントですね。