RadioButton图片居中and修改图片大小

今天在工作中遇到一个关于RadioButton的问题。美工在给切图时候，图片和问题没有分开，所以在使用RedioButton时候，图片就没有办法居中，而且图片大小还不好修改，研究了一下，记录下来：

首先先上xml代码

<RadioButton
android:id="@+id/main_tab"
android:layout_width="match_parent"
style="@style/main_bottom_tab_style"
android:layout_weight="1"
android:layout_height="match_parent"
android:drawableTop="@drawable/tab_btn_club"/>

因为图片和文字没有分开，所以我们只要用drawableTop就可以将图片添加到RadioButton里面。但是问题来了，RadioButton因为是drawableTop，所以图片肯定是不居中的。那应该怎么办呢？查了很多资料，发现还是重写RadioButton最靠谱。

先上参考资料：文字和自定义图片居中的RadioButton

然后上代码：

/**
* Created by wuxiangyi on 2016/10/27.
* 底部图片居中
*/

public class DrawableCenterRadioButton extends RadioButton {

public DrawableCenterRadioButton(Context context) {
super(context);
}

public DrawableCenterRadioButton(Context context, AttributeSet attrs) {
super(context, attrs);
}

public DrawableCenterRadioButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@Override
protected void onDraw(Canvas canvas) {

Drawable[] drawables = getCompoundDrawables();
if (drawables != null) {
Drawable drawable = drawables[1];
float textWidth = getPaint().measureText(getText().toString());
int drawablePadding = getCompoundDrawablePadding();
float bodyWidth = textWidth + drawablePadding;
//居中显示图片
int width = (int) getResources().getDimension(R.dimen.main_bottom_icon_size);
int height = width * drawable.getIntrinsicHeight() / drawable.getIntrinsicWidth();
int imageY = (this.getHeight() - height - (int) bodyWidth) / 2;

drawable.setBounds(0, 0, width, height);
canvas.translate(0, imageY);
}
super.onDraw(canvas);
}

}

在这里，我们只需要修改onDraw方法就可以了。在onDraw里面写修改逻辑。

步骤如下：

先要获取RadioButton里面的图片。

Drawable[] drawables = getCompoundDrawables();

来看一下getCompoundDrawables()源码：

/**
* Returns drawables for the left, top, right, and bottom borders.
*
* @attr ref android.R.styleable#TextView_drawableLeft
* @attr ref android.R.styleable#TextView_drawableTop
* @attr ref android.R.styleable#TextView_drawableRight
* @attr ref android.R.styleable#TextView_drawableBottom
*/
@NonNull
public Drawable[] getCompoundDrawables() {
final Drawables dr = mDrawables;
if (dr != null) {
return dr.mShowing.clone();
} else {
return new Drawable[] { null, null, null, null };
}
}

可以看到获取到的drawables 是一个数组，里面放置的是包括drawableLeft，drawableTop，drawableRight，drawableBottom四张图片。那这四张图片对应的是那个呢？我们来看一下Drawables这个类里面

static final int LEFT = 0;
static final int TOP = 1;
static final int RIGHT = 2;
static final int BOTTOM = 3;

从这里可以看到left对应drawables[0],top对应drawable[1]。依次类推。根据我们最开始写的xml文件，因为我们设置的是drawableTop属性，所以我们获取RadioButton里面的图片

Drawable drawable = drawables[1];这样我们就拿到需要的图片了。

我们接着要就要让图片居中，怎么办呢？这里就涉及到canvas.translate(float dx, float dy)方法，也就是平移。将图片平移到居中久ok了。dx是沿着x轴移动，dy是沿着y轴移动。所以我们只需要知道RadioButton的长度和宽度，还有图片的长度和宽度，久可以将图片移到任意位置。对translate要有这样一个认识，当我们图片在（100，100）时候调用translate（1，2），并不是移动到（1，2），而是在（100，100）基础上移动到（101，102）。当然canvas还有很多方法，像旋转，缩放，扭曲等等。参考博客：canvas变换与操作

我们既然知道用translate方法，只要知道移动的距离久能移动到我们需要的地方了。接下来就是计算出移动的距离久OK了。移动的距离怎么算呢？首先我们要知道RadioButton的长和宽度。

int mRadioWidth = getWidth();
int mRadioHeight = getHeight();

那么图片的长和宽度怎么获取呢？我们知道之前我们已经拿到图片drawable了，只需要

int mDrawableWidth = drawable.getIntrinsicWidth();
int mDrawableHeight = drawable.getIntrinsicHeight();

然后还需要考虑什么呢？首先是图片padding的高度，这个我们可以:

int drawablePadding = getCompoundDrawablePadding();

如果有文字，那么还得考虑到文字的宽度：

float textWidth = getPaint().measureText(getText().toString());

等等。。

这样的话，那我们需要移动的长度根宽度久能计算出来了。然后只需要调用canvas.translate(x，y)就可以移动到居中位置啦。

修改图片大小

参考博客：Drawable类，在不同分辨率下的设置

@Override
protected void onDraw(Canvas canvas) {
drawable.setBounds(100, 100, 500, 500);
drawable.draw(canvas);
}

上面的代码会将drawable绘制在canvas内部(100,100,500,500)表示的矩形区内（这个矩形区域的坐标是以canvas左上角为坐标原点的）