自定义TextView实现设置drawable图片大小

在开发项目的过程中有到过很多难题，例如途中的左侧个人中心栏中的四个图标，该如何实现呢？

大概有两种方式解决

方法1：一个LinearLayout里面放一个ImageView和一个TextView

方法2：一个TextView然后设置drawableLeft

下面的是问题：

方法1：巨麻烦！要写三个控件，还要嵌套。要是一行多几个这样的控件，一整个页面得嵌套多少层啊？太麻烦了。。。

方法2：这个不错，直接设置drawableLeft（四个方向都行）搞定。但是，这个drawable的大小是不能够通过代码设置大小的！而且在代码里也没提供重新设置这个图片的方式，只能在xml布局文件中。是个坑！也走不通！

这次就和各位老司机分享一个最简单的自定义View，一起走向繁荣富强！

Come on baby ,按照自定义View的四大步骤走起！

自定义View的步骤：

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

3、重写onMesure

4、重写onDraw

这次的自定义View继承于TextView，不用重新计算宽高，因为TextView 会帮我们计算，这就是继承自带控件的好处。

开始了：

　1、自定义View的属性　

按照需求，属性有：drawable，drawable宽度，drawable高度，drawable位置

在 /value/attrs.xml 中这么写：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MoreTextView">
<attr name="drawable_src" format="reference"/>
<attr name="imageHight" format="dimension"/>
<attr name="imageWidth" format="dimension"/>
<attr name="imageLocation">
<enum name="left" value="0"/>
<enum name="top" value="1"/>
<enum name="right" value="2"/>
<enum name="bottom" value="3"/>
</attr>
</declare-styleable>
</resources>

2.在View的构造方法中获得我们自定义的属性

public class MoreTextView extends TextView {
public static final int LEFT = 0, TOP = 1, RIGHT = 2, BOTTOM = 3;
private int mHight, mWidth, mLocation;
private Bitmap mImage;

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

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

public MoreTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MoreTextView, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {

case R.styleable.MoreTextView_imageWidth:
mWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 0, getResources().getDisplayMetrics()));
break;
case R.styleable.MoreTextView_imageHight:
mHight = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 0, getResources().getDisplayMetrics()));
break;
case R.styleable.MoreTextView_drawable_src:
mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
break;
case R.styleable.MoreTextView_imageLocation:
mLocation = a.getInt(attr, LEFT);
break;
}
}
a.recycle();

drawPicture();//设置图片方法

}
}

为什么开始就说这是一个很简单的自定义View呢？因为这里不用重写onDraw方法，因为这里没有什么需要绘制的。

核心方法：

textView.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
//参数分表代表左，上，右，下。使用drawable,不设置就设置null

下面是设置drawable的代码：

private void drawPicture() {
if (mImage != null) {
Drawable mDrawable;
if (mHight != 0 && mWidth != 0) {
mDrawable = new BitmapDrawable(getResources(), getRealBitmap(mImage));
} else {
mDrawable = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(mImage, mImage.getWidth(), mImage.getHeight(), true));
}
switch (mLocation) {
case LEFT:
this.setCompoundDrawablesWithIntrinsicBounds(mDrawable, null,
null, null);
break;
case TOP:
this.setCompoundDrawablesWithIntrinsicBounds(null, mDrawable,
null, null);
break;
case RIGHT:
this.setCompoundDrawablesWithIntrinsicBounds(null, null,
mDrawable, null);
break;
case BOTTOM:
this.setCompoundDrawablesWithIntrinsicBounds(null, null, null,
mDrawable);
break;
}

}

}

private Bitmap getRealBitmap(Bitmap image) {
//根据需要Drawable原来的大小和目标宽高进行裁剪（缩放）
int width = image.getWidth();// 获得图片的宽高
int height = image.getHeight();
// 取得想要缩放的matrix参数
float scaleWidth = (float) mWidth / width;
float scaleHeight = (float) mHight / height;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 返回新的Bitmap
return Bitmap.createBitmap(image, 0, 0, width, height, matrix, true);

}

这样下来获取到的的Drawable才是完整的，按照我们想要的大小缩放后的Drawable

<com.example.captain_shan.myapplication.views.MoreTextView
android:id="@+id/moreTextview"
android:layout_marginTop="10dp"
android:layout_below="@+id/volume"
android:text="这是一条巴哥犬"
android:textColor="#ee00ee"
custom:imageLocation="top"
android:drawablePadding="5dp"
custom:imageHight="20dp"
custom:imageWidth="20dp"
android:background="#eeeeee"
custom:drawable_src="@drawable/dog"
android:layout_width="50dp"
android:layout_height="50dp"/>

记得根部局要获得自定义的空间哦（空间名称随你起），压脉带。。。。



是不是很简单呢？而且TextView的各种属性也可以照用，爽。