Android RadioButton の画像とテキストの間隔を広げる

どうもね、デフォルトだと詰まり過ぎてると感じるんですよ。私は。

RadioButton の画像とテキストの間のことです。



それで、この間に余白いれようかなと思ったんです。

android:drawablePadding

かなと思ったんですけど、ダメでした。

ということでコード見たんです。RadioButton.java
この方は、CompoundButton を継承して、toggle の設定してるだけなので

CompoundButton.java を見ると、

onDraw で縦方向の位置しか調整してないんですよ。

view plainprint?

1. 229     @Override  
2. 230     protected void onDraw(Canvas canvas) {  
3. 231         super.onDraw(canvas);  
4. 232   
5. 233         final Drawable buttonDrawable = mButtonDrawable;  
6. 234         if (buttonDrawable != null) {  
7. 235             final int verticalGravity = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;  
8. 236             final int height = buttonDrawable.getIntrinsicHeight();  
9. 237   
10. 238             int y = 0;  
11. 239   
12. 240             switch (verticalGravity) {  
13. 241                 case Gravity.BOTTOM:  
14. 242                     y = getHeight() - height;  
15. 243                     break;  
16. 244                 case Gravity.CENTER_VERTICAL:  
17. 245                     y = (getHeight() - height) / 2;  
18. 246                     break;  
19. 247             }  
20. 248   
21. 249             buttonDrawable.setBounds(0, y, buttonDrawable.getIntrinsicWidth(), y + height);  
22. 250             buttonDrawable.draw(canvas);  
23. 251         }  
24. 252     }  
25. 253   

    229     @Override
    230     protected void onDraw(Canvas canvas) {
    231         super.onDraw(canvas);
    232 
    233         final Drawable buttonDrawable = mButtonDrawable;
    234         if (buttonDrawable != null) {
    235             final int verticalGravity = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
    236             final int height = buttonDrawable.getIntrinsicHeight();
    237 
    238             int y = 0;
    239 
    240             switch (verticalGravity) {
    241                 case Gravity.BOTTOM:
    242                     y = getHeight() - height;
    243                     break;
    244                 case Gravity.CENTER_VERTICAL:
    245                     y = (getHeight() - height) / 2;
    246                     break;
    247             }
    248 
    249             buttonDrawable.setBounds(0, y, buttonDrawable.getIntrinsicWidth(), y + height);
    250             buttonDrawable.draw(canvas);
    251         }
    252     }
    253 

ん？ じゃあどこで調整してるの？
横方向 0 から画像部分描画してるけど、それだと文字とかぶるんじゃ。。。

とりあえず theme.xml と style.xml も見ておくか。

theme.xml

view plainprint?

1. 173         <item name="radioButtonStyle">@android:style/Widget.CompoundButton.RadioButton</item>  

    173         <item name="radioButtonStyle">@android:style/Widget.CompoundButton.RadioButton</item>

style.xml

view plainprint?

1. 280     <style name="Widget.CompoundButton.RadioButton">  
2. 281         <item name="android:background">@android:drawable/btn_radio_label_background</item>  
3. 282         <item name="android:button">@android:drawable/btn_radio</item>  
4. 283     </style>  

    280     <style name="Widget.CompoundButton.RadioButton">
    281         <item name="android:background">@android:drawable/btn_radio_label_background</item>
    282         <item name="android:button">@android:drawable/btn_radio</item>
    283     </style>

む。 @android:drawable/btn_radio が画像部分なのは分かるとして、android:background を設定している。これはなんだ。

画像を見てみた。

btn_radio_label_background.9.png


9 patch だよ。

わかりずらいと思いますが、下部の 1px ラインは右側にちょこっとあるだけなんです。つまり、この透明部分がボタンのパディングとして作用しているということなんですよ。


あれ、ということは、RadioButton タグで android:background="#000066" とかしたらまずいんじゃ。。。

やってみた。



うは。かぶったｗ


つまり、背景＆画像とテキストの間隔を変更するには

　　1. 9 patch png を作り直す

　　2. LinearLayout で RadioButton と TextView を組み合わせ、
　　　 Chackable を implements したクラスを作る

　　3. shape で背景を作る

の方法があることがわかったんです。

1. は微調整や変更がしにくい。
2. はコーディングが多くなるし、View の階層が増える

ということで、3 にしました。

# shape いいよ。shape 便利。みんなもっと shape 使うべきだよ


shape タグ には padding というタグで余白を指定できます。

# shape の使い方は Android Layout Cookbook に詳しく書いたよん。

こんな感じでOK。
背景色を付けるなら solid か gradient タグで。

drawable/bg.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <shape  xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle">  
4.     <solid android:color="#660000" />  
5.     <padding  
6.         android:left="50dip"  
7.         android:top="0dip"  
8.         android:right="0dip"  
9.         android:bottom="0dip" />  
10. </shape>  

<?xml version="1.0" encoding="utf-8" ?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#660000" />
    <padding
        android:left="50dip"
        android:top="0dip"
        android:right="0dip"
        android:bottom="0dip" />
</shape>

あとは、RadioButton タグで android:background="@drawable/bg" と指定すればいい。



一番上が shape 使ったやつです。ちゃんと間隔を広げることができました。