Droidくん「JavaとXMLの魔境、Androidフレームワークの世界へようこそ！」

RadioButtonをカスタマイズする方法メモ

19:16 |

ラジオボタンは複数の選択肢からひとつを選ぶためのUI。

Spinner（ドロップダウン）との違いはすべての選択肢があらかじめ見える状態になっているか否かくらいか。

Androidの初期設定のRadioButtonウィジェットは驚くほど巨大でダサいので、これもカスタマイズしようとしたらいろいろハマった。

iPhoneではRadioButtonをフラットなボタンにしたようなUIがあるが、そういうやつはAndroidではないらしいのでつくった。

要点としては

RadioButtonをまとめる要素であるRadioGroupは標準では垂直に要素を並べるようになっているので水平に変更。

RadioButton要素は実際はボタンとテキストビューのふたつの部分から構成されている。

checkされているかを示している標準のボタンはでかくて邪魔なので消してしまう。

テキストビューの背景をボタンっぽいものに変更し、checkされているかどうかの状態によってこれを変えることで、あたかもたくさんのボタンウィジェットからひとつの選択肢を選べるようなFlatRadioButtonを実現する。

res/layout/main.xml

<RadioGroup android:id="@+id/rg_wb" android:orientation="horizontal"
		android:layout_width="fill_parent" android:layout_height="wrap_content">
		<RadioButton android:id="@+id/Option0" android:text="1"
			style="@style/FlatRadioButton" />
		<RadioButton android:id="@+id/Option1" android:text="2"
			style="@style/FlatRadioButton" />
		<RadioButton android:id="@+id/Option2" android:text="3"
			style="@style/FlatRadioButton" />
		<RadioButton android:id="@+id/Option3" android:text="4"
			style="@style/FlatRadioButton" />
		<RadioButton android:id="@+id/Option4" android:text="5"
			style="@style/FlatRadioButton" />
</RadioGroup>

res/values/styles.xml

<style name="FlatRadioButton" parent="android:Widget.CompoundButton.RadioButton">
	<item name="android:layout_height">wrap_content</item>
	<item name="android:layout_width">64px</item> <!-- ボタンの幅。画面の幅とボタンに表示するテキストと選択肢の数で調整する -->
	<item name="android:paddingTop">10px</item>
	<item name="android:paddingBottom">10px</item>
	<item name="android:paddingLeft">5px</item>
	<item name="android:paddingRight">4px</item>
	<item name="android:button">@null</item> <!-- ラジオボタンの先頭の画像を表示しないときにこれを指定するらしい。。。ひたすらググった結果判明 -->
	<item name="android:background">@drawable/flatbutton</item> <!-- ラジオボタンのテキストの背景部分をボタンぽいやつに指定。標準だと背景なし -->
	<item name="android:gravity">center_horizontal</item>
	<item name="android:textColor">#000000</item>
</style>

途中で面倒になったのでいくつかの状態でdrawableを使いまわしている。。

res/drawable/flatbutton.xml

<?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/on_pressed"
		 />
	<!-- 選択されているとき -->
	<item
		android:state_checked="true"
		android:drawable="@drawable/on"
		 />
	<!-- 選択されていない選択肢が押されたとき -->
	<item
		android:state_checked="false"
		android:state_pressed="true"
		android:drawable="@drawable/off_pressed"
		 />
	<!-- 選択されていない選択肢にフォーカスがあたったとき -->
	<item
		android:state_focused="true"
		android:state_checked="false"
		android:state_pressed="false"
		android:drawable="@drawable/on"
		 />
	<!-- 選択されていない選択肢のデフォルト状態 -->
	<item
		android:state_checked="false"
		android:drawable="@drawable/off"
		/>
</selector>

状態のぶんだけボタンdrawable xmlをつくる

res/drawable/on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1px" android:color="#000000" />
        <gradient
        android:startColor="#ffcc00"
        android:endColor="#ff9933"
        android:angle="270" />
    <corners android:radius="3px" />
</shape>