当前位置:   article > 正文

Android 扩展RadioButton 灵活控制drawable的大小_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中设置固定大小了
这里写图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/733741
推荐阅读
相关标签
  

闽ICP备14008679号