美文网首页
Android RadioButton左边图片不能居中显示问题

Android RadioButton左边图片不能居中显示问题

作者: ncd | 来源:发表于2017-07-17 17:48 被阅读3319次

    RadioButton设置图片无法居中问题
    像下面这样的布局只能让文字居中,文字左边的圆圈图标还是靠左显示。

    <RadioGroup
            android:id="@+id/group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="false"
                android:gravity="center"
                android:text="1asdf"
                android:textColor="#000000" />
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="false"
                android:gravity="center"
                android:text="2asdf"
                android:textColor="#000000" />
    </RadioGroup>
    
    1.png

    解决思路:根据设置的gravity来重新设定图片的位置:自定义一个view:CustomRadioButton继承RadioButton,需要重写onDraw()方法:

    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.view.Gravity;
    import android.widget.RadioButton;
    
    public class CustomRadioButton extends RadioButton {
        private static final String TAG = CustomRadioButton.class.getSimpleName();
    
        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);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            Drawable[] drawables = getCompoundDrawables();
            Drawable drawable = drawables[0];
            int gravity = getGravity();
            int left = 0;
            if (gravity == Gravity.CENTER) {
                left = ((int) (getWidth() - drawable.getIntrinsicWidth() - getPaint().measureText(getText().toString()))
                        / 2);
            }
            drawable.setBounds(left, 0, left + drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        }
    }
    

    新的view要设置android:button="@null",然后设置一个android:drawableStart="@drawable/radiobutton_selector"

    radiobutton_selector:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/ic_radio_button_checked" android:state_checked="true"></item>
        <item android:drawable="@drawable/ic_radio_button_not_checked"></item>
    
    </selector>
    

    图片资源需要自己找,推荐一个网站:阿里巴巴矢量图标库
    新的布局:

    <RadioGroup
            android:id="@+id/group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
    
            <RadioButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="false"
                android:gravity="center"
                android:text="1asdf"
                android:textColor="#000000" />
    
            <com.example.lifecycle.CustomRadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#aabbcc"
                android:button="@null"
                android:checked="false"
                android:drawableStart="@drawable/radiobutton_selector"
                android:gravity="center"
                android:text="2asdf"
                android:textColor="#000000" />
    </RadioGroup>
    
    2.png

    PS:才知道简书上传图片形成的链接最后的数字代表宽度,而且是可以更改的。。。。。。

    相关文章

      网友评论

          本文标题:Android RadioButton左边图片不能居中显示问题

          本文链接:https://www.haomeiwen.com/subject/cilqkxtx.html