ラジオボタンは複数の選択肢からひとつを選ぶための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>
Addy2012/02/15 05:05Boom shakalaka boom boom, problem soelvd.
twhrwz2012/02/15 17:39xvOg3K <a href="http://swmgvbwbpiyx.com/">swmgvbwbpiyx</a>
pbhhzn2012/02/17 21:25iUnWbv <a href="http://maofsnogcxhv.com/">maofsnogcxhv</a>
Juliana2013/11/22 18:21Such an imrsipseve answer! You've beaten us all with that!
Nelson2013/11/24 08:53Fidinng this post solves a problem for me. Thanks! http://ztmsjg.com [url=http://yhcxlfmx.com]yhcxlfmx[/url] [link=http://cjmuttefd.com]cjmuttefd[/link]
Hanif2013/11/25 10:23I really wish there were more <a href="http://kjhzglzeiph.com">artilces</a> like this on the web.
John2013/11/25 16:18That's an inventive answer to an inenitstreg question http://puffhr.com [url=http://kujxpe.com]kujxpe[/url] [link=http://oragnrdre.com]oragnrdre[/link]
nisaifMet2017/09/04 01:02payday loan store <a href="http://cashadvances2017.com"> payday loans direct lender</a> <a href="http://cashadvances2017.com"> online payday loans</a> <a href=http://cashadvances2017.com>online payday loans</a> online payday loans direct lenders
nvdkwyMet2017/09/12 13:02payday loans for bad credit <a href="http://paydayloans2017.com"> payday loans no credit check</a> <a href="http://paydayloans2017.com"> payday loans online no credit check</a> <a href=http://paydayloans2017.com>best payday loans</a> easy payday loans