Android自定义View-记录一个简单却又常见的效果实现

上周遇到一个需求,用一个圆形进度条的形式来展示某项操作所占的比例,虽然类似的轮子已经有很多了,但是这种简单的自定义View个人觉得有时间的话,还是自己写写比较好。

首先来看一下效果图:

实现效果

分析: 从效果图可以看到,这个效果整体分为以下几部分:

  • 背景圆环
  • 进度圆弧
  • 终点小圆圈(进度为0和进度为100%的时候应当没有)
  • 内部三行文字

怎么实现: 分析出整体框架之后,思路其实已经很简单了,我是这样实现的:

  1. 画背景圆
  2. 按照当前进度计算出扫过的弧度来画一个圆弧
  3. 以第二步的圆弧结束位置为坐标,画两个大小不同的实心圆,达到设计效果
  4. 分别画三行文字

第三步中,在确定圆弧终点位置的时候用到了三角函数,这里简单画了一个图,很好理解:

三角函数计算圆弧终点位置坐标

以顶点为起点,圆半径为r,圆弧扫过的角度为α。

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

    private String title;
    private String num;
    private String unit;

    private float titleTextsize;
    private float numTextsize;
    private float unitTextsize;

    private int titleTextColor;
    private int numTextColor;
    private int unitTextColor;

    private float backCircleWidth;
    private float outerCircleWidth;

    private int backCircleColor;
    private int outerCircleColor;

    private float endCircleWidth;
    private int endCircleColor;

2.为了代码更加清晰,设置了如下Paint

private Paint backCirclePaint,//画背景圆
            outerCirclePaint,//画进度圆弧
            endCirclePaint,//画终点实心大圆
            endCirclePaint2,//画终点实心小圆
            titlePaint,//画第一行文字
            numPaint,//画第二行文字
            unitPaint;//画第三行文字

3.在onDraw方法中实现绘制操作

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int centerX = width / 2;
        int centerY = height / 2;

        //计算半径
        float radius = (width / 2) - outerCircleWidth + (outerCircleWidth - backCircleWidth) / 2;


        //画背景圆
        canvas.drawCircle(centerX, centerY, radius, backCirclePaint);

        //根据进度话扫过一定角度的圆弧
        RectF rectF = new RectF(outerCircleWidth / 2 + backCircleWidth / 2, outerCircleWidth / 2 + backCircleWidth / 2, width - outerCircleWidth / 2 - backCircleWidth / 2, height - outerCircleWidth / 2 - backCircleWidth / 2);
        canvas.drawArc(rectF, -90, 360 * currentPercent, false, outerCirclePaint);

        //画三行文字
        Rect textRect = new Rect();

        titlePaint.getTextBounds(title, 0, title.length(), textRect);
        canvas.drawText(title, width / 2 - textRect.width() / 2, height / 4 + textRect.height() / 2, titlePaint);

        numPaint.getTextBounds(num, 0, num.length(), textRect);
        canvas.drawText(num, width / 2 - textRect.width() / 2, height / 2 + textRect.height() / 2, numPaint);

        unitPaint.getTextBounds(unit, 0, unit.length(), textRect);
        canvas.drawText(unit, width / 2 - textRect.width() / 2, height * 2 / 3 + textRect.height() / 2, unitPaint);


        //我这里规定进度在0~100%的时候才会画终点小圆,可以自由改动
        if (currentPercent < 1 && currentPercent > 0) {
            canvas.drawCircle(centerX + rectF.width() / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180),
                    centerY - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 2, endCirclePaint);


            canvas.drawCircle(centerX + rectF.width() / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180),
                    centerY - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 4, endCirclePaint2);

        }
    }

完整代码地址

代码

切换到progressviewwithcircle这个moudle运行即可看到效果,有兴趣的小伙伴可以看下,希望大佬们有其他更好的实现方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。 SVG滤镜绝对称得上是他最强大的功能之一...

2118
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

1712
来自专栏欧阳大哥的轮子

路径布局-基于数学函数的视图布局方法

路径布局MyPathLayout是MyLayout布局体系中的第7种布局体系,在这种布局体系中您只需要提供一个坐标轴、一个曲线函数、以及视图之间的距离这三个要素...

692
来自专栏我就是马云飞

自定义角标库

前言 角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView,可能Butt...

2607
来自专栏Coding迪斯尼

实现红警式的建筑物拖拽生成特效

2153
来自专栏封碎

Android画图之Matrix(一) 博客分类: Android AndroidBlog

Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。

892
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

1862
来自专栏mySoul

css3过渡

transition 为一个简写属性,是一个transition-property (定义过渡的属性的名称)以及 transition-duration (定义...

1725
来自专栏黑泽君的专栏

4道html笔试小题

1525
来自专栏天天

框架设计续集(三)

1033

扫码关注云+社区

领取腾讯云代金券