Android View实现圆形进度条

本文实例为大家分享了Android View实现圆形进度条的具体代码,供大家参考,具体内容如下

主要涉及到下面几个方法:

// 画圆
canvas.drawCircle
// 画圆弧
canvas.drawArc
// 画文本
canvas.drawText
// 抗锯齿
paint.setAntiAlias(true);
// 设置颜色
paint.setColor(getResources().getColor(mFgColor, null));

其次就是对坐标的计算,还有注意就是画圆弧的时候,起始从-90度开始才是垂直上方。
效果图:

自定义View:

public class MyView extends View {
    // 线宽度
    private static final int mStrokeWidth = 50;
    private int mVal = 0;
    private static final int mMaxVal = 200;
    private int mGgColor = R.color.arcbg;
    private int mFgColor = R.color.arcfg;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    // 设置值
    public void setProgressValue(int val){
        this.mVal = val;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        drawBGCircle(canvas, width, height);
        drawFGArc(canvas, width, height);
        drawText(canvas, width, height);
    }

    // 文本
    private void drawText(Canvas canvas, int width, int height) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(getResources().getColor(mFgColor, null));
        paint.setTextSize(120);
        int percent = (int) (( mVal / (float) mMaxVal ) * 100);
        canvas.drawText(percent + "%", (width - paint.measureText(percent + "%")) / 2, (height + paint.measureText("%")) / 2, paint);
    }

    // 圆弧
    private void drawFGArc(Canvas canvas, int width, int height) {
        Paint paint = new Paint();
        paint.setColor(getResources().getColor(mFgColor, null));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mStrokeWidth);
        paint.setAntiAlias(true);
        RectF mRectF = new RectF(mStrokeWidth, mStrokeWidth, width - mStrokeWidth, height - mStrokeWidth);
        int sweepAngle = (int) (360 * mVal / (float) mMaxVal);
        canvas.drawArc(mRectF, -90, sweepAngle, false, paint);
    }

    // 底部圆形
    private void drawBGCircle(Canvas canvas, int width, int height) {
        int r = (width - 2 * mStrokeWidth) / 2;
        Paint cPaint = new Paint();
        cPaint.setColor(getResources().getColor(mGgColor, null));
        cPaint.setStyle(Paint.Style.STROKE);
        cPaint.setStrokeWidth(mStrokeWidth);
        cPaint.setAntiAlias(true);
        canvas.drawCircle(width / 2, height / 2, r, cPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getSize(widthMeasureSpec, 200);
        int height = getSize(heightMeasureSpec, 200);
        setMeasuredDimension(width, height);
    }

    private int getSize(int widthMeasureSpec, int defultSize) {
        int realSize = defultSize;
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        switch (mode){
            case MeasureSpec.UNSPECIFIED:
                realSize = defultSize;
                break;
            case MeasureSpec.AT_MOST:
                realSize = size;
                break;
            case MeasureSpec.EXACTLY:
                realSize = size;
                break;
        }
        return realSize;
    }
}

然后在布局文件中引用:

<com.weizu.myapplication.view.MyView
        android:id="@+id/myView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

最后,我们设置其点击效果,并开始耗时操作模拟:

MyView view = findViewById(R.id.myView);
view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        new Thread(new Runnable() {
            @Override
            public void run() {
                int val = 0;
                while(val <= 200){
                    view.setProgressValue(val);
                    val++;
                    try {
                        Thread.sleep(20);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • android中实现OkHttp下载文件并带进度条

    OkHttp是比较火的网络框架,它支持同步与异步请求,支持缓存,可以拦截,更方便下载大文件与上传文件的操作.下面我们用OkHttp来下载文件并带进度条! 相关资料: 官网地址:http://square.github.io/okhttp/ github源码地址:https://github.com/square/okhttp 一.服务器端简单搭建 可以参考搭建本地Tomcat服务器及相关配置这篇文章. 新建项目OkHttpServer,在WebContent目录下新建downloadfile目录

  • Android 七种进度条的样式

    当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

  • 实例详解Android自定义ProgressDialog进度条对话框的实现

    Android SDK已经提供有进度条组件ProgressDialog组件,但用的时候我们会发现可能风格与我们应用的整体风格不太搭配,而且ProgressDialog的可定制行也不太强,这时就需要我们自定义实现一个ProgressDialog. 通过看源码我们发现,ProgressDialog继承自Alertdialog,有一个ProgressBar和两个TextView组成的,通过对ProgressDialog的源码进行改进就可以实现一个自定义的ProgressDialog. 1.效果: 首先

  • Android中实现Webview顶部带进度条的方法

    写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码 代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi

  • android ListView和ProgressBar(进度条控件)的使用方法

    ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<

  • Android中自定义进度条详解

    Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子 很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如: ok,我们开始吧: 一)变换前背景 先来看看progressbar的属性: 复制代码 代码如下: <ProgressBar             android:id="@+id/progressBar"             style="?android:attr/progressBarStyleHor

  • Android文件下载进度条的实现代码

    main.xml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_paren

  • Android 动态改变SeekBar进度条颜色与滑块颜色的实例代码

    遇到个动态改变SeekBar进度条颜色与滑块颜色的需求,有的是根据不同进度改变成不同颜色. 对于这个怎么做呢?大家都知道设置下progressDrawable与thumb即可,但是这样设置好就是确定的了,要动态更改需要在代码里实现. 用shape进度条与滑块 SeekBar设置 代码里动态设置setProgressDrawable与setThumb 画图形,大家都比较熟悉,background是背景图,secondaryProgress第二进度条,progress进度条: <layer-list

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android编程之ProgressBar圆形进度条颜色设置方法

    本文实例讲述了Android ProgressBar圆形进度条颜色设置方法.分享给大家供大家参考,具体如下: 你是不是还在为设置进度条的颜色而烦恼呢--别着急,且看如下如何解决. ProgressBar分圆形进度条和水平进度条 我这里就分享下如何设置圆形进度条的颜色吧,希望对大家会有帮助. 源码如下: 布局文件代码: <ProgressBar android:id="@+id/progressbar" android:layout_width="wrap_content

随机推荐