前言
在日常的android开发中,我们会经常用到drawable资源
比如设置icon:
imageView.setImageDrawable(R.drawable.ic_launcher);
先来看看什么是Drawable:
一般的drawable我们都是一张图
但其实我们也可以像自定义View一样
去自定义我们的Drawable
自己定义的Drawable
也可以绘制文字,形状,以及加入一些图片
做成自己需要的样子
本篇文章就通过实战来教你如何去自定义一个Drawable
效果分析
先看下效果图:
我们可以看到这个自定义的drawable有这么几个特点:
1:背景应该是一张切图,但是上面的文字是自己绘制的
2:左边的文字有描边效果
3:两个文字的位置摆放,左边的在爱心的中间,右边的文字靠在爱心的右边
下面来一步步实现这个效果
实现过程
首先我们自定义一个类来继承Drawable类:
public class MedalDrawable extends Drawable {
@Override
public void draw(@NonNull Canvas canvas) {
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
@Override
public int getOpacity() {
return 0;
}
}
可以看到要重写几个方法:
draw:绘制方法,这个自然不必说,和自定义View的绘制是一样的,相关的效果都是在这里绘制
setAlpha:设置Drawable的透明度,一般我们会把这个透明度传递给绘制的画笔,或者不做处理
setColorFilter:设置了一个颜色过滤器,那么在绘制出来之前,被绘制内容的每一个像素都会被颜色过滤器改变
getOpacity:获得不透明度,其值可以根据setAlpha中设置的值进行调整。比如,
alpha == 0时设置为PixelFormat.TRANSPARENT
在alpha == 255时设置为PixelFormat.OPAQUE;
在其他时候设置为PixelFormat.TRANSLUCENT
PixelFormat.OPAQUE:便是完全不透明,遮盖在他下面的所有内容
PixelFormat.TRANSPARENT:透明,完全不显示任何东西
PixelFormat.TRANSLUCENT:只有绘制的地方才覆盖底下的内容
另外还有两个方法:
getIntrinsicWidth
getIntrinsicHeight
获取内部宽度和高度,主要是为了在View使用wrap_content的时候,使用这两个方法返回的尺寸
接下来看我们的具体实现:
public MedalDrawable(int resId, String mText, Context mContext) {
this.mContext=mContext;
mBitmap = BitmapFactory.decodeResource(mContext.getResources(), resId);
this.mText = mText;
setBounds(0, 0, getIntrinsicWidth(), getIntrinsicHeight());
initPaint();//初始化勋章画笔
initThirdPaint();//初始化勋章等级画笔
}
要绘制bitmap,首先需要传进来一个资源id,然后传进来右边需要绘制的文字
左边的数字我们这里演示的时候先写死
然后就是设置下drawable的绘制区域以及初始化画笔
这边需要初始化两种画笔,分别绘制左右的文字,一个带描边效果,一个不带描边效果
最后说下描边效果怎么实现
其实原理很简单
就是绘制一个描边粗一点的文字在下面
然后把一个描边相对细一点的绘制在同样的上面
用到的就是设置画笔描边粗细的方法:
mStrokePaint.setStrokeWidth(4); //设置描边宽度
至于文字摆放的文字
是在绘制文字的时候去设置的
最后来看下源码
源码
最后放上图的资源和源码:
public class MedalDrawable extends Drawable {
private Bitmap mBitmap;
private String mText;
protected Context mContext;
Paint.FontMetricsInt fontMetrics;
int marginLeft = 62;//文字距离左侧边距
int strokeMarginLeft = 0;//描边文字距离左侧边距
int textSize = 20;//文字大小
private Paint mPaint;
private Rect bounds;
private String mThirdText="21";
private Paint mThirdPaint;//勋章等级数字
private Paint mStrokePaint;//文字描边
Paint.FontMetricsInt mThridFontMetrics;
private int strokeBaseline;
public MedalDrawable(int resId, String mText, Context mContext) {
this.mContext=mContext;
mBitmap = BitmapFactory.decodeResource(mContext.getResources(), resId);
this.mText = mText;
setBounds(0, 0, getIntrinsicWidth(), getIntrinsicHeight());
initPaint();//初始化勋章画笔
initThirdPaint();//初始化勋章等级画笔
}
private void initThirdPaint() {
mThirdPaint = new Paint();
mThirdPaint.setColor(Color.parseColor("#FFFFFF"));
mThirdPaint.setFakeBoldText(true);
mThirdPaint.setAntiAlias(true);
mThirdPaint.getTextBounds(mThirdText, 0, mThirdText.length(), new Rect());
mStrokePaint = new Paint();
mStrokePaint.setColor(Color.parseColor("#bf11e6"));
mStrokePaint.setFakeBoldText(true);
mStrokePaint.setAntiAlias(true);
mStrokePaint.setStrokeWidth(4); //设置描边宽度
mStrokePaint.setStyle(Paint.Style.STROKE);
mStrokePaint.getTextBounds(mThirdText, 0, mThirdText.length(), new Rect());
if (mThirdText.length() >= 2) {
mThirdPaint.setTextSize(mContext.getResources().getDimensionPixelSize(R.dimen.text_size_6));
mStrokePaint.setTextSize(mContext.getResources().getDimensionPixelSize(R.dimen.text_size_6));
} else {
mThirdPaint.setTextSize(mContext.getResources().getDimensionPixelSize(R.dimen.text_size_9));
mStrokePaint.setTextSize(mContext.getResources().getDimensionPixelSize(R.dimen.text_size_9));
}
mThridFontMetrics = mThirdPaint.getFontMetricsInt();
}
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setFakeBoldText(true);
mPaint.setAntiAlias(true);
bounds= new Rect();
mPaint.getTextBounds(mText, 0, mText.length(), bounds);
mPaint.setTextSize(textSize);
fontMetrics = mPaint.getFontMetricsInt();
}
@Override
public void draw(@NonNull Canvas canvas) {
//绘制勋章文字
int baseline = (getIntrinsicHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
canvas.drawBitmap(mBitmap, 0, 0, null);
canvas.drawText(mText, marginLeft, baseline, mPaint);
//绘制描边文字
strokeBaseline = (getIntrinsicHeight() - mThridFontMetrics.bottom + mThridFontMetrics.top) / 2 - mThridFontMetrics.top;
strokeMarginLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.dp_5);
if (mThirdText.length() == 1) {
strokeMarginLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.dp_8);
} else if (mThirdText.length() == 2) {
strokeMarginLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.dp_7);
} else if (mThirdText.length() == 3) {
strokeMarginLeft = mContext.getResources().getDimensionPixelOffset(R.dimen.dp_1);
}
canvas.drawText(mThirdText, strokeMarginLeft, strokeBaseline, mStrokePaint);
canvas.drawText(mThirdText, strokeMarginLeft, strokeBaseline, mThirdPaint);
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
@Override
public int getOpacity() {
return PixelFormat.UNKNOWN;
}
@Override
public int getIntrinsicWidth() {
return mBitmap.getWidth();
}
@Override
public int getIntrinsicHeight() {
return mBitmap.getHeight();
}
}