android自定义view学习（一）之时尚表盘

关注

原创最新推荐文章于 2025-09-20 08:35:16 发布 791 阅读 AI 写同款· GEO 优化 ›

手把手带你画一个时尚仪表盘 Android 自定义View 拿到美工效果图，咱们程序员就得画得一模一样。为了不被老板喷，只能多练啊。听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的。今天的效果图如下(左边是ui图右边是实现图)：自我感觉总体效果还不错，至少大概画得一样了。上一个动态图：其实这个效果实现起来也不是很难，就是计算坐标，弧度之类的可能会比较麻烦，这里分享写这个其中一张手稿，请无视掉很丑的字，其阅读详情

最近在学习自定义view，顺便谢谢自己的路程，后面回首看看以前的自己有多菜。。。。下方的是实现图，首先需要说明的是，这个效果是看了一遍博客，然后自己想着去实现，并给出此博客：点击打开链接

正文：首先学习自定义view需要稍稍入门一下，然后是各种函数的使用，以及大量的练习，至于入门的话，推荐鸿阳大神的博客，讲的非常详细：点击打开链接，然后自己的自定义view学习之路暂时跟着一篇博客走，有兴趣的朋友可以一起：点击打开链接

接下来进入我的实现过程了：（发现错误了，但是并不修正此博客，算是记录错误：onDraw这个方法，刷新界面就会执行，因此不要去new对象，不然会导致浪费大量的资源，关于path，因为不能重复的new，所以每次对path进行一下reset就好）

首先分析组成：一个粗圆，一个细圆，一个粗圆弧，一个细圆弧，一个进度线，几个刻度线

为了简便，此处不使用自定义属性

按照流程走：先测量一下宽高

if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY) {
    mWidth = MeasureSpec.getSize(widthMeasureSpec);
}
if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) {
    mHeight = MeasureSpec.getSize(heightMeasureSpec);
}
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);

因为自己学习过程中，先没有去弄wrap_content的布局，直接给的固定宽高，当然用wrap_content的时候，测量模式为ATMOST，只需要再处理一下即可

接着定义了一些成员变量

private int mHeight;
private int mWidth;
private Paint mPaint;
//正方形边长
private int rectWidth = 400;
//开始角度
private int startAngle = 135;
//扫过角度
private int endAngle = 270;
//外弧形边距
private int outsidePadding = 50;
//每一个线相距角度
private int everyArc = 30;
//圆心的x值与y值
private int centerArcX;
private int centerArcY;
//最内心圆圈直径
private int insideRadius = 15;
//中间圆的直径
private int insideTwoRadius = 30;
//大圆弧和最外层圆弧相距的距离
private int twoArcPadding = 60;
//大圆弧的粗度
private int bigArcWidth = 40;
//百分比进度
private float haveDownProgress = 0;
//一共画几次线
private float lineCount = 10;
//存储画线类的集合
private List<LineEntity> mLineEntities;

（自定义view的时候，疯狂注释是好习惯）

这个时候就可以开始绘制了

先画一个最外层的弧形：

//绘制最外层弧形
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(4);
mPaint.setStyle(Paint.Style.STROKE);
RectF rectf = new RectF(outsidePadding, outsidePadding, outsidePadding + rectWidth, outsidePadding + rectWidth);
canvas.drawArc(rectf, startAngle+10, endAngle-20, false, mPaint);

确定好矩形位置与角度，直接调用函数绘制即可

然后画里面的两个圆：

//画最内的圆圈
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(8);
canvas.drawCircle(centerArcX, centerArcY, insideRadius, mPaint);
//画中间的园
mPaint.setStrokeWidth(2);
canvas.drawCircle(centerArcX, centerArcY, insideTwoRadius, mPaint);

接着画最粗的圆弧，因为是进度表盘，进度分为两个区域（原谅我懒得制作动态图），大概为下面这个样子：

此处采用的方式为绘制两个不同弧度的圆弧，差别在于弧度和颜色不同

//画大圆弧，分为蓝色与白色区域，用同一个Recf
RectF rectFTwo = new RectF(outsidePadding + twoArcPadding, outsidePadding + twoArcPadding,
        outsidePadding + rectWidth - twoArcPadding, outsidePadding + rectWidth - twoArcPadding);
//画一个蓝色区域
mPaint.setColor(Color.YELLOW);
mPaint.setStrokeWidth(bigArcWidth);
canvas.drawArc(rectFTwo, startAngle, 270 * haveDownProgress + 2, false, mPaint);
//画一个白色区域
mPaint.setColor(Color.WHITE);
canvas.drawArc(rectFTwo, 270 * haveDownProgress + 135 - 2, 270 * (1 - haveDownProgress), false, mPaint);

就是这样。嗯。。。。有点蠢不过实现了

然后开始画进度线了，图上进度有线有10条，利用PathMeasure这个类可以获取到对应圆弧的x,y坐标点，这样画线就非常方便，不需要写算法去算坐标点了：

if (!(mLineEntities.size()>0)){
    //获取小圆弧的坐标点(画线有间隔，设置虚拟矩形)
    Path path = new Path();
    RectF rectFUse = new RectF(outsidePadding + twoArcPadding - 40, outsidePadding + twoArcPadding - 40,
            outsidePadding + rectWidth - twoArcPadding + 40, outsidePadding + rectWidth - twoArcPadding + 40);
    path.addArc(rectFUse, startAngle+10, endAngle-20);
    PathMeasure pathMeasure = new PathMeasure(path, false);
    for (int i = 0; i < lineCount; i++) {
        float[] coords = new float[]{0f, 0f};
        pathMeasure.getPosTan((i) * pathMeasure.getLength() / (lineCount - 1), coords, null);
        LineEntity lineEntity = new LineEntity();
        lineEntity.setEndX(coords[0]);
        lineEntity.setEndY(coords[1]);
        mLineEntities.add(lineEntity);
    }

    //获取大圆弧的坐标点
    Path pathTwo = new Path();
    pathTwo.addArc(rectf, startAngle+10, endAngle-20);
    PathMeasure pathMeasureTwo = new PathMeasure(pathTwo, false);
    for (int i = 0; i < lineCount; i++) {
        float[] coords = new float[]{0f, 0f};
        pathMeasureTwo.getPosTan((i) * pathMeasureTwo.getLength() / (lineCount - 1), coords, null);
        mLineEntities.get(i).setStartX(coords[0]);
        mLineEntities.get(i).setStartY(coords[1]);
    }
}

此处说明一下：mLineEntities这个类是我用来存储进度线的类集合，加size>0的目的是因为它是固定的，不需要重复获取，里面就是获取圆弧上点的坐标点位置，getPosTan()方法的意思是，将圆弧分为多少段，然后你想取的位置位于第几段，并且这个点的位置是跟着你画圆弧的方向走的，也就是顺时针第一个

然后开始画刻度线：

//开始画线
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(4);
for (LineEntity lineEntity : mLineEntities) {
    canvas.drawLine(lineEntity.getStartX(), lineEntity.getStartY(), lineEntity.getEndX(), lineEntity.getEndY(), mPaint);
}

大体都完事了，差一个指针，和绘制刻度线差不多

//画进度线
Path pathProgressSmall=new Path();
RectF rectFSmall=new RectF(centerArcX-insideRadius,centerArcY-insideRadius,centerArcX+insideRadius,centerArcY+insideRadius);
pathProgressSmall.addArc(rectFSmall, startAngle-2, endAngle+3);
PathMeasure pathMeasureSmall=new PathMeasure(pathProgressSmall,false);
float[] coordsSmall=new float[]{0f,0f};
pathMeasureSmall.getPosTan(haveDownProgress*pathMeasureSmall.getLength(),coordsSmall,null);

Path pathProgressBig=new Path();
RectF rectFBig=new RectF(outsidePadding + twoArcPadding+bigArcWidth/2, outsidePadding + twoArcPadding+bigArcWidth/2,
        outsidePadding + rectWidth - twoArcPadding-bigArcWidth/2, outsidePadding + rectWidth - twoArcPadding-bigArcWidth/2);
pathProgressBig.addArc(rectFBig, startAngle-2, endAngle+3);
PathMeasure pathMeasureBig=new PathMeasure(pathProgressBig,false);
float[] coordsBig=new float[]{0f,0f};
pathMeasureBig.getPosTan(haveDownProgress*pathMeasureBig.getLength(),coordsBig,null);

mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(4);
canvas.drawLine(coordsSmall[0],coordsSmall[1],coordsBig[0],coordsBig[1],mPaint);

这样的话，自定义view已经完事了，对外提供一个方法，用于控制进度：

public void onRefresh(float progress) {
    haveDownProgress = progress;
    invalidate();
}

到此结束，开始研究自定义view不久，可能写的很多地方有问题，新手可以借鉴一下，大神请多多包涵，并指出不合理的地方！谢谢各位

另外插一句，之前放上去的博客，它使用的旋转画布的方式实现，性能应该更好，此处只是放出了自己的实现方式，并且利用PathMeasure获取坐标点算是不同处得亮点（嘿嘿）

Android 自定义View（一）实现时钟表盘效果一、前言 Android 自定义View是高级进阶不可或缺的内容，日常工作中，经常会遇到产品、UI设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时，就只能自己动手撸一个效果。本文就带自定义View初学者手动撸一个效果，通过自定义View实现钟表功能，每行代码都有注释，保证易懂，看不懂你留言打我！！！二、实现效果先看效果图步骤分析实现以上效果，主要分为四个步骤：绘制外层表盘绘制刻度线绘制刻度数字绘制指针三、代码实现 1、绘制外层表盘外层表盘就是一个空心圆，只要获取圆的x、y 阅读详情

android自定义view学习（一）之时尚表盘

相关推荐