Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >自定义圆环进度条

自定义圆环进度条

作者头像
六月的雨
发布于 2018-05-14 06:41:32
发布于 2018-05-14 06:41:32
1.5K00
代码可运行
举报
文章被收录于专栏:Android开发指南Android开发指南
运行总次数:0
代码可运行

使用自定义控件绘制一个圆环,需要重现的方法是OnDraw()实现对view的绘制,从而输出符合自己需求的view控件

观察圆环的组成部分:

外层圆+中间百分比文字+不断变化进度的弧形圈

--->分析:每一个组成部分需要的属性,构成几个关键的自定义属性

         1:外层圆的颜色

         2:弧形进度圈的颜色

         3:中间百分比文字的颜色

         4:中间百分比文字的大小

         5:圆环的宽度(作为进度弧形圈的宽度)

         6:*首页当中也有一个圆环进度,为了兼容使用首页的圆环进度,增加一个自定义属性,绘制进度弧形圈的风格(实心[Fill],空心[Stroken])

分析完毕-->绘制步骤:

1:构造方法当中初始化画笔对象,获取自定义的属性值.

2:重写Ondraw方法

  ---2.1:绘制最外层的圆

         -关键方法canvas.drawCircle(center, center, radius, paint); //画出圆环

         *:计算半径、中心点坐标、画笔设置

        中心点坐标

        int center = getWidth() / 2; //获取圆心的x坐标

        半径:

        int radius = (int) (center - roundWidth/2) ---画图说明最容易理解

  ---2.2:绘制中间的百分比文字

        --关键方法:canvas.drawText(percent + "%", center - textWidth / 2, center + textSize / 2, paint); //画出进度百分比

                    测量画笔上的文本宽度

                    float textWidth = paint.measureText(percent + "%");

         画笔设置

         绘制的文字的位置,由参数2,3的X,Y坐标值决定--圆环的中心点位置显示

         X:表示从哪开始绘制,如果你直接中心点开始绘制-->画图说明最容易理解

         -->正确的X=center - textWidth / 2;Y = center + textSize / 2 --(因为android坐标系与数学坐标系Y轴值是相反的,也可以画图说明,这里的textsize就可以代表高度,paint.measureText测量方法执行之后,默认的文字高度就是根据文字大小计算的,相当于wrap_content,所以textSize就是本身文字所占的高度值)

         *:绘制的进度要转换为百分比形式:int percent = (int) (((float) progress / (float) max) * 100);

  ---2.3:绘制进度弧形圈

        ---关键方法:canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧

        参数解释:

        oval:绘制的弧形的范围轮廓

        0:从多少角度开始绘制

        360 * progress / max:绘制弧形扫过的角度对应的区域

        false:不包含圆心,如果是true,表示包含圆心

        paint:绘制使用的画笔

        画笔设置

        paint.setStrokeWidth(roundWidth); //设置进度弧形圈的宽度,必须保持和外层圆的StrokeWidth一致,确保弧形圈绘制的时候覆盖的范围就是外层圆的宽度

        paint.setColor(roundProgressColor); //设置进度的颜色  

        弧形范围计算

        RectF oval = new RectF(center - radius, center - radius, center

                + radius, center + radius); --->画图说明最容易理解

        *:注意,因为progress是相对于100当中占比多少,而弧形总共是按照角度分成360分的,所以绘制弧形圈指定参数扫过的区域角度需要计算转换一下

        =360 * progress / max(max=100)

最后提供一个设置进度,根据进度重新绘制圆环的方法

.....圆环绘制自定义控件分析end...........................................................................|

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
RoundProgress
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class RoundProgress extends View {
    private Paint paint = new Paint();
    private int roundColor;
    private int roundProgressColor;
    private int textColor;
    private float textSize;
    private float roundWidth;
    private int max = 100;
    private int progress = 50;
    public RoundProgress(Context context) {
        this(context, null);
    }
    public RoundProgress(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);
        //圆环的颜色
        roundColor = mTypedArray.getColor(R.styleable.RoundProgress_roundColor, Color.RED);
        //圆环进度的颜色
        roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgress_roundProgressColor, Color.GREEN);
        //中间进度百分比文字字符串的颜色
        textColor = mTypedArray.getColor(R.styleable.RoundProgress_textColor, Color.GREEN);
        //中间进度百分比的字符串的字体大小
        textSize = mTypedArray.getDimension(R.styleable.RoundProgress_textSize, 15);
        //圆环的宽度
        roundWidth = mTypedArray.getDimension(R.styleable.RoundProgress_roundWidth, 5);
        mTypedArray.recycle();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //第一步:绘制一个最外层的圆
        paint.setColor(roundColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        int center = getWidth() / 2;
        int radius = (int) (center - roundWidth / 2);
        canvas.drawCircle(center, center, radius, paint);
        //第二步:绘制正中间的文本
        float textWidth = paint.measureText(progress + "%");
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setStrokeWidth(0);
        canvas.drawText(progress + "%", center - textWidth / 2, center + textSize / 2, paint);
        //第三步:
        /**
         * 参数解释:
         * oval:绘制弧形圈所包含的矩形范围轮廓
         * 0:开始的角度
         * 360 * progress / max:扫描过的角度
         * false:是否包含圆心
         * paint:绘制弧形时候的画笔
         */
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        paint.setColor(roundProgressColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(oval, 0, 360 * progress / max, false, paint);
    }
    public void setProgress(int progress){
        this.progress = progress;
        if(progress>100){
            this.progress = 100;
        }
        postInvalidate();
    }
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundProgress">
        <attr name="roundColor" format="color"/>
        <attr name="roundProgressColor" format="color"/>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textColor" format="color"/>
        <attr name="textSize" format="dimension"/>
    </declare-styleable>
</resources>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <!-- 圆环进度-->
                <cn.wh.ui.RoundProgress
                    android:id="@+id/p_progresss"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    app:roundColor="@android:color/darker_gray"
                    app:roundProgressColor="@android:color/holo_red_dark"
                    app:roundWidth="10dp"
                    app:textColor="#18b4ed"
                    app:textSize="20sp">
                </cn.wh.ui.RoundProgress>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            int tempProgress = 0;
            try {
                while (tempProgress <= totalProgress) {
                    pProgresss.setProgress(tempProgress);
                    tempProgress++;
                    Thread.sleep(100);
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-04-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
自定义View之带进度百分比ProgressBar
实现思路,前四张图呢在自定义progressbar时没有加入text文本,文本是在xml布局时加上去的,最后一张是与progressbar定义在一起的。可以看到有以下几种情况
fanfan
2022/05/07
6540
自定义View之带进度百分比ProgressBar
Android 自定义View 之 圆环进度条
  很多时候我们会使用进度条,而Android默认的进度条是长条的,从左至右。而在日常开发中,有时候UI为了让页面更美观,就需要用到圆环进度条,那么本文就是通过自定义写一个圆环进度条,首先看一下效果图:
晨曦_LLW
2023/04/23
2.2K0
Android 自定义View 之 圆环进度条
018android初级篇之自定义圆形进度条
项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。
上善若水.夏
2018/09/28
5460
android自定义view圆形进度条
Android 自定义漂亮的圆形进度条 Android自定义View之画圆环(进阶篇:圆形进度条) Android 自定义View实例之进度圆环 Android花样loading进度条(二)-简单环形进度条 Android自定义圆形进度条 android自定义控件之圆形进度条(带动画)
tea9
2022/09/08
1.3K0
android自定义view圆形进度条
Android 自定义View 之 饼状进度条
  效果图感觉怎么样呢?下面我们来实现这个自定义View,依然是写在EasyView这个项目中,这是一个自定义View库,我会把自己写的自定义View都放在里面,文中如果代码不是很全的话,你可以找到文章最后的源码去查看,话不多说,我们开始吧。
晨曦_LLW
2023/06/10
3380
Android 自定义View 之 饼状进度条
Android自定义view流程
Android自定义view流程,主要目的是总结实现过程中的思路以及一些需要注意的地方。 首先,我们先来看一张效果图:
用户9227784
2021/12/14
5920
Android自定义控件之圆形进度条Android自定义控件之-圆形进度条
Android自定义控件之-圆形进度条 先上图: 填充的 环形的 贴代码不废话: ** CircleProgressBar.java ** package com.xiaolei.xiaoui; i
Xiaolei123
2018/06/28
5.6K0
android自定义view实现公章效果
上次去一个公司面试,面试官问了一个题,怎么用android的自定义view实现一个公章的效果,据说这是华为之前的面试题,我想了下,要是公章的效果,最外层是一个圆,里面是一个五角星,但是这文字怎么画呢,比较难搞,后来回来看了下java的api,发现人家的Path里面本来就提供了这么一个方法: public void addArc(RectF oval, float startAngle, float sweepAngle) { addArc(oval.left, oval.top, oval.righ
xiangzhihong
2018/02/01
9890
自定义View | 仿QQ运动步数进度效果
项目GitHub地址 思路 固定不动的蓝色大圆弧 动画变动的红色小圆弧 中间的步数文字显示 相关的自定义属性 比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属
凌川江雪
2020/09/01
4610
相关推荐
自定义View之带进度百分比ProgressBar
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验