ラジオボタンをカスタマイズするのが
結構面倒だったのでメモ。
カスタマイズ自体は色々なサイトさんが
公開してくれていてとても助かっています。
セレクターボタン自体をカスタマイズしたり、
アイコンだけにして表示させたり。
ただ、時には水平方向でかつセレクターボタンと
任意のアイコンを表示したい！という時があるのです。
具体的にはこんな感じ。
要点としては、
・水平方向表示。
・セレクターボタンも見せる。
・アイコン（画像）部分は任意の画像を置けるようにする。今回は下方向。
・できればXMLだけで実装できて汎用的に。
な感じにできればいいかなというわけで
こちょこちょいじり回してみました。
ただし大前提として、
アイコン部分に関しては各アイコンのサイズ＆配置方向は一緒という感じです。
これは、セレクターボタンを実際は消してしまい。
backgroundでセレクターボタンっぽいのを置き
あたかもセレクターボタンがあるように見せるからです。
なので画像だったりの幅が変わるとbackgroundが拡大縮小されるため
各画像のサイズは同一にしてください。。
今回は90px:90pxのアイコン画像をdrawable-xhdpiに配置し、
drawableBottomで下方向表示させ。
それに合わせた位置でセレクターボタンをxmlで作って実装します。
もしも、画像サイズを変えたり配置位置を変えた場合は
セレクターボタンの配置位置だったりを再度調整する必要があります。。。
もっと上手いやり方があると思いますが力尽きました（・ω・）
はてさて、、、
だらだらと書いてもあれなのでソース書きます。
さきほども書きましたが、
今回は90px:90pxのアイコン画像をdrawable-xhdpiに配置。#mdpiだと45px扱い。
それに合わせたセレクターボタンをxmlで作って実装します。
*drawable-xhdpiだったりmdpiだったりの話はこちらでも参考に。
#main.xml
***********************************************************************
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="vertical">
<!-- ラジオグループを配置 -->
<RadioGroup
android:id="@+id/radioGroup2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio1"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio2"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio3"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
</RadioGroup>
</LinearLayout>
***********************************************************************
#radiobg.xml
drawableフォルダに今回は配置。 drawable/radiobg.xml
セレクターボタンっぽいものをbackgroundに配置します。
ここではselectorタグを使用します。
***********************************************************************
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android
" >
<item android:top="0dp" android:left="0dp" android:bottom="40dp" android:right="0dp">
<selector >
<!-- 選択状態の選択肢が押されたとき -->
<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>
</item>
</layer-list>
***********************************************************************
#on.xml
drawableフォルダに今回は配置。 drawable/on.xml
ボタンが選択された時のセレクターボタンの状態です。今回はHolo.Light風
***********************************************************************
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android
">
<!-- ボタンの下地 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="4dp" android:left="12dp" android:bottom="4dp" android:right="12dp">
<shape android:shape="oval">
<size android:width="24dp" android:height="24dp"/>
<solid android:color="#00000000"/>
</shape>
</item>
<!-- ボタンの外枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="8.5dp" android:left="16.5dp" android:bottom="8.5dp" android:right="16.5dp">
<shape android:shape="oval">
<stroke android:width="1px" android:color="#666666" />
<solid android:color="#00000000"/>
</shape>
</item>
<!-- ボタンの内枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="11.5dp" android:left="19.5dp" android:bottom="11.5dp" android:right="19.5dp">
<shape android:shape="oval">
<stroke android:width="1px" android:color="#666666" />
<gradient
android:startColor="#20bcde"
android:endColor="#20bcff"
android:angle="270" />
</shape>
</item>
</layer-list>
***********************************************************************
#off.xml
drawableフォルダに今回は配置。 drawable/off.xml
ボタンが選択されていない時のセレクターボタンの状態です。今回はHolo.Light風
***********************************************************************
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android
">
<!-- ボタンの下地 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="4dp" android:left="12dp" android:bottom="4dp" android:right="12dp">
<shape android:shape="oval">
<size android:width="24dp" android:height="24dp"/>
<solid android:color="#00000000"/>
</shape>
</item>
<!-- ボタンの外枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="8.5dp" android:left="16.5dp" android:bottom="8.5dp" android:right="16.5dp">
<shape android:shape="oval">
<stroke android:width="1px" android:color="#666666" />
<solid android:color="#00000000"/>
</shape>
</item>
<!-- ボタンの内枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="11.5dp" android:left="19.5dp" android:bottom="11.5dp" android:right="19.5dp">
<shape android:shape="oval">
<solid android:color="#00000000"/>
</shape>
</item>
</layer-list>
***********************************************************************
#off_pressed.xml
drawableフォルダに今回は配置。 drawable/off_pressed.xml
ボタンが選択されていない状態でボタンが押されたとき時のセレクターボタンの状態です。今回はHolo.Light風
***********************************************************************
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android
">
<!-- ボタンの下地 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="4dp" android:left="12dp" android:bottom="4dp" android:right="12dp">
<shape android:shape="oval">
<size android:width="24dp" android:height="24dp"/>
<gradient
android:startColor="#9920bcde"
android:endColor="#9920bcff"
android:angle="270" />
</shape>
</item>
<!-- ボタンの外枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="8.5dp" android:left="16.5dp" android:bottom="8.5dp" android:right="16.5dp">
<shape android:shape="oval">
<stroke android:width="1px" android:color="#666666" />
<solid android:color="#00000000"/>
</shape>
</item>
<!-- ボタンの内枠 ボタンの形やアイコンのサイズが変わるならitem内のtop,left,bottom,rightの値を変えて調整-->
<item android:top="11.5dp" android:left="19.5dp" android:bottom="11.5dp" android:right="19.5dp">
<shape android:shape="oval">
<solid android:color="#00000000"/>
</shape>
</item>
</layer-list>
***********************************************************************
以上で実装は終わり。
わかりづらくてすいません。
実行するとこんな感じです。
ただこれだと配置位置が微妙です。
均等配置したい時もあります。
でもこいつにpaddingなんかかけたり
layout_weightで均等配置なんかするとずれます。。
それはコンテンツの幅が変わるからです。
じゃあどうするの？ですが
・単純に余白を入れたい場合 ＝ marginを使用。
・均等配置したい場合 = 空のviewなりを指しこんでそっちで均等配置する。
力技ですいません。
こんな方法しか思いつきませんでした。
昔CSSがなかったときにtableなりでレイアウト組んだりするのと同じ感じです。
以下は均等配置した場合のソースです。
赤字部分を差し込んでください。
main.xml
***********************************************************************
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="vertical">
<!-- ラジオグループを配置 -->
<RadioGroup
android:id="@+id/radioGroup2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- ラジオボタンを均等配置するため空のviewを差し込む -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio1"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
<!-- ラジオボタンを均等配置するため空のviewを差し込む -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio2"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
<!-- ラジオボタンを均等配置するため空のviewを差し込む -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く -->
<!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する -->
<RadioButton
android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/radio3"
android:background="@drawable/radiobg"
android:gravity="center_horizontal"
android:button="@null"/>
<!-- ラジオボタンを均等配置するため空のviewを差し込む -->
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
</RadioGroup>
</LinearLayout>
***********************************************************************
さてこれをやるとこんな感じ。
均等に配置されました。
ためしにnexus7でも表示してみます。
縦向き
横向き
ずれずに均等配置されました。
以上になります。
ほとんど力技なのでもっといい方法があると思います。。
とりあえずこんな感じですいません。
最後にプロジェクトも置いておきます。
＞ここ