ナムです。自社アプリの実装するとき、RadioButtonをカスタマイズすることになり、そこでSamsung Galaxy S2 (4.0.4)での動き・表示がおかしくなったこと、とその対策について話したいと思うます。
前書き
利用したAppCompatバージョンは最新です。
compile 'com.android.support:appcompat-v7:22.1.1'
そこで、おかしい表示の例(ただし、オリジナルRadioButtonの使用例とカスタマイズRadioButtonを両方あげます。なんかオリジナルの場合は無事ですね。アヤシイ):
一応Genymotionでのテスト画面もあげます。VMのAndroidバージョンを確認忘れないでください
XMLとCustomRadioButtonのソースコードもあげます
- CustomRadioButton.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
- Genymotion
まとめ、今度の課題、追加など
xmlにpaddingを入れないと問題ないはずです。
実際にRadioButtonをカスタマイズすることがあるかどうか
と
そこでpaddingがあるかどうか
によって、この対策を検討することになると思います。
原因はさらに調査しなきゃ〜
パーフォマンスへの影響なども考えられますが、ないと思います。
カスタマイズすると、デフォルトのbuttonの色が変わりますね。僕の場合、RadioGroupに全てカスタマイズRadioButtonを使用するから、色が変わっても同じ色になりますので、大丈夫ですが、この点も注意する必要があります。
2.3の端末はもういい、最低の対応するバージョンをアップしましょう、最低でも4.1~は検討しています。
以上となります。参考になれると嬉しいです。