Toggleボタンのカスタマイズ
まずは、ToggleButtonの背景画像の用意
ToggleButtonのON/OFFの切り替えは
1つのリソースでは表現できないため
Selecter要素を使うことで状況に応じて表示するようにする
つまり、OFFの時の画像
ONの時の画像を用意する
リソースファイルは
Selecter_toggle_background.xml
ソースは
1 2 3 4 5 | <selector<item android:state_checked="false" android:drawable="@color/FlatLightAqua"/><item android:state_checked="false" android:drawable="@color/FlatLightPink"/></selector> |
次に、作成した背景用のリソースを
background=””を使って実際のViewへ反映させる
1 2 3 4 5 | <ToggleButtonandroid:id="@+id/tbtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/ Selecter_toggle_background"/> |
ちなみに、Switchの場合は
ToggleButtonと違って
スイッチ部分と
スイッチ部分の裏にある背景とで
リソースが分かれる
まずは、switch_background.xml
というようにリソースファイルを用意
1 2 3 4 5 6 7 8 9 | <selector<item android:drawable="@drawable/switch_bg_disabled_holo_dark"android:state_enabled="false"/><item android:drawable="@drawable/switch_bg_focused_holo_dark"android:state_focused="true"/><item android:drawable="@drawable/switch_bg_holo_dark"/></selector> |
次に、switch用のリソースの準備
これも別ファイルで用意
今回は、selector_switch_thumb.xml
定義するのは4つで
無効状態
有効状態
OFFの状態
Onの状態
ソースにすると
[/xml]
ここまでできたら、レイアウトファイルで
背景用リソースを
thumb属性を使ってViewへ反映させる
指定するのはリソースファイル名
1 2 3 4 5 6 7 | <Switchandroid:id="@+id/switch"android:layout_width="wrap_content"android:layout_height="wrap_content"android:thumb="selector_switch_thumb"android:track="@drawable/selector_switch_background"/> |
となる
カスタマイズに使うリソースは
drawableリソースなら何でも使えるけど
shapeリソースや
9patchリソースでない場合、
デバイスのディスプレイサイズや解像度の違いが影響し
デザイン崩れが起こることがあるので注意