2011年4月27日水曜日

Android チェックボックスをカスタマイズしてみる

CheckBoxをカスタマイズする。CheckBox使おうとしたらサイズが大きく、他の部分で文字小さくしていて調和が取れなかったため。カスタマイズと言うか小さくしたかっただけ。

とりあえず画像をどこかから用意する。とりあえず前回のGimpの勉強で作ってみた画像を使う。on,offのそれぞれフォーカスされてるされてないバージョンの4つ。つくった画像はdrawableに突っ込む。

で、mycheckbox.xmlでstateによってどの画像を使うかを定義。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_pressed="true" android:drawable="@drawable/checkbox_on_focused" />
    <item android:state_checked="true" android:state_focused="true" android:drawable="@drawable/checkbox_on_focused" />
    <item android:state_checked="true" android:drawable="@drawable/checkbox_on" />
    <item android:state_pressed="true" android:drawable="@drawable/checkbox_off_focused" />
    <item android:state_focused="true" android:drawable="@drawable/checkbox_off_focused" />
    <item android:drawable="@drawable/checkbox_off" />
</selector>
次にスタイルを定義
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyCheckBox" parent="android:Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/mycheckbox</item>
    </style>
</resources>
あとはこのスタイルをCheckBoxに適用してやる。
<CheckBox style="@style/MyCheckBox" android:text="まいちぇっくぼっくす1"
          android:layout_width="wrap_content" android:layout_height="wrap_content" />

カスタマイズしてチェックボックスは小さくなったけど、文字の開始する位置が同じなんで幅はデフォルトと同じ。どこで設定されてるんだろう。
高さはカスタマイズした方が詰まってるので良い感じ。
ラベル: ,