自定义RadioButton：改变文字上、下、左、右图片，可设置图片大小（宽高）

原文出处：https://www.cnblogs.com/toly/p/8665926.html

RadioButton的图标大小并没有相应的布局参数，本文通过自定义属性的方式自定义RadioButton，实现控制图片大小。

• 本文要点：

1. 自定义属性的使用。
2. 解决RadioButton文字上、下、左、右的图标大小自定义问题。
3. 此方法对TextView内的图标也适用。

•  问题如下：

 

• 解决方法：

1.values/attrs.xml 文件中：自定义rb_width  和  rb_height  两个属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRadioButton">
        <attr name="rb_width" format="dimension"/>
        <attr name="rb_height" format="dimension"/>
    </declare-styleable>
</resources>

 

2.自定义RadioButton

 1 package top.toly.www.myqq.view;
 2 
 3 import android.content.Context;
 4 import android.content.res.TypedArray;
 5 import android.graphics.drawable.Drawable;
 6 import android.util.AttributeSet;
 7 import android.widget.RadioButton;
 8 
 9 import top.toly.www.myqq.R;
10 import utils.shortUtils.Change;
11 
18 public class MyRadioButton extends RadioButton {
19 
20     private float mImg_width;
21     private float mImg_height;
22 
23     public MyRadioButton(Context context) {
24         super(context);
25     }
26 
27     public MyRadioButton(Context context, AttributeSet attrs) {
28         super(context, attrs);
29         TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.MyRadioButton);
30         mImg_width = t.getDimension(R.styleable.MyRadioButton_rb_width, Change.dp2px(25));
31         mImg_height = t.getDimension(R.styleable.MyRadioButton_rb_height, Change.dp2px(25));
32         t.recycle();
33     }
34 
35     @Override
36     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
37         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
38         //让RadioButton的图标可调大小 属性：
39         Drawable drawableLeft = this.getCompoundDrawables()[0];//获得文字左侧图片
40         Drawable drawableTop = this.getCompoundDrawables()[1];//获得文字顶部图片
41         Drawable drawableRight = this.getCompoundDrawables()[2];//获得文字右侧图片
42         Drawable drawableBottom = this.getCompoundDrawables()[3];//获得文字底部图片
43         if (drawableLeft != null) {
44             drawableLeft.setBounds(0, 0, (int) mImg_width, (int) mImg_height);
45             this.setCompoundDrawables(drawableLeft, null, null, null);
46         }
47         if (drawableRight != null) {
48             drawableRight.setBounds(0, 0, (int) mImg_width, (int) mImg_height);
49             this.setCompoundDrawables(null, null, drawableRight, null);
50         }
51         if (drawableTop != null) {
52             drawableTop.setBounds(0, 0, (int) mImg_width, (int) mImg_height);
53             this.setCompoundDrawables(null, drawableTop, null, null);
54         }
55         if (drawableBottom != null) {
56             drawableBottom.setBounds(0, 0, (int) mImg_width, (int) mImg_height);
57             this.setCompoundDrawables(null, null, null, drawableBottom);
58         }
59     }
60 }

 

3.使用属性控制RadioButton 中的图片大小

• 注意：

1. <top.toly.www.myqq.view.MyRadioButton 为自定义控件类的全路径名

2.  xmlns:toly="http://schemas.android.com/apk/res-auto"  声明命名空间，其中toly为自定义名称，可替换（需与第3点冒号前名称一致）

3.  toly:rb_width="30dp"  toly:rb_height="30dp" 为自定义属性的使用

4.  android:drawableTop="@drawable/tab_msg_selector" 为指定的图片资源

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toly="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/qq_title_text">

    <RadioGroup
        android:id="@+id/rg_btns"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <top.toly.www.myqq.view.MyRadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/rb_msg"
            android:checked="false"
            toly:rb_width="30dp"
            toly:rb_height="30dp"
            android:button="@null"
            android:gravity="center"
            android:drawableTop="@drawable/tab_msg_selector"
            android:text="消息"/>

        <top.toly.www.myqq.view.MyRadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/rb_contact"
            android:background="@android:color/transparent"
            android:checked="false"
            android:button="@null"
            toly:rb_width="30dp"
            toly:rb_height="30dp"
            android:gravity="center"
            android:drawableTop="@drawable/tab_contact_selector"
            android:text="联系人"/>

        <top.toly.www.myqq.view.MyRadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/rb_act"
            android:button="@null"
            toly:rb_width="30dp"
            toly:rb_height="30dp"
            android:gravity="center"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/tab_act_selector"
            android:text="动态"
           />
    </RadioGroup>
</RelativeLayout>

 

4.结果图：