自定义Drawable实现MPAndroidChart的最值图标显示

两个多月没写文章了，这段时间忙着思考人生呐，五一小长假结束了，今天写一篇文章记录一下前段时间遇到的一个小问题，以能帮助到其他码农为核心，将开源精神发扬到底(我是一个热心肠的小码农)！！！GitHub传送门：https://github.com/SuperKotlin/CustomDrawable

chart图表.jpg

之前遇到这样一个UI效果图要实现（图右半部分），但是看了一下框架中添加icon的方法如下：

/**
 * A Entry represents one single entry in the chart.
 *
 * @param x the x value
 * @param y the y value (the actual value of the entry)
 * @param icon icon image
 */
public Entry(float x, float y, Drawable icon) {
    super(y, icon);
    this.x = x;
}

从代码形参中可以看出，只能添加一个Drawable作为icon显示，并没有提供自定义layout或者其他方法进行高扩展性的自定义icon显示，就是只能实现图左半部分那样的效果，那么只能自定义一个Drawable咯。

思路：

先来说一下实现思路，上个一目了然的草图先~

示意图

其实就是绘制一段路径啦，从坐标点1开始绘制(moveTo)，到坐标点2(lineTo)，再坐标点3(lineTo)，最后接着绘制一段圆弧到原点(addArc)，结束。

具体细节

注：示意图中的字母和代码中对应关系：2a→mExtendAngle、r→mCircleRadius、v→mDiamondVertical、h→mDiamondHorizontal。

• 先把圆弧的半径确定下来，设置为r，可以根据文字的宽度来计算出半径的长度，r可以稍微比文字宽度大一些，这样好看一点。

//获取文字宽度
float textWidth = mPaintText.measureText(mText, 0, mText.length());
mCircleRadius = textWidth / 2 + mCircleRadiusMagin;
/**
 * 我们限制一下最小值
 */
if (mCircleRadius < ScreenUtils.dip2px(mContext, 12)) {
    mCircleRadius = ScreenUtils.dip2px(mContext, 12);
}

• 设置菱形的内角的一半为a，如图，就可以根据a和r结合勾股定理求出v和h，这样菱形的对角线的长度就知道了。

/**
 * 圆的半径有了，接下来确定圆心坐标
 * 根据mExtendAngle和勾股定理计算出菱形对角线一半的长度
 */
float mDiamondVertical = (float) (Math.cos(Math.PI * (mExtendAngle / 2) / 180) * mCircleRadius);
float mDiamondHorizontal = (float) (Math.sin(Math.PI * (mExtendAngle / 2) / 180) * mCircleRadius);

• 进而确定圆心坐标和点1、3的坐标。2为原点(0,0)。

/**
 * 之所以存在正负号，是因为drawable存在绘制上方和下方的情况。
 * 菱形上(下)点坐标即圆心坐标是(0,±mDiamondVertical*2)
 * 菱形左点坐标：(-mDiamondHorizontal,±mDiamondVertical)
 * 菱形右点坐标：(-mDiamondHorizontal,±mDiamondVertical)
 */

• 开始绘制。

Path path = new Path();
path.moveTo(-mDiamondHorizontal, mIsUp ? -mDiamondVertical : mDiamondVertical);
path.lineTo(0, 0);
path.lineTo(mDiamondHorizontal, mIsUp ? -mDiamondVertical : mDiamondVertical);
RectF rectF = null;
if (mIsUp) {
    rectF = new RectF(-mCircleRadius, -(mDiamondVertical * 2 + mCircleRadius)
            , mCircleRadius, -(2 * mDiamondVertical - mCircleRadius));
    path.addArc(rectF, 90 + mExtendAngle / 2, 360 - mExtendAngle);
} else {
    rectF = new RectF(-mCircleRadius, 2 * mDiamondVertical - mCircleRadius
            , mCircleRadius, (mDiamondVertical * 2 + mCircleRadius));
    path.addArc(rectF, -(90 - mExtendAngle / 2), 360 - mExtendAngle);
}
canvas.drawPath(path, paint);

/**
 * 计算文字的坐标点
 */
float dx = -textWidth / 2;
Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
float baseLine = mIsUp ? (-mDiamondVertical * 2 + dy) : (mDiamondVertical * 2 + dy);
canvas.drawText(mText, dx, baseLine, mPaintText);

直接引用即可

CustomDrawable customDrawable = new CustomDrawable(mContext);
customDrawable.setmIsUp(true);
customDrawable.setmBackGroundColor(ContextCompat.getColor(mContext, R.color.color_green_alpa));
customDrawable.setmText(df.format(mMaxData) + " kg");
values3.add(new Entry(i, valList.get(i), customDrawable));

OK，自定义核心代码到此结束，下面按照惯例上全家福。

CustomDrawable.java

/**
 * 类文件：自定义drawable
 * 作者：zhuyong on 2018/5/2 11:15
 * 邮箱：[email protected]
 * 希望每天叫醒你的不是闹钟而是梦想
 */
public class CustomDrawable extends Drawable {

    private Paint mPaintText;
    private Paint paint;
    private String mText;
    private Context mContext;

    /**
     * 圆的半径，根据文字宽度计算而来
     */
    private float mCircleRadius;
    /**
     * 文字到圆边距,改变此值等于修改圆的padding值
     */
    private float mCircleRadiusMagin = 10;
    /**
     * 扩展角度(1-180°)，即菱形的内角,此值若大于180度则效果不会显示
     */
    private int mExtendAngle = 60;
    /**
     * 上面or下面
     */
    private boolean mIsUp = true;

    private int mBackGroundColor = Color.parseColor("#99000000");
    private int mTextColor = Color.parseColor("#333333");

    public CustomDrawable(Context mContext) {
        this.mContext = mContext;
        init();
    }

    /**
     * 设置上还是下
     *
     * @param mIsUp
     */
    public void setmIsUp(boolean mIsUp) {
        this.mIsUp = mIsUp;
    }

    /**
     * 设置背景颜色
     *
     * @param mBackGroundColor
     */
    public void setmBackGroundColor(int mBackGroundColor) {
        paint.setColor(mBackGroundColor);
    }

    /**
     * 设置绘制文字
     *
     * @param mText
     */
    public void setmText(String mText) {
        this.mText = mText;
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mBackGroundColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(0);

        mPaintText = new Paint();
        mPaintText.setColor(mTextColor);
        mPaintText.setTextSize(ScreenUtils.sp2px(mContext, 10));
        mPaintText.setAntiAlias(true);

    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        startDraw(canvas);
    }

    private void startDraw(Canvas canvas) {
        //获取文字宽度
        float textWidth = mPaintText.measureText(mText, 0, mText.length());
        mCircleRadius = textWidth / 2 + mCircleRadiusMagin;
        /**
         * 我们限制一下最小值
         */
        if (mCircleRadius < ScreenUtils.dip2px(mContext, 12)) {
            mCircleRadius = ScreenUtils.dip2px(mContext, 12);
        }

        /**
         * 圆的半径有了，接下来确定圆心坐标
         * 根据mExtendAngle和勾股定理计算出菱形对角线一半的长度
         */
        float mDiamondVertical = (float) (Math.cos(Math.PI * (mExtendAngle / 2) / 180) * mCircleRadius);
        float mDiamondHorizontal = (float) (Math.sin(Math.PI * (mExtendAngle / 2) / 180) * mCircleRadius);
        /**
         * 菱形上(下)点坐标即圆心坐标是(0,±mDiamondVertical*2)
         * 菱形左点坐标：(-mDiamondHorizontal,±mDiamondVertical)
         * 菱形右点坐标：(-mDiamondHorizontal,±mDiamondVertical)
         */

        Path path = new Path();
        path.moveTo(-mDiamondHorizontal, mIsUp ? -mDiamondVertical : mDiamondVertical);
        path.lineTo(0, 0);
        path.lineTo(mDiamondHorizontal, mIsUp ? -mDiamondVertical : mDiamondVertical);

        RectF rectF = null;
        if (mIsUp) {
            rectF = new RectF(-mCircleRadius, -(mDiamondVertical * 2 + mCircleRadius)
                    , mCircleRadius, -(2 * mDiamondVertical - mCircleRadius));
            path.addArc(rectF, 90 + mExtendAngle / 2, 360 - mExtendAngle);
        } else {
            rectF = new RectF(-mCircleRadius, 2 * mDiamondVertical - mCircleRadius
                    , mCircleRadius, (mDiamondVertical * 2 + mCircleRadius));
            path.addArc(rectF, -(90 - mExtendAngle / 2), 360 - mExtendAngle);
        }
        canvas.drawPath(path, paint);

        /**
         * 计算文字的坐标点
         */
        float dx = -textWidth / 2;
        Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();
        float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        float baseLine = mIsUp ? (-mDiamondVertical * 2 + dy) : (mDiamondVertical * 2 + dy);
        canvas.drawText(mText, dx, baseLine, mPaintText);
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return 0;
    }
}

GitHub传送门：源码