两个多月没写文章了，这段时间忙着思考人生呐，五一小长假结束了，今天写一篇文章记录一下前段时间遇到的一个小问题，以能帮助到其他码农为核心，将开源精神发扬到底(我是一个热心肠的小码农)！！！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
* 邮箱：99305919@qq.com
* 希望每天叫醒你的不是闹钟而是梦想
*/
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传送门：源码
