Android自定义圆弧进度条加数字动态变化

本文实例为大家分享了Android自定义圆弧进度条数字变化的具体代码,供大家参考,具体内容如下

效果如下:

思路:一个内环圆弧和一个外环圆弧,因为有一个圆圈是在圆弧上做圆周运动,所以在画圆的时候必须要得到圆弧上的各个点的坐标,这里其实就用到了PathMeasure这个类,可以帮我们拿到这些点,在画圆弧的时候也理所应当的要使用path,然后根据外界动态的传值进行重绘就能达到动态的效果

代码如下:

public class ProgressPathRainbow extends View {
  private Paint outPaint;
  private Paint innerPaint;
  private Paint mTextPaint;
  private Paint mRmbTextPaint;
  private int mBorderWidth = 40;
  private int mCircleRadius = 40;
  private int mCurrentProgress = 0;
  private int mMaxProgress = 0;
  private int startAngle = 180;

  private int sweepAngels = 180;
  private Paint mCirclePaint;
  private String rmb = "¥";
  private String currentText = "0.0";

  public void setCurrentText(String currentText) {
    this.currentText = currentText;
  }

  //储存位置点
  private float[] pos =new float[2];

  public ProgressPathRainbow(Context context) {
    super(context);
    initPaint();
  }

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

  public ProgressPathRainbow(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initPaint();
  }

  private void initPaint(){
    outPaint = new Paint();
    outPaint.setColor(0xFFECECEC);
    outPaint.setAntiAlias(true);
    outPaint.setStyle(Paint.Style.STROKE);
    outPaint.setStrokeCap(Paint.Cap.ROUND);
    outPaint.setStrokeWidth(mBorderWidth);

    //
    innerPaint = new Paint();
    innerPaint.setColor(0xffFBA123);
    innerPaint.setAntiAlias(true);
    innerPaint.setStyle(Paint.Style.STROKE);
    innerPaint.setStrokeCap(Paint.Cap.ROUND);
    innerPaint.setStrokeWidth(mBorderWidth);

    mCirclePaint = new Paint();
    mCirclePaint.setColor(Color.WHITE);
    mCirclePaint.setStyle(Paint.Style.FILL);

    mTextPaint = new Paint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setColor(0xffE5423D);
    mTextPaint.setFakeBoldText(true);
    mTextPaint.setTextSize(SizeUtils.sp2px(42));

    mRmbTextPaint = new Paint();
    mRmbTextPaint.setAntiAlias(true);
    mRmbTextPaint.setColor(0xffE5423D);
    mRmbTextPaint.setTextSize(SizeUtils.sp2px(18));

  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    if (width >= height){
      setMeasuredDimension(height,height);
    }else {
      setMeasuredDimension(width,width);
    }

  }

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

    RectF rectF = new RectF(mBorderWidth,mBorderWidth,getWidth()-mBorderWidth,getHeight()-mBorderWidth);
    //画内环圆弧
    Path outerPath = new Path();
    outerPath.arcTo(rectF,startAngle,sweepAngels);
    canvas.drawPath(outerPath,outPaint);
    //画外环圆弧
    Path innerPah = new Path();
    float percent = (float)mCurrentProgress/mMaxProgress;
    innerPah.arcTo(rectF,startAngle,percent*sweepAngels);
    canvas.drawPath(innerPah,innerPaint);

    //画金额
    String tempText = new BigDecimal(currentText).multiply(new BigDecimal(percent)).setScale(1, RoundingMode.HALF_UP).toString();
    Rect textBounds = new Rect();
    mTextPaint.getTextBounds(tempText, 0, tempText.length(), textBounds);
    int dx = getWidth()/2 - textBounds.width()/2;
    // 基线 baseLine
    Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
    int dy = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
    int baseLine = getHeight()/3 + dy;
    canvas.drawText(tempText,dx,baseLine,mTextPaint);

    //画人民币符号

    Rect textBoundRmbs = new Rect();
    mTextPaint.getTextBounds(rmb, 0, rmb.length(), textBoundRmbs);
    int dxRmb = dx-50;
    // 基线 baseLine
    Paint.FontMetricsInt fontMetricsRmb = mTextPaint.getFontMetricsInt();
    int dyRmb = (fontMetricsRmb.bottom - fontMetricsRmb.top)/2 - fontMetricsRmb.bottom;
    int baseLineRmb = getHeight()/3 + dyRmb;
    canvas.drawText(rmb,dxRmb,baseLineRmb,mRmbTextPaint);

    //获取圆弧上点的位置(坐标,画一个圆)
    PathMeasure pathMeasure = new PathMeasure(outerPath,false);
    boolean posTan = pathMeasure.getPosTan(pathMeasure.getLength() * percent, pos, null);
    canvas.drawCircle(pos[0],pos[1],mCircleRadius,mCirclePaint);

  }

  public synchronized void setmCurrentProgress(int mCurrentProgress) {
    this.mCurrentProgress = mCurrentProgress;
    invalidate();
  }

  public synchronized void setmMaxProgress(int mMaxProgress) {
    this.mMaxProgress = mMaxProgress;
  }
}

以上就可以实现这个效果

使用的话可以这样

detailRainbowPr.setmMaxProgress(100);
detailRainbowPr.setCurrentText("99.9");
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 100);
    valueAnimator.setDuration(5000);
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(valueAnimator1 -> {
      float step = (float) valueAnimator1.getAnimatedValue();
      detailRainbowPr.setmCurrentProgress((int) step);
    });
    valueAnimator.start();

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

时间: 2020-07-20

Android自定义View实现圆环带数字百分比进度条

分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:

Android自定义View实现带数字的进度条实例代码

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

Android自定义View实现水平带数字百分比进度条

这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下: 思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度:第二部分是右侧灰色的直线,代表未完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置. view代码如下: public class NumberProgress

android自定义view实现数字进度条

之前看到过一个数字进度条,一直想写,今天就把这个实现下,想起来也是很简单的,先看下实现的效果: 思路: 绘制2根线 绘制进度条的文字,不断的改变起点和终点,然后没多少时间去更新UI就ok,在这就不画图了,看代码就看的明白,不要想的很复杂! package com.tuya; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import a

Android实现简洁的APP更新dialog数字进度条

前言:现在一般的Android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.当有更新时,会弹出一个提示框,点击下载,则在通知来创建一个数字进度条进行下载,下载成功后才到安装界面. 效果:  开发环境:AndroidStudio2.2.1+gradle-2.14.1 涉及知识: 1.Handler机制 2.自定义控件+Canvas绘画 3.自定义dialog 部分代码: public class NumberProgressBar extends V

Android自定义控件实现带文本与数字的圆形进度条

本文实例为大家分享了Android实现圆形进度条的具体代码,供大家参考,具体内容如下 实现的效果图如下所示: 第一步:绘制下方有缺口的空心圆,称为外围大弧吧 anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4); 第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值 第三步:绘制数字.文字.百分号 第四步:使用Handler Runnable

Android实现带数字的圆形进度条(自定义进度条)

开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

Android带圆形数字进度的自定义进度条示例

开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

Android带进度的圆形进度条

我们还是用一个小例子来看看自定义View和自定义属性的使用,带大家来自己定义一个带进度的圆形进度条,我们还是先看一下效果吧 从上面可以看出,我们可以自定义圆环的颜色,圆环进度的颜色,是否显示进度的百分比,进度百分比的颜色,以及进度是实心还是空心等等,这样子是不是很多元化很方便呢?接下来我们就来教大家怎么来定义 1.在values下面新建一个attrs.xml,现在里面定义我们的属性,不同的属性对应不同的format,接下来我贴上我在自定义这个进度条所用到的属性 <?xml version="

Android三种方式实现ProgressBar自定义圆形进度条

进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大 设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现 定义res/a

android自定义进度条渐变圆形

在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下. 效果图: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度

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

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

Android studio圆形进度条 百分数跟随变化

本文实例为大家分享了Android studio圆形进度条展示的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity impl

Android 可拖动的seekbar自定义进度值

最近接了个项目其中有需要要实现此功能:seekbar需要显示最左和最右值,进度要跟随进度块移动.下面通过此图给大家展示下效果,可能比文字描述要更清晰. 其实实现起来很简单,主要是思路.自定义控件的话也不难,之前我的博客也有专门介绍,这里就不再多说. 实现方案 这里是通过继承seekbar来自定义控件,这样的方式最快.主要难点在于进度的显示,其实我很的是最笨的方法,就是用了一个popwindow显示在进度条的上方,然后在移动滑块的时候实时的改变它显示的横坐标.看进度显示的核心代码: private

Android编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)

本文实例讲述了Android编程实现自定义ProgressBar样式.分享给大家供大家参考,具体如下: 效果图如下,本例中设置了第一级进度条和第二级进度条. 样式资源:progressbar_bg.xml,放在drawable文件夹下: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/a

Android编程自定义进度条颜色的方法详解

本文实例讲述了Android编程自定义进度条颜色的方法.分享给大家供大家参考,具体如下: 先看效果图: 老是提些各种需求问题,我觉得系统默认的颜色挺好的,但是Pk不过,谁叫我们不是需求人员呢,改吧! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到: <style name="Widget.ProgressBar"&