メモ[ラジオボタンをカスタマイズ(水平方向)]
ラジオボタンをカスタマイズするのが結構面倒だったのでメモ。カスタマイズ自体は色々なサイトさんが公開してくれていてとても助かっています。セレクターボタン自体をカスタマイズしたり、アイコンだけにして表示させたり。ただ、時には水平方向でかつセレクターボタンと任意のアイコンを表示したい!という時があるのです。具体的にはこんな感じ。 要点としては、 ・水平方向表示。 ・セレクターボタンも見せる。 ・アイコン(画像)部分は任意の画像を置けるようにする。今回は下方向。 ・できれば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"><!-- ラジオグループを配置 --><RadioGroupandroid:id="@+id/radioGroup2"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く --><!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する --><RadioButtonandroid: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/任意の画像"で配置する --><RadioButtonandroid: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/任意の画像"で配置する --><RadioButtonandroid: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.xmldrawableフォルダに今回は配置。 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 ><!-- 選択状態の選択肢が押されたとき --><itemandroid:state_checked="true"android:state_pressed="true"android:drawable="@drawable/on_pressed"/><!-- 選択されているとき --><itemandroid:state_checked="true"android:drawable="@drawable/on"/><!-- 選択されていない選択肢が押されたとき --><itemandroid:state_checked="false"android:state_pressed="true"android:drawable="@drawable/off_pressed"/><!-- 選択されていない選択肢にフォーカスがあたったとき --><itemandroid:state_focused="true"android:state_checked="false"android:state_pressed="false"android:drawable="@drawable/on"/><!-- 選択されていない選択肢のデフォルト状態 --><itemandroid:state_checked="false"android:drawable="@drawable/off"/></selector></item></layer-list>***********************************************************************#on.xmldrawableフォルダに今回は配置。 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" /><gradientandroid:startColor="#20bcde"android:endColor="#20bcff"android:angle="270" /></shape></item></layer-list>***********************************************************************#off.xmldrawableフォルダに今回は配置。 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.xmldrawableフォルダに今回は配置。 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"/><gradientandroid: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"><!-- ラジオグループを配置 --><RadioGroupandroid:id="@+id/radioGroup2"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!-- ラジオボタンを均等配置するため空のviewを差し込む --><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1"/><!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く --><!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する --><RadioButtonandroid: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を差し込む --><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1"/><!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く --><!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する --><RadioButtonandroid: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を差し込む --><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1"/><!-- セレクターボタンはbutton="@null"で消してbackgroundでセレクターボタンっぽいのを置く --><!-- アイコンは下方向の場合はdrawableBottom="@drawable/任意の画像"で配置する --><RadioButtonandroid: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を差し込む --><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1"/></RadioGroup></LinearLayout>***********************************************************************さてこれをやるとこんな感じ。 均等に配置されました。ためしにnexus7でも表示してみます。縦向き 横向き ずれずに均等配置されました。以上になります。ほとんど力技なのでもっといい方法があると思います。。とりあえずこんな感じですいません。最後にプロジェクトも置いておきます。>ここ