2011年2月20日日曜日

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

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

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



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

android:drawablePadding

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

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

CompoundButton.java を見ると、

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


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

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


style.xml

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" とかしたらまずいんじゃ。。。

やってみた。



うは。かぶったw


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

  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

<?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 使ったやつです。ちゃんと間隔を広げることができました。


 

2 件のコメント:

  1. 間隔を狭めたいと思ってたどり着きました。
    参考にさせてΨ(*・∀・*)Ψィタダキマシュ♪

    ヒートウェーブにて
    UIリターンズのお話もお聞きしましたが、
    本当に知識量が半端ないですw

    http://android.wktk.so/

    返信削除
  2. 素晴らしい。
    Radioに背景色を設定したら、テキストが重なる理由が全く分からなかったんですが、
    このブログを見つけてようやくわかりました。
    ありがとう。ポチしておきます。

    返信削除