Android、Java、Web系、Linux、マラソン等の備忘録

2012/12/15

Android CheckBoxをxmlでカスタマイズ

0 件のコメント
やりたい事、
  • 自前のチェックボックス画像にしたい
  • タッチした時だけ背景色を変更
分かればなんて事ないんですが....
後者は動的にやると、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に配置してやればおk



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


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

<?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用の2つXMLファイルを用意してやるってとこがポイントですね。

0 件のコメント :

コメントを投稿