Android 扩展RadioButton 灵活控制drawable的大小_radiobutton drawable大小

android系统自带的radioButton当设置drawableTop ,drawableBottom,drawableLeft,drawableRight时，drawable的大小很难进行控制，默认显示为drawable图标的原始大小。一般在xml布局文件中没法进行设置，但是可以通过代码进行动态控制，这样的做法是灵活性太差了。

在activity中动态设置radioButton中drawable的大小：

RadioButton mAppBtn;

Drawable drawable=getDrawable(R.drawable.tab_icon_app);
drawable.setBounds(0,0,100,100);//将drawable设置为宽100 高100固定大小
mAppBtn.setCompoundDrawables(null,drawable,null,null);
1
2
3
4
5

这里涉及到2个方法 一个是Drawable类的setBounds 和 RadioButton 的setCompoundDrawables，首先来分析下这2个方法的作用。

Drawable类的setBounds :

void setBounds (int left, int top, int right, int bottom)
Specify a bounding rectangle for the Drawable. This is where the drawable will draw when its draw() method is called.
翻译：设置一个矩形边界给Drawable对象，Drawable类调用draw()方法进行绘制。
draw(Canvas canvas)
Draw in its bounds (set via setBounds)
翻译：当设置Bounds时，Drawable类将会在canvas画布里的Bounds矩形区域内绘制drawable。

由官方文档可以知道，left,top,right,bottom四个参数指的是drawable将在被绘制在canvas的哪个矩形区域内。这4个参数的坐标值是相对于canvas里的坐标为参考值，一般设置left , top为绘制起点坐标，一般设为0 ,right为drawable宽，bottom为drawable高进行设置。也可以理解为setBounds(x,y,width,height)。

RadioButton 的setCompoundDrawables：
RadioButton -> CompoundButton -> Button -> TextView
->代表继承 也就是说RadioButton继承于TextView ，而setCompoundDrawables是TextView里面的方法：

/**
* Sets the Drawables (if any) to appear to the left of, above, to the
* right of, and below the text. Use {@code null} if you do not want a
* Drawable there. The Drawables must already have had
* {@link Drawable#setBounds} called.
*/
public void setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom)
翻译：可以调用setCompoundDrawables 来设置drawable显示在text的左边，上边，右边，下边。如果不想某个方向显示drawable可以设置null。当调用这个方法时，drawable必须已经调用setBounds设置了边界。也就是要添加的资源必须已经设置过初始位置、宽和高等信息。

由此知道了setCompoundDrawables 是与 setBounds 关联在一起的 ，setBounds必须在setCompoundDrawables 前调用 才能使RadioButton中控制drawable的大小。

但是这种动态控制的灵活性太差，每次都要写一大堆代码，那就只能继承RadioButton自己来扩展了，也就是自定义View了。
首先来了解下TextView中 setCompoundDrawablesWithIntrinsicBounds（Drawable left,Drawable top,Drawable right,Drawable bottom） 的方法：

/**
* Sets the Drawables (if any) to appear to the left of, above, to the
* right of, and below the text. Use {@code null} if you do not want a
* Drawable there. The Drawables’ bounds will be set to their intrinsic
* bounds.
* * Calling this method will overwrite any Drawables previously set using
* {@link #setCompoundDrawablesRelative} or related methods.
*
*/
翻译：可以调用setCompoundDrawables 来设置drawable显示在text的左边，上边，右边，下边。如果不想某个方向显示drawable可以设置null。Drawable的Bounds边界值为被设置为drawable的固定宽和高。也就是drawable图标的宽高将会设置为固有宽高，既自动通过getIntrinsicWidth和getIntrinsicHeight获取，即按照图片原有比例大小显示drawable。

public void setCompoundDrawablesWithIntrinsicBounds(@Nullable Drawable left,
            @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom) {

        if (left != null) {
            left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());
        }
        if (right != null) {
            right.setBounds(0, 0, right.getIntrinsicWidth(), right.getIntrinsicHeight());
        }
        if (top != null) {
            top.setBounds(0, 0, top.getIntrinsicWidth(), top.getIntrinsicHeight());
        }
        if (bottom != null) {
            bottom.setBounds(0, 0, bottom.getIntrinsicWidth(), bottom.getIntrinsicHeight());
        }
        setCompoundDrawables(left, top, right, bottom);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

通过源码可以看到setCompoundDrawablesWithIntrinsicBounds 中通过Drawable.getIntrinsicWidth和Drawable.getIntrinsicHeight来获取图片的大小，调用setBounds设置drawable为固定宽高，然后再调用setCompoundDrawables 进行设置了。这也就是在xml中设置drawable时总显示为图片的宽高了，无法对drawable大小进行控制的原因了。当想在xml中控制drawable大小时，就必须要重写这个方法了。

知道了原因后就可以进行扩展了，下面介绍下如果进行扩展：
首先在res/values/attrs 文件中声明自定义属性 (如果没有atrrs 文件，鼠标右键自己创建一个)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRadioButton">
        <attr name="drawableSizes" format="dimension"/><!--drawable的大小-->
        <attr name="drawableTop" format="reference"/><!--显示在上方的图片-->
        <attr name="drawableLeft" format="reference"/><!--显示在左边的图片-->
        <attr name="drawableRight" format="reference"/><!--显示在右边的图片-->
        <attr name="drawableBottom" format="reference"/><!--显示下边的图片-->
    </declare-styleable>

</resources>
1
2
3
4
5
6
7
8
9
10
11

创建一个MyRadioButton类继承RadioButton

public class MyRadioButton extends RadioButton {
    private int mDrawableSize;//drawable大小

    public MyRadioButton(Context context) {
        this(context,null);
    }

    public MyRadioButton(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyRadioButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Drawable drawableLeft=null;
        Drawable drawableRight=null;
        Drawable drawableBottom=null;
        Drawable drawableTop=null;

        TypedArray a=context.obtainStyledAttributes(attrs, R.styleable.MyRadioButton);//获取自定义属性
        int n=a.getIndexCount();
        for(int i=0;i<n;i++){
            int attr=a.getIndex(i);
            switch (attr){
                case R.styleable.MyRadioButton_drawableSizes:
                    mDrawableSize=a.getDimensionPixelSize(R.styleable.MyRadioButton_drawableSizes,50);//获取drawable大小，没设置时默认为50dp
                    break;
                case R.styleable.MyRadioButton_drawableTop:
                    drawableTop=a.getDrawable(attr);//获取显示在上方的drawable
                    break;
                case R.styleable.MyRadioButton_drawableBottom:
                    drawableBottom=a.getDrawable(attr);//获取显示在下方的drawable
                    break;
                case R.styleable.MyRadioButton_drawableRight:
                    drawableRight=a.getDrawable(attr);//获取显示在右方的drawable
                    break;
                case R.styleable.MyRadioButton_drawableLeft:
                    drawableLeft=a.getDrawable(attr);//获取显示在左方的drawable
                    break;
                default:
                    break;
            }
        }
        a.recycle();
        setCompoundDrawablesWithIntrinsicBounds(drawableTop,drawableBottom,drawableLeft,drawableRight);//调用重写的方法进行设置drawable的大小.
    }


   //重写TextView中的setCompoundDrawablesWithIntrinsicBounds的方法
    @Override
    public void setCompoundDrawablesWithIntrinsicBounds(Drawable top,Drawable bottom,Drawable left,Drawable right){
        if(left!=null){
            left.setBounds(0,0,mDrawableSize,mDrawableSize);//drawable的bounds设置为了我们自定义大小了，第三个参数是设置宽度，第四个参数是设置高度，这里我就只设置了同一个也就是正方形了，如果想设置矩形的可以声明2个不同的自定义属性来设置。
        }
        if(right!=null){
            right.setBounds(0,0,mDrawableSize,mDrawableSize);
        }
        if(top!=null){
            top.setBounds(0,0,mDrawableSize,mDrawableSize);
        }
        if(bottom!=null){
            bottom.setBounds(0,0,mDrawableSize,mDrawableSize);
        }
        setCompoundDrawables(left,top,right,bottom);//设置完了bounds就可以调用这个方法进行设置了 不用在代码中进行动态控制了。
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

使用方法：

xmlns:custom="http://schemas.android.com/apk/res-auto"//在根布局中引入自定义属性的命名空间

<customView.MyRadioButton //目录名.MyRadioButton 
            android:id="@+id/MainActivity_btn_personal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:text="消息"
            android:gravity="center_horizontal"//内部横向居中
            android:drawablePadding="3dp"
            android:clickable="true" //设置为可点击
            custom:drawableTop="@drawable/tab_icon_personal"//自定义为上边显示的图片
            custom:drawableSizes="25dp"自定义为drawable的大小了
            />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完了 就可以随心所欲的在xml中控制drawable大小了

但美工给的drawable的尺寸不合适时 ，就可以在XML中设置固定大小了