自定义View实战（一） 汽车速度仪表盘

博客地址：http://blog.csdn.net/lxk_1993/article/details/51373269
废话不说 先上效果图。

是不是很酷炫.
看起来觉得很难？ 不难 ， 其实实现起来很容易。
思路：

1.绘制一个实心的圆做仪表盘背景。

    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(0xFF343434);
    canvas.drawCircle(pointX, pointY, raduis, mPaint);

2.绘制外面的两个圆环 和 里面的 两个圆环。

    //外圈2个圆
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(0xBF3F6AB5);
    mPaint.setStrokeWidth(4 * mDensityDpi);
    canvas.drawCircle(pointX, pointY, raduis, mPaint);
    mPaint.setStrokeWidth(3 * mDensityDpi);
    canvas.drawCircle(pointX, pointY, raduis - 10 * mDensityDpi, mPaint);

    //内圈2个圆
    mPaint.setStrokeWidth(5 * mDensityDpi);
    mPaint.setColor(0xE73F51B5);
    canvas.drawCircle(pointX, pointY, raduis / 2, mPaint);
    mPaint.setColor(0x7E3F51B5);
    canvas.drawCircle(pointX, pointY, raduis / 2 + 5 * mDensityDpi, mPaint);
    mPaint.setStrokeWidth(3 * mDensityDpi);

3.绘制仪表盘的刻度。

/**
 * 绘制刻度
 */
private void drawScale(Canvas canvas) {
    for (int i = 0; i < 60; i++) {
        if (i % 6 == 0) {
            canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 50 * mDensityDpi, pointY, mPaint);
        } else {
            canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 30 * mDensityDpi, pointY, mPaint);
        }
        canvas.rotate(6, pointX, pointY);
    }
}

4.绘制仪表盘的速度标识和中间的速度 和 单位 文字。（这里有好的处理方法请留言）

/**
 * 绘制速度标识文字
 */
private void drawText(Canvas canvas, int value) {
    String TEXT = String.valueOf(value);
    switch (value) {
        case 0:
            // 计算Baseline绘制的起点X轴坐标
            baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textPaint.measureText(TEXT) / 2 + textScale / 2);
            // 计算Baseline绘制的Y坐标
            baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) + textScale / 2);
            break;
        case 30:
            baseX = (int) (pointX - raduis + 50 * mDensityDpi + textPaint.measureText(TEXT) / 2);
            baseY = (int) (pointY + textScale);
            break;
        case 60:
            baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textScale);
            baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
            break;
        case 90:
            baseX = (int) (pointX - sRaduis * Math.cos(2 * Math.PI / 5) - textScale / 2);
            baseY = (int) (pointY - sRaduis * Math.sin(2 * Math.PI / 5) + 2 * textScale);
            break;
        case 120:
            baseX = (int) (pointX + sRaduis * Math.sin(Math.PI / 10) - textPaint.measureText(TEXT) / 2);
            baseY = (int) (pointY - sRaduis * Math.cos(Math.PI / 10) + 2 * textScale);
            break;
        case 150:
            baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
            break;
        case 180:
            baseX = (int) (pointX + sRaduis - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY + textScale);
            break;
        case 210:
            baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
            baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) - textScale / 2);
            break;

    }
    canvas.drawText(TEXT, baseX, baseY, textPaint);
}

/**
 * 绘制中间文字内容
 */
private void drawCenter(Canvas canvas) {
    //速度
    textPaint.setTextSize(60 * mDensityDpi);
    float tw = textPaint.measureText(String.valueOf(speed));
    baseX = (int) (pointX - tw / 2);
    baseY = (int) (pointY + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
    canvas.drawText(String.valueOf(speed), baseX, baseY, textPaint);

    //单位
    textPaint.setTextSize(20 * mDensityDpi);
    tw = textPaint.measureText("km/h");
    baseX = (int) (pointX - tw / 2);
    baseY = (int) (pointY + raduis / 4 + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
    canvas.drawText("km/h", baseX, baseY, textPaint);
}

5.绘制速度范围的扇形区域。

/**
 * 绘制速度区域扇形
 */
private void drawSpeedArea(Canvas canvas) {
    int degree;
    if (speed < 210) {
        degree = speed * 36 / 30;
    } else {
        degree = 210 * 36 / 30;
    }

    canvas.drawArc(speedRectF, 144, degree, true, speedAreaPaint);

    // TODO: 2016/5/12
    //不显示中间的内圈的扇形区域
    mPaint.setColor(0xFF343434);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawArc(speedRectFInner, 144, degree, true, mPaint);
    mPaint.setStyle(Paint.Style.STROKE);


}

6.实现点击让 速度动起来。实现runnable 接口。

@Override
public void run() {
    int speedChange;
    while (start) {
        switch (type) {
            case 1://油门
                speedChange = 3;
                break;
            case 2://刹车
                speedChange = -5;
                break;
            case 3://手刹
                speed = 0;
            default:
                speedChange = -1;
                break;
        }
        speed += speedChange;
        if (speed < 1) {
            speed = 0;
        }
        try {
            Thread.sleep(50);
            setSpeed(speed);
        } catch (InterruptedException e) {
            e.printStackTrace();
            break;
        }
    }
}

在activity中启动线程，设置监听

    //设置监听
    speedUp.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //按下的时候加速
                    speedControlView.setType(1);
                    break;
                case MotionEvent.ACTION_UP:
                    //松开做自然减速
                    speedControlView.setType(0);
                    break;
            }
            return true;
        }
    });
    speedDown.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //按下的时候减速
                    speedControlView.setType(2);
                    break;
                case MotionEvent.ACTION_UP:
                    //松开做自然减速
                    speedControlView.setType(0);
                    break;
            }
            return true;
        }
    });
    shutDown.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //按下的时候拉手刹
                    speedControlView.setType(3);
                    break;
                case MotionEvent.ACTION_UP:
                    //松开做自然减速
                    speedControlView.setType(0);
                    break;
            }
            return true;
        }
    });


@Override
protected void onResume() {
    super.onResume();
    if (speedControlView != null) {
        speedControlView.setSpeed(0);
        speedControlView.setStart(true);
    }
    new Thread(speedControlView).start();

}

补上速度的设置函数

// 设置速度 并重绘视图
public void setSpeed(int speed) {
    this.speed = speed;
    postInvalidate();
}

搞定.
看，是不是很简单。
如果你喜欢我写的文章，请关注我。
我的博客：http://blog.csdn.net/lxk_1993
欢迎留言拍砖。

项目地址：
github: https://github.com/103style/SpeedControl 觉得可以的话点下star
csdn:http://download.csdn.net/download/lxk_1993/9518999

如果觉得不错的话，请帮忙点个赞呗。

以上

扫描下面的二维码，关注我的公众号 Android1024， 点关注，不迷路。

Android1024

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,723评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,003评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,512评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,825评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,874评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,841评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,812评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,582评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,033评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,158评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,789评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2赞 352

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,042评论 25赞 707
  • 梦境记录师2
    我的工作是梦境纪录师，专门负责记录别人的梦。 窗外艳阳高照，阳光飘落在办公室里，暖暖的。我坐在电脑旁，咖啡的浓香已...
    刘某人阅读 270评论 0赞 0
  • 只是见了面，就要被包养？
    一大清早，我还在睡梦中，杨柳小姐就打电话约我逛街，聪明如我自然知道不是逛街那么简单的事，一定是有新闻有故事了。 于...
    热淇淋阅读 453评论 1赞 8
  • 一分钟，Offer 就缺你
    非油炸------健康最重要 职位招聘： 一、电商运营 1人（4500-7500...
    Kala00阅读 198评论 1赞 2
  • 你看不到你的孩子，也别怪孩子看不见你
    语言在表达爱的时候如此无力 表达伤害的时候，却又如此锋利 所以别让语言变成刀子彼此伤害 还记得之前因为女儿特别爱听...
    文刀祐阅读 1,059评论 6赞 10