正文 

当前位置： 首页 > java > java教程

androidui系列-view实现圆形进度条

SingleShu888 SingleShu888     2022-12-13     105

关键词：

我就不从canvas和paint开始说了，onMeasure,onLayout,onDraw这些方法的介绍和源码解析。网上一搜很多。一篇解释不清楚，多看几篇。话不多说了，先看看效果吧。

做成gif显示会有问题。我们先来分析一下需要什么数据、
1、需要一个进度
2、需要进度条基本信息，颜色，宽度，大小
3、需要字体大小，颜色

那么就来看看具体逻辑。

package com.example.administrator.myapplication.circle;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.example.administrator.myapplication.R;

/**
 * Created by ShuWen on 2017/6/10.
 */

public class CircleProgressBar extends View 

    //进度条背景色
    private int mCircleBgColor = Color.BLUE;
    //进度条文字展示颜色
    private int mTextColor = Color.GRAY;
    //进度条宽度
    private float mCircleWidth = 50;
    //进度条颜色
    private int mProgressColor = Color.GREEN;
    //进度条展示文字大小
    private float mTextSize = 50;

    private int progress;
    private int max = 100;


    private Paint paint = new Paint();


    public CircleProgressBar(Context context) 
        super(context);
        init(context,null);
    

    public CircleProgressBar(Context context, @Nullable AttributeSet attrs) 
        super(context, attrs);
        init(context,attrs);
    

    public CircleProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    

    public void init(Context context,AttributeSet attrs)
        TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.CircleProgressBar);
        mCircleBgColor = array.getColor(R.styleable.CircleProgressBar_mCircleBgColor,Color.BLUE);
        mTextColor = array.getColor(R.styleable.CircleProgressBar_mTextColor,Color.GRAY);
        mProgressColor = array.getColor(R.styleable.CircleProgressBar_mProgressColor,Color.GREEN);
        mCircleWidth = array.getDimension(R.styleable.CircleProgressBar_mCircleWidth,50);
        mTextSize = array.getDimension(R.styleable.CircleProgressBar_mTextSize,50);

        array.recycle();
    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);
        //画背景
        paint.setColor(mCircleBgColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(mCircleWidth);
        int center = getWidth() / 2;

        int radius = (int) (center - mCircleWidth / 2);
        canvas.drawCircle(center,center,radius,paint);

        //写文字
        int percent = (int) (( progress / (float)max ) * 100);
        String percentStr = percent + "%";
        paint.setStrokeWidth(0);
        paint.setColor(mTextColor);
        paint.setTextSize(mTextSize);
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        if (progress != 0)
            canvas.drawText(percentStr,center - paint.measureText(percentStr) / 2,
                    center + (fm.bottom - fm.top) / 2 -fm.bottom,paint);
        

        //画弧形
        RectF oval = new RectF(center - radius,center - radius,center + radius,center + radius);
        paint.setStrokeWidth(mCircleWidth);
        paint.setColor(mProgressColor);
        paint.setStrokeCap(Paint.Cap.ROUND);

        canvas.drawArc(oval,0,360 * progress/max,false,paint);
    

    //设置进度条
    public void setProgress(int progress)
        if (progress > max)
            progress = max;
        
        if (progress <= max)
            this.progress = progress;
            postInvalidate();

需要自定义的属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressBar">
        <attr name="mCircleBgColor" format="color"/>
        <attr name="mTextColor" format="color"/>
        <attr name="mCircleWidth" format="dimension"/>
        <attr name="mTextSize" format="dimension"/>
        <attr name="mProgressColor" format="color"/>
    </declare-styleable>
</resources>

详细布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.administrator.myapplication.MainActivity">

<com.example.administrator.myapplication.circle.CircleProgressBar
        android:id="@+id/progressBar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:mCircleBgColor="#ff00ff"
        app:mCircleWidth="10dp"
        app:mProgressColor="#00ff00"
        app:mTextColor="#000"
        app:mTextSize="20dp"
        />
</RelativeLayout>

ManActivity，开启一个线程，休眠100ms，重新设置进度。

package com.example.administrator.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.administrator.myapplication.circle.CircleProgressBar;
import com.example.administrator.myapplication.flow.WaterFallLayout;

import java.util.Random;


public class MainActivity extends AppCompatActivity 

    WaterFallLayout waterfall;

    private static int IMG_COUNT = 5;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final CircleProgressBar progressBar = (CircleProgressBar) findViewById(R.id.progressBar);
        progressBar.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                new Thread(new Runnable() 
                    @Override
                    public void run() 
                        int progress = 0;
                        while (progress <= 100)
                            progress += 2;

                            progressBar.setProgress(progress);
                            try 
                                Thread.sleep(100);
                             catch (InterruptedException e) 
                                e.printStackTrace();
                            
                        
                    
                ).start();
            
        );

圆形进度条呢，网上其实很多。写的也很详细，我这里只是做一个学习笔记。

compose自定义条形进度条(代码片段)

...更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没有现成的条形进度条，所以我... 查看详情

compose自定义条形进度条(代码片段)

...更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没有现成的条形进度条，所以我... 查看详情

android自定义view之圆形进度条

...真相，直接看图：简单自定义了一个比较通用的圆形进度条，像上图所示的可以定义圆的半径，进度颜色，宽度，中间字体等信息。下面我就一步一步来为大家讲解：1、首先我们先要找出有哪些属性需... 查看详情

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：  查看详情

异步下载圆形进度条显示进度

圆形进度条参考链接即可：使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度：1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 2.遮罩层：.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情

wpf实现圆形进度条(代码片段)

 WPF实现圆形进度条控件名：CircularProgressBar作 者：WPFDevelopersOrg-驚鏵原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40；VisualStudio2019;CircularProgressBar继承ProgressB 查看详情

qt第三方圆形进度条-及其改进

Qt第三方圆形进度条的改进要实现一个圆形的进度条功能，在网上找到一个比较出名的第三方封装类：QRoundProgressBar，地址：sourceforge的QRoundProgressBar 功能封装的还是不错，提供了3种模式，线形、圆环、饼状。使用过程中发现... 查看详情

如何只实现一个圆形进度条，直到图像被滑动加载

】如何只实现一个圆形进度条，直到图像被滑动加载【英文标题】：Howtoimplementonlyonecircularprogressbaruntilimagesareloadedwithglide【发布时间】：2021-08-2406:49:15【问题描述】：您好，我只想实现一个圆形进度动画，直到从滑行加载图像，... 查看详情

android中的圆形进度条

...inandroid【发布时间】：2015-09-1318:26:05【问题描述】：我想实现一些圆形进度条，中间有一个按钮，就像在whatsapp中一样。有谁知道一个好的图书馆来实现这一点？我想要完成的是这个。【问题讨论】：请求站外资源被认为是StackOv... 查看详情

如何创建圆形样式进度条

...发布时间】：2011-06-1918:24:09【问题描述】：我需要帮助来实现这样的循环进度条：我应该如何通过增加Value属性来实现Circle来填充？【问题讨论】：相关链接已损坏。请在问题中插入图片。【参考方案1】：您有几个选项-第一个... 查看详情

compose自定义条形进度条(代码片段)

...更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没有现成的条形进度条，所以我... 查看详情

圆形进度条 Android

...倒数计时器。（来源：jiaojianli.com）到目前为止，我能够实现类似于倒数计时器但没有段或块概念的圆形进度条。【问题讨论】：【 查看详情

如何在android中实现材料设计圆形进度条

】如何在android中实现材料设计圆形进度条【英文标题】：Howtoimplementamaterialdesigncircularprogressbarinandroid【发布时间】：2015-01-0501:04:38【问题描述】：我想制作一个类似于InboxbyGmailandroid应用中的MaterialDesign圆形进度条。我如何实现... 查看详情

android之自定义圆形进度条

...页面以提高用户体验。对于这样的进度条，最简单的实现方式就是通过美工给我们切几张不同的图片，最后通过帧动画的方式来实现。通过帧动画实现固然可以，但是对美工的依赖很大。所以 查看详情

svg的圆形进度条(代码片段)

 目前发现svg实现一些动画效果是比较高效简单的。如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title 查看详情

一起talkandroid吧（第四百九十六回：自定义view实例二：环形进度条）

文章目录知识回顾实现思路实现方法示例代码各位看官们大家好，上一回中咱们说的例子是"如何使用Java版MQTT客户端",这一回中咱们说的例子是"自定义View实例二：环形进度条"。闲话休提，言归正转，让我们一起TalkAndroid吧！知... 查看详情

androidui系列-viewgroup实现瀑布流

其实瀑布流现在用的越来越少了，更多的是使用MD的风格了。风靡一时的瀑布流现在渐渐地开始退居后幕了。不过，瀑布流也是个不错的自定义控件练习方式。相对简单的实现逻辑，可以帮助更好的更快的上手ViewGroup... 查看详情

html5动画：canvas实现圆形进度条并显示数字百分比

实现效果1.首先创建html代码<canvasid="canvas"width="500"height="500"style="background:#000;"></canvas>2.创建canvas环境varcanvas=document.getElementById(‘canvas‘),//获取canvas元素context=canvas.getContext(‘2d 查看详情