前言

在日常的android开发中，我们会经常用到drawable资源
比如设置icon：

imageView.setImageDrawable(R.drawable.ic_launcher);
1

先来看看什么是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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

可以看到要重写几个方法：
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();//初始化勋章等级画笔
    }
1
2
3
4
5
6
7
8

要绘制bitmap，首先需要传进来一个资源id，然后传进来右边需要绘制的文字
左边的数字我们这里演示的时候先写死
然后就是设置下drawable的绘制区域以及初始化画笔
这边需要初始化两种画笔，分别绘制左右的文字，一个带描边效果，一个不带描边效果
最后说下描边效果怎么实现
其实原理很简单
就是绘制一个描边粗一点的文字在下面
然后把一个描边相对细一点的绘制在同样的上面
用到的就是设置画笔描边粗细的方法：

mStrokePaint.setStrokeWidth(4); //设置描边宽度
1

至于文字摆放的文字
是在绘制文字的时候去设置的
最后来看下源码

源码

最后放上图的资源和源码：

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();
    }
}
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109