Android自定义仪表盘视图

之前项目中用到了仪表盘这种视图，所以自己就画了一个，封装了起来，以便于以后使用，但是本人比较懒，好久才把博客发布出来==（愧疚）。

首先来分析一下画仪表盘的步骤，首先是画出画那个仪表盘的那个表盘，表盘分为两部分，一部分是没有选中的那部分灰色的，

还有一部分是选中的彩色的，我们先画出那个灰色的再画出那个彩色的，然后再画指针部分，指针也分为两部分，首先是那个圆圈，

然后是一个三角形，然后根据选中的角度，旋转到合适的角度就可以了。来不及解释了，上代码吧。来看看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