Android自定义View之仪表盘

新建项目，新建DashBoardView继承自View实现OnGlobalLayoutListener接口，并重写OnDraw方法。
使用OnGlobalLayoutListener接口需要重写onGlobalLayout方法，在这个方法中我们将获取View的宽高。

新建如下变量：

private Context mContext;
    private Paint mCirclePaint,mDegreePaint,mHourPaint,mMinPaint;
    private int mViewWidth,mViewHeight;

初始化这些变量：

public void init(Context context){
        mContext = context;
        mCirclePaint =  new Paint(Paint.ANTI_ALIAS_FLAG);
        mDegreePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHourPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mMinPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStrokeWidth(5);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mHourPaint.setStrokeWidth(20);
        mMinPaint.setStrokeWidth(10);
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

onGlobalLayout中初始化DashBoardView宽高：

@Override
    public void onGlobalLayout() {
        mViewHeight = getHeight();
        mViewWidth = getWidth();
    }

在onDraw方法中添加如下绘制代码：

/* * 画表盘圆形 * */
        canvas.drawCircle(mViewWidth/2,mViewHeight/2,mViewWidth/2,mCirclePaint);
        /* * 画刻度 * */
        for (int i=0;i<24;i++){
            if(i==0 || i==6 || i==12 || i==18){
                /* * 画整点刻度 * */
                mDegreePaint.setStrokeWidth(5);
                mDegreePaint.setTextSize(30);
                canvas.drawLine(mViewWidth/2,mViewHeight/2-mViewWidth/2,mViewWidth/2,mViewHeight/2-mViewWidth/2+60,mDegreePaint);
                String degree = String.valueOf(i);
                canvas.drawText(degree,mViewWidth/2-mDegreePaint.measureText(degree)/2,mViewHeight/2-mViewWidth/2+90,mDegreePaint);
            }else{
                mDegreePaint.setStrokeWidth(3);
                mDegreePaint.setTextSize(15);
                canvas.drawLine(mViewWidth/2,mViewHeight/2-mViewWidth/2,mViewWidth/2,mViewHeight/2-mViewWidth/2+30,mDegreePaint);
                String degree = String.valueOf(i);
                canvas.drawText(degree,mViewWidth/2-mDegreePaint.measureText(degree)/2,mViewHeight/2-mViewWidth/2+90,mDegreePaint);
            }
            /* * 通过旋转画布来画好所有的刻度 * */
            canvas.rotate(15,mViewWidth/2,mViewHeight/2);
        }
        /* * 画指针 * */
        mHourPaint.setStrokeWidth(20);
        mMinPaint.setStrokeWidth(10);
        canvas.save();
        canvas.translate(mViewWidth/2,mViewHeight/2);
        canvas.drawLine(0,0,100,100,mHourPaint);
        canvas.drawLine(0,0,100,200,mMinPaint);
        canvas.restore();

至此我们就完成了一个仪表盘的绘制。效果图如下：

完整代码下载：完整项目