专栏首页Android开发经验Android自定义View-记录一个简单却又常见的效果实现

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 条评论
登录 后参与评论

相关文章

  • AsyncTask执行流程总览

    用户调用task.execute() => onPreExecute()=> 交给线程池sDefaultExecutor调度=> mFuture 配合 m...

    coderZhen
  • Butter Knife用法总结

    coderZhen
  • ExpandableStickyListHeadersListView遇到的一个问题

    coderZhen
  • 【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。

    本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

    马三小伙儿
  • 成为 Linux 终端高手的七种武器

    Linux 终端不仅是一个键入命令的地方。如若你能熟谙这些基础技巧,那么你会在绝大多数 Linux 发行版的默认使用的 Bash shell中游刃有余。 这是...

    小小科
  • reco-fetch

    In addition to the parameters given below, please combine other parameters MDN .

    神葳
  • Python:游戏:测试打字速度

    最近迷恋 Python 游戏,买了《Python游戏编程入门》[美] Jonathan S·Harbour 著 一书来看。

    丹枫无迹
  • 火热报名 | 后流量时代的营销焦虑,“增长鹅”如何突破?

    当前,各传统行业都在积极拥抱互联网,传统行业转型互联网营销、数字化营销已成为目前全行业呈现的新气象。在传统企业营销过程中,企业营销面临链条长、效率低、成本高等...

    腾讯企点
  • ASP.NET之预编译

    预编译好处:自然是很多的,比如比起动态编译,第一次访问的响应速度肯定是要快的,此外,还可以保护源代码,比如我们网站开发好之后,需要发送给别人部署,我们又不想别人...

    小明爱学习
  • 时代变迁和思维鸿沟

    平时有自己私下特别留意了关于赚钱和找机会创业这方面的信息,也付费进入到一些感兴趣的垂直社区看了很多别人的经验。有一点感慨。随便写写。不感兴趣的右上角叉掉。

    大数据技术与架构

扫码关注云+社区

领取腾讯云代金券