自定义表盘(未彻底完成)

看到大家都在自定义view玩。我也来玩一下，其实自定义View，画图不难，难的是数据的计算。如果你要做一个可扩展的View，里面的数据肯定是要灵活可变的。

这个时候，你就不可以把数据写死。下面是我自定义的View。

首先要搞清楚Canvas绘图的角度计算。0刻度不是在上方。Canvas里面的画弧度的起始度数(0)是以钟表的三点钟为0刻度的。

所以，第一步是要画3/4的圆弧的表盘。

/**
     * 绘制表盘
     *
     * @param canvas
     */
    private void drawPlate(Canvas canvas, RectF oval) {
        //开始画表盘,仪表盘不是一个完整的圆，是3/4的圆，所以起始度数是134度，结束点是44(404)度。
        for (int i = 134; i < 405; i += (270 / scales.length)) {
            canvas.drawArc(oval, i, 2, false, paint);
            //最后一个连结弧不要
            if (i + 270 / scales.length < 405) {
                canvas.drawArc(oval, i + 4, 270 / scales.length - 6, false, paint);
            }
        }
    }

其中指针是一个只有2°的弧。其中数组scales为仪表盘的刻度数值，可以自定义。

绘制了表盘之后，开始绘制表盘指针读数，比如汽车读数为50的时候，应该是怎么样的。

 /**
     * 绘制读数
     *
     * @param canvas
     */
    private void drawRegistration(Canvas canvas, RectF oval) {
        // 用来更改值，判断是否是动画
        int prog = isStartCartoom ? cartoomProgress : polluteNum;
        /*开始画读数颜色*/
        int index_pro = getProIndex(prog);//当前所处的段位，比如100，在默认数据中属于第二段。101属于第三段
        int start_degrees = 138;//开始画颜色的起始度数
        float rotation = 0f;//指针偏转角度
        Log.e("info", "prog=" + prog);
        Log.e("info", "index_pro=" + index_pro);
        for (int i = 0; i < index_pro; i++) {
            int d_value = i == 0 ? scales[0] : scales[i] - scales[i - 1];
            num_paint.setColor(colors[i % colors.length]);// 设置圆环的颜色
            int end1 = prog < scales[i] ? i == 0 ? prog : prog - scales[i - 1] : d_value;
            end1 = end1 * (270 / scales.length - 6) / d_value;// 算出来画的角度
            canvas.drawArc(oval, start_degrees, end1, false, num_paint);
            rotation = start_degrees + 90 + end1;
            start_degrees += 45;
        }
        if (contains(prog)) {
            rotation = 225 + (270 / scales.length) * (index_pro - 1);
            Log.e("info", "rotation=" + rotation);
        }
        //指针
        drawPointer(canvas, rotation);
    }

    /**
     * 绘制指针
     *
     * @param canvas
     * @param rotation
     */
    private void drawPointer(Canvas canvas, float rotation) {
        // 用来更改值，判断是否是动画
        int prog = isStartCartoom ? cartoomProgress : polluteNum;
        //圆心X的坐标
        int centre = getWidth() / 2;
        int radius = (int) (centre - roundWidth / 2); // 圆环的半径
        float scaleX = defaultWidth / width;
        float scaleY = defaultHeight / height;
        //表盘指针
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.chart_index);
        /* 控制旋转 */
        Matrix matrix = new Matrix();
        /**
         * 开始画指针
         */
        float sx = (float) ((getWidth() / bitmap.getWidth()) * 0.8);
        matrix.setScale(sx, sx);
        matrix.setRotate(rotation);
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
        canvas.drawBitmap(bitmap, (radius - bitmap.getWidth() / 2) + 10 * scaleX, radius - bitmap.getHeight() / 2 + 10 * scaleY,
                new Paint());
        bitmap.recycle();
        float text_size = text_paint.measureText(String.valueOf(prog));
        text_paint.setColor(colors[getProIndex(prog) % colors.length]);
        canvas.drawText(String.valueOf(prog), radius - text_size / 2, centre + bitmap.getHeight() / 2 + 30, text_paint);
 }

当前最不可少的当然需要一个动画了。没有动画怎么都感觉不好看。

通过Timer来实现的动画，你也可以通过轻量级的异步线程AsyncTask来实现

class CartoomEngine {
        public Handler mHandler;
        public boolean mBCartoom; // 是否正在作动画
        public Timer mTimer; // 用于作动画的TIMER
        public MyTimerTask mTimerTask; // 动画任务
        public int mTimerInterval; // 定时器触发间隔时间(ms)
        public float mCurFloatProcess; // 作动画时当前进度值


        @SuppressLint("HandlerLeak")
        public CartoomEngine() {
            mHandler = new Handler() {

                @Override
                public void handleMessage(Message msg) {
                    // TODO Auto-generated method stub
                    switch (msg.what) {
                        case TIMER_ID: {
                            if (mBCartoom == false) {
                                return;
                            }
                            mCurFloatProcess += 1;
                            setCartoomProgress((int) mCurFloatProcess);
                            if (mCurFloatProcess >= polluteNum) {
                                stopCartoom();
                            }
                        }
                        break;
                    }
                }

            };

            mBCartoom = false;
            mTimer = new Timer();
            mTimerInterval = 5;
            mCurFloatProcess = 0;

        }

        public synchronized void startCartoom(int time) {
            if (time <= 0 || mBCartoom == true) {
                return;
            }
            mBCartoom = true;
            isStartCartoom = true;
            setCartoomProgress(0);
            mCurFloatProcess = 0;
            mTimerTask = new MyTimerTask();
            mTimer.schedule(mTimerTask, 0, mTimerInterval);

        }

        public synchronized void stopCartoom() {

            if (mBCartoom == false) {
                return;
            }
            mBCartoom = false;
            setNum(polluteNum);
            isStartCartoom = false;
            if (mTimerTask != null) {
                mTimerTask.cancel();
                mTimerTask = null;
            }
        }

        private final static int TIMER_ID = 0x0010;

        class MyTimerTask extends TimerTask {

            @Override
            public void run() {
                Message msg = mHandler.obtainMessage(TIMER_ID);
                msg.sendToTarget();
            }

        }
    }

完整的代码链接在代码片里

https://code.youkuaiyun.com/snippets/2022443

指针图片在附件里