Androidバージョン17(JB-MR1)での「Custom RadioButton with Padding」の扱い


ナムです。自社アプリの実装するとき、RadioButtonをカスタマイズすることになり、そこでSamsung Galaxy S2 (4.0.4)での動き・表示がおかしくなったこと、とその対策について話したいと思うます。

# 前書き
利用したAppCompatバージョンは最新です。

```
compile 'com.android.support:appcompat-v7:22.1.1'
```

そこで、おかしい表示の例（ただし、オリジナルRadioButtonの使用例とカスタマイズRadioButtonを両方あげます。なんかオリジナルの場合は無事ですね。アヤシイ）：

![sample_1](http://i.minus.com/ibdRvPLXOUCmm5.png)

一応Genymotionでのテスト画面もあげます。VMのAndroidバージョンを確認忘れないでください

![sample_2](http://i.minus.com/ibmojRdoqfmOup.png)


XMLとCustomRadioButtonのソースコードもあげます

- CustomRadioButton.java

```java
/**
 * Created by eneim on 5/26/15.
 */
public class CustomRadioButton extends RadioButton {
    public CustomRadioButton(Context context) {
        super(context);
    }

    public CustomRadioButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomRadioButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomRadioButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
}
```

- activity_radio_sample.xml

```
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="im.ene.lab.zzz.RadioSampleActivity">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:text="Test RadioGroup"/>

        <im.ene.lab.zzz.widgets.CustomRadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:text="RadioButton 1" />

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:text="RadioButton 2" />

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:text="RadioButton 3" />
    </RadioGroup>

</FrameLayout>

```

styleなど何も触っていない

# 原因

ま〜、時間がないのでまた今度入れますが、今以下の記事から参考できると思います。

```
https://code.google.com/p/android/issues/detail?id=81495
```

AppCompatバージョンの違いに注意してください。

# 対策

###tl,dr

Gistを作りました、参考になれると嬉しいです。

```
https://gist.github.com/eneim/54e38b400927ede077f0
```

###詳細

####なぜ？(WHY)

具体的な原因はまだですが、JB-MR1以前でのカスタマイズRadioButtonにはPaddingがあるとき、Buttonとテキスト間のパッディングが反映しないという問題があるはずです。

####どうする？(HOW)

それに対する対策は、まず親クラス(CompoundButton)でセットしたDrawableを習得します。そこで習得したDrawableのサイズを利用して適切なpadding値を返すこと。(CompoundButton#setButtonDrawable(Drawable d)とCompoundButton#getCompoundPaddingLeft()を継承することの目的)

次に、xmlにpaddingを定義するかしないかの判定で、適切なpadding値を指定します（init() methodの目的）。

####カスタマイズRadioButtonの形式がどうなります？(WHAT)

Gistをあげます

```
https://gist.github.com/eneim/54e38b400927ede077f0
```

# 結果

結果の画面だけをあげます

- Samsung Galaxy S2

![sample_3](http://i.minus.com/ib0S4a37S4HxIl.png)

- Genymotion

![sample_4](http://i.minus.com/ibyuGBIbvKouGH.png)
# まとめ、今度の課題、追加など

xmlにpaddingを入れないと問題ないはずです。

実際にRadioButtonをカスタマイズすることがあるかどうか
と
そこでpaddingがあるかどうか
によって、この対策を検討することになると思います。

原因はさらに調査しなきゃ〜

パーフォマンスへの影響なども考えられますが、ないと思います。

カスタマイズすると、デフォルトのbuttonの色が変わりますね。僕の場合、RadioGroupに全てカスタマイズRadioButtonを使用するから、色が変わっても同じ色になりますので、大丈夫ですが、この点も注意する必要があります。

2.3の端末はもういい、最低の対応するバージョンをアップしましょう、最低でも4.1~は検討しています。

以上となります。参考になれると嬉しいです。