Android 自定义RadioButton 实现文字上下左右方向的图片大小设置

好久没有更新博客，写这篇技术时，感觉很多东西生疏了好多。于是心有感慨：我们做技术的，要是长时间不搞技术，那就是被技术搞！所以攻守之间，大家谨慎思量。

冬天已过，放假出去玩耍时，看到两旁嫩嫩的树叶，想起贺知章的诗句：

《咏柳》

碧玉妆成一树高,

万条垂下绿丝绦。

不知细叶谁裁出,

二月春风似剪刀。

犹自感叹，春天来了，，美腿还会远么

。

好了，闲言少叙，言归正传。

代码效果

前两天一个朋友提出的需求，用RadioButton实现的应用页面切换。效果图如下

这种想法很好，但也出现了两个问题：其一，界面扩展性很差；其二，RadioButton设置图片后，无法在xml中设置图片大小，导致布局不美观。那么问题来了？如何设置这个图片的大小。

百度常见的回答是，在代码中动态设置图片大小。然后设置在布局上。代码如下：

mRadioButton.setCompoundDrawables(left, top, right, bottom);参数类型都是Drawable，分别是左，上，右，下四个方向要显示的Drawable图片我们查看setCompoundDrawables(left, top, right, bottom)方法：有这样的一段说明：

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use null if you do not want a Drawable there. The Drawables must already have hadDrawable.setBounds called.

意思是说，用次方法之前，需要用Drawable.setBounds()方法来为Drawable图片设置边界，即要显示的大小。

达到同样效果的还有一个方法：

setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);进入源码查看该方法的具体实现：public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top,Drawable right, 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);}原来这个方法，同样调用了setCompoundDrawables(left, top, right, bottom)方法，并在调用之前，给传入的图片设置了边界范围，即图片自身的大小。再看这个方法的注释：

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use null if you do not want a Drawable there. The Drawables’ bounds will be set to their intrinsic bounds.

意思是说：设置drawable图像显示在文字的上下左右的位置，如果不想设置，则传递null参数。drawable图片的边界是其自身固定的边界范围。

OK，一切明了，那么是不是我们自己改变这个边界值参数，就能达到改变图片大小的目的呢？答案是肯定的。下面，是见证奇迹的时刻。首先，我们要在xml中用到设置图片大小的属性，这里用drawableSize来显示。然后分别给出四个方向的图片属性。最后我们得到的attrs.xml文件的内容为：

<?xml version="1.0" encoding="utf-8"?><resources><declare-styleable name="MyRadioButton"><attr name="drawableSize" format="dimension"/><attr name="drawableTop" format="reference"/><attr name="drawableLeft" format="reference"/><attr name="drawableRight" format="reference"/><attr name="drawableBottom" format="reference"/></declare-styleable></resources>规定了属性后，我们需要在代码中获取到这些属性，从而来在视图中显示我们需要的情况。

获取属性的代码如下：

Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = 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);Log.i("MyRadioButton", "attr:" + attr);switch (attr) {case R.styleable.MyRadioButton_drawableSize:mDrawableSize = a.getDimensionPixelSize(R.styleable.MyRadioButton_drawableSize, 50);Log.i("MyRadioButton", "mDrawableSize:" + mDrawableSize);break;case R.styleable.MyRadioButton_drawableTop:drawableTop = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableBottom:drawableRight = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableRight:drawableBottom = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableLeft:drawableLeft = a.getDrawable(attr);break;default :break;}}a.recycle();好了，这里我们已经获取到设置的图片，以及需要图片显示的大小drawableSize。接下来重写setCompoundDrawablesWithIntrinsicBounds方法。将我们需要的图片大小设置给图片。public void setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top, Drawable right, Drawable bottom) {if (left != null) {left.setBounds(0, 0, mDrawableSize, mDrawableSize);}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);}设置给图片后，不要忘了调用setCompoundDrawables(left, top, right, bottom)方法，我们要在视图中显示图片。这个方法的内容感兴趣的可以自己查阅源码。

到此，我们代码部分已经编写完毕。

接下来添加需要的图片资源以及xml布局设置。

使你疲倦的不是前面的高山，而是你鞋里的一粒沙子。

相关文章：

你感兴趣的文章：

标签云：