之前项目中用到了仪表盘这种视图,所以自己就画了一个,封装了起来,以便于以后使用,但是本人比较懒,好久才把博客发布出来==(愧疚)。
首先来分析一下画仪表盘的步骤,首先是画出画那个仪表盘的那个表盘,表盘分为两部分,一部分是没有选中的那部分灰色的,
还有一部分是选中的彩色的,我们先画出那个灰色的再画出那个彩色的,然后再画指针部分,指针也分为两部分,首先是那个圆圈,
然后是一个三角形,然后根据选中的角度,旋转到合适的角度就可以了。来不及解释了,上代码吧。来看看onDraw函数。
@Override
protected void onDraw(Canvas canvas) {
canvas.drawArc(new RectF(mArcWidth, mArcWidth, mWidth - mArcWidth, mHeight - mArcWidth), 150, 240, false, mBackgroundCirclePaint);
canvas.drawArc(new RectF(mArcWidth, mArcWidth, mWidth - mArcWidth, mHeight - mArcWidth), 180, mSelectPercent, false, mSelectCirclePaint);
//画中间的小圆圈
canvas.drawCircle(mWidth / 2, mHeight / 2, mMinCircleRadius, mPointPaint);
//画指针
//选择画布角度
canvas.rotate(mSelectPercent, mWidth / 2, mHeight / 2);
Path path = new Path();
path.moveTo(mArcWidth / 2, mHeight / 2);
path.lineTo(mWidth / 2, mHeight / 2 + mMinCircleRadius);
path.lineTo(mWidth / 2, mHeight / 2 - mMinCircleRadius);
path.close();
canvas.drawPath(path, mPointPaint);
//再旋转回来
canvas.rotate(-1 * mSelectPercent, mWidth / 2, mHeight / 2);
mOldPercent = mSelectPercent;
}
这里面定义的字段有:
/**
* 默认的宽和高
*/
public static final int DEFAULT_WIDTH = 300;
public static final int DEFAULT_HEIGHT = 150;
/**
* 指针的默认颜色
*/
public static final int DEFAULT_POINT_COLOR = Color.parseColor("#313131");
private int mWidth;
private int mHeight;
/**
* 选择的弧度
*/
private float mSelectPercent = 0;
/**
* 一共的弧度
*/
private float mMaxPercent = 180;
/**
* 里面小圆的半径
*/
private int mMinCircleRadius = 30;
/**
* 指针的颜色
*/
private int mPointerColor;
//弧的宽度
private int mArcWidth;
//弧的颜色
private int mArcColor;
private Context mContext;
private Paint mBackgroundCirclePaint;
private Paint mSelectCirclePaint;
private Paint mPointPaint;
还有自定义属性文件:
<declare-styleable name="PanelView">
<attr name="maxPercent" format="float"/>
<attr name="selectPercent" format="float"/>
<attr name="arcColor" format="color"/>
<attr name="arcWidth" format="dimension"/>
<attr name="android:text"/>
<attr name="tikeCount" format="integer"/>
<attr name="pointerColor" format="color"/>
<attr name="pointerRadius" format="dimension"/>
<attr name="android:textSize"/>
</declare-styleable>
项目具体我放到了github上,里面还有其他的一些图表的封装,最近也在不断完善中,如果你有兴趣,可以加入进来(=-=)。
github地址:https://github.com/LiuShuaiQ/SimpleChart