Android自定义控件之圆形进度条动画

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

首先贴上图片:

额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围之内了。

下面说重点,如何来写一个这样的自定义控件。

首先,需要有一个灰色的底图,来作为未填充时的进度条;

然后,根据传入的当前进度值,绘制填充时的进度圆弧,这段圆弧所对应的圆心角,由当前进度与进度的最大值(一般是100)的比值计算得出;

其次,根据进度值绘制文字提示;

最后,重绘控件,加上动画,从而达到显示进度的效果。

代码如下:

1、attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <declare-styleable name="circleProgressBar">
    <attr name="circleWidth" format="dimension" />
    <attr name="betaAngle" format="integer" />
    <attr name="firstColor" format="color" />
    <attr name="secondColor" format="color" />
  </declare-styleable>

</resources>

2、CircleProgressBar.java

package com.ctgu.circleprogressbar;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.OvershootInterpolator;

public class CircleProgressBar extends View
{
 /**
 * 进度条最大值,默认为100
 */
 private int maxValue = 100;

 /**
 * 当前进度值
 */
 private int currentValue = 0;

 /**
 * 每次扫过的角度,用来设置进度条圆弧所对应的圆心角,alphaAngle=(currentValue/maxValue)*360
 */
 private float alphaAngle;

 /**
 * 底部圆弧的颜色,默认为Color.LTGRAY
 */
 private int firstColor;

 /**
 * 进度条圆弧块的颜色
 */
 private int secondColor;

 /**
 * 圆环的宽度
 */
 private int circleWidth;

 /**
 * 画圆弧的画笔
 */
 private Paint circlePaint;

 /**
 * 画文字的画笔
 */
 private Paint textPaint;

 /**
 * 渐变圆周颜色数组
 */
 private int[] colorArray = new int[] { Color.parseColor("#27B197"), Color.parseColor("#00A6D5") };//

 /**
 * 通过代码创建时才使用
 *
 * @param context
 */
 public CircleProgressBar(Context context)
 {
 this(context, null);
 }

 /**
 * 当从xml中加载view的时候,这个构造器才会被调用。其第二个参数中就包含自定义的属性。
 *
 * @param context
 *      上下文
 * @param attrs
 *      自定义属性
 */
 public CircleProgressBar(Context context, AttributeSet attrs)
 {
 this(context, attrs, 0);
 }

 /**
 * 从xml加载时执行和应用一个特定的风格。这里有两种方式,一是从theme中获得,二是从style中获得。
 * 第三个参数官方有这样的说明: defStyle - The default style to apply to this view. If 0,
 * no style will be applied (beyond what is included in the theme). This may
 * either be an attribute resource, whose value will be retrieved from the
 * current theme, or an explicit style resource.
 * 默认的风格会被应用到这个view上。如果是0,没有风格将会被应用
 * (除了被包含在主题中)。这个也许是一个属性的资源,它的值是从当前的主题中检索,或者是一个明确的风格资源。
 *
 * @param context
 *      上下文
 * @param attrs
 *      自定义的属性
 * @param defStyleAttr
 *      自定义风格
 */
 public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr)
 {
 super(context, attrs, defStyleAttr);

 TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.circleProgressBar,
  defStyleAttr, 0);
 int n = ta.getIndexCount();

 for (int i = 0; i < n; i++)
 {
  int attr = ta.getIndex(i);
  switch (attr)
  {
  case R.styleable.circleProgressBar_firstColor:
   firstColor = ta.getColor(attr, Color.LTGRAY); // 默认底色为亮灰色
   break;
  case R.styleable.circleProgressBar_secondColor:
   secondColor = ta.getColor(attr, Color.BLUE); // 默认进度条颜色为蓝色
   break;
  case R.styleable.circleProgressBar_circleWidth:
   circleWidth = ta.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 6, getResources().getDisplayMetrics())); // 默认圆弧宽度为6dp
   break;
  default:
   break;
  }
 }
 ta.recycle();

 circlePaint = new Paint();
 circlePaint.setAntiAlias(true); // 抗锯齿
 circlePaint.setDither(true); // 防抖动
 circlePaint.setStrokeWidth(circleWidth);

 textPaint = new Paint();
 textPaint.setAntiAlias(true);
 textPaint.setDither(true);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {// 分别获取期望的宽度和高度,并取其中较小的尺寸作为该控件的宽和高
 int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
 int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
 setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
 }

 @Override
 protected void onDraw(Canvas canvas)
 {
 int center = this.getWidth() / 2;
 int radius = center - circleWidth / 2;

 drawCircle(canvas, center, radius); // 绘制进度圆弧
 drawText(canvas, center, radius);
 }

 /**
 * 绘制进度圆弧
 *
 * @param canvas
 *      画布对象
 * @param center
 *      圆心的x和y坐标
 * @param radius
 *      圆的半径
 */
 private void drawCircle(Canvas canvas, int center, int radius)
 {
 circlePaint.setShader(null); // 清除上一次的shader
 circlePaint.setColor(firstColor); // 设置底部圆环的颜色,这里使用第一种颜色
 circlePaint.setStyle(Paint.Style.STROKE); // 设置绘制的圆为空心
 canvas.drawCircle(center, center, radius, circlePaint); // 画底部的空心圆
 RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 圆的外接正方形

 // 绘制颜色渐变圆环
 // shader类是Android在图形变换中非常重要的一个类。Shader在三维软件中我们称之为着色器,其作用是来给图像着色。
 LinearGradient linearGradient = new LinearGradient(circleWidth, circleWidth, getMeasuredWidth()
  - circleWidth, getMeasuredHeight() - circleWidth, colorArray, null, Shader.TileMode.MIRROR);
 circlePaint.setShader(linearGradient);
 circlePaint.setShadowLayer(10, 10, 10, Color.RED);
 circlePaint.setColor(secondColor); // 设置圆弧的颜色
 circlePaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圆弧改成圆角的

 alphaAngle = currentValue * 360.0f / maxValue * 1.0f; // 计算每次画圆弧时扫过的角度,这里计算要注意分母要转为float类型,否则alphaAngle永远为0
 canvas.drawArc(oval, -90, alphaAngle, false, circlePaint);
 }

 /**
 * 绘制文字
 *
 * @param canvas
 *      画布对象
 * @param center
 *      圆心的x和y坐标
 * @param radius
 *      圆的半径
 */
 private void drawText(Canvas canvas, int center, int radius)
 {
 float result = (currentValue * 100.0f / maxValue * 1.0f); // 计算进度
 String percent = String.format("%.1f", result) + "%";

 textPaint.setTextAlign(Paint.Align.CENTER); // 设置文字居中,文字的x坐标要注意
 textPaint.setColor(Color.BLACK); // 设置文字颜色
 textPaint.setTextSize(40); // 设置要绘制的文字大小
 textPaint.setStrokeWidth(0); // 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠
 Rect bounds = new Rect(); // 文字边框
 textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形
 FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
 int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 计算文字的基线,方法见http://blog.csdn.net/harvic880925/article/details/50423762
 canvas.drawText(percent, center, baseline, textPaint); // 绘制表示进度的文字
 }

 /**
 * 设置圆环的宽度
 *
 * @param width
 */
 public void setCircleWidth(int width)
 {
 this.circleWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width, getResources()
  .getDisplayMetrics());
 circlePaint.setStrokeWidth(circleWidth);
 invalidate();
 }

 /**
 * 设置圆环的底色,默认为亮灰色LTGRAY
 *
 * @param color
 */
 public void setFirstColor(int color)
 {
 this.firstColor = color;
 circlePaint.setColor(firstColor);
 invalidate();
 }

 /**
 * 设置进度条的颜色,默认为蓝色<br>
 *
 * @param color
 */
 public void setSecondColor(int color)
 {
 this.secondColor = color;
 circlePaint.setColor(secondColor);
 invalidate();
 }

 /**
 * 设置进度条渐变色颜色数组
 *
 * @param colors
 *      颜色数组,类型为int[]
 */
 public void setColorArray(int[] colors)
 {
 this.colorArray = colors;
 invalidate();
 }

 /**
 * 按进度显示百分比
 *
 * @param progress
 *      进度,值通常为0到100
 */
 public void setProgress(int progress)
 {
 int percent = progress * maxValue / 100;
 if (percent < 0)
 {
  percent = 0;
 }
 if (percent > 100)
 {
  percent = 100;
 }
 this.currentValue = percent;
 invalidate();
 }

 /**
 * 按进度显示百分比,可选择是否启用数字动画
 *
 * @param progress
 *      进度,值通常为0到100
 * @param useAnimation
 *      是否启用动画,true为启用
 */
 public void setProgress(int progress, boolean useAnimation)
 {
 int percent = progress * maxValue / 100;
 if (percent < 0)
 {
  percent = 0;
 }
 if (percent > 100)
 {
  percent = 100;
 }
 if (useAnimation) // 使用动画
 {
  ValueAnimator animator = ValueAnimator.ofInt(0, percent);
  animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
  {
  @Override
  public void onAnimationUpdate(ValueAnimator animation)
  {
   currentValue = (int) animation.getAnimatedValue();
   invalidate();
  }
  });
  animator.setInterpolator(new OvershootInterpolator());
  animator.setDuration(1000);
  animator.start();
 }
 else
 {
  setProgress(progress);
 }
 }
}

3、activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:lh2="http://schemas.android.com/apk/res/com.ctgu.circleprogressbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <com.ctgu.circleprogressbar.CircleProgressBar
    android:id="@+id/circleProgressBar"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:layout_marginTop="20dp"
    lh2:circleWidth="6dp"
    lh2:firstColor="#d3d3d3"
    lh2:secondColor="#3B95C8" />

  <SeekBar
    android:id="@+id/seekbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="40dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="#778899" />

</RelativeLayout>

4、MainActivity.java

package com.ctgu.circleprogressbar;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.widget.SeekBar;

public class MainActivity extends Activity
{
 private CircleProgressBar circleProgressBar; // 自定义的进度条
 private SeekBar seekbar; // 拖动条

 private int[] colors = new int[] { Color.parseColor("#27B197"), Color.parseColor("#00A6D5") };

 @Override
 protected void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 circleProgressBar = (CircleProgressBar) findViewById(R.id.circleProgressBar);
// circleProgressBar.setFirstColor(Color.LTGRAY);
// circleProgressBar.setColorArray(colors); //觉得进度条颜色丑的,这里可以自行传入一个颜色渐变数组。
// circleProgressBar.setCircleWidth(6);

 seekbar = (SeekBar) findViewById(R.id.seekbar);
 seekbar.setMax(100);
 seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener()
 {
  @Override
  public void onStopTrackingTouch(SeekBar seekBar)
  {

  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar)
  {

  }

  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
  {
  if (fromUser)
  {
   // circleProgressBar.setProgress(progress); //不使用动画
   circleProgressBar.setProgress(progress, true); // 使用数字过渡动画
  }
  }
 });
 }
}

代码注释很详细了,基本上了解自定义控件的都看得懂。

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

时间: 2020-07-16

Android中自定义进度条详解

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

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自定义进度条渐变色View的实例代码

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

Android 七种进度条的样式

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

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

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

Android ProgressBar进度条使用详解

ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案例大多都是通过Button点击增加.减少进度值,使用方法incrementProgressBy(int),最简单的做法是在xml布局文件中放置ProgressBar空间,然后再MainActivity中触发事件后执行incrementProgressBy(int),代码如下: <LinearLayout xmlns:android="http:/

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

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

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

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

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三种方式实现ProgressBar自定义圆形进度条

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

Android自定义圆形进度条

今天小编来手写一个自定义圆形进度条:先看效果: 首先我们在attrs属性文件中增加几个自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomProgressBar"> <!-- 圆形进度条进度显示的颜色 --> <attr name="roundProgressC

Android 实现自定义圆形进度条的功能

Android 实现自定义圆形进度条:                 Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现. 绘制自定义的圆形进度条,分为三个步骤,内圆.外圆.文字. 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆. 首先定义分别定义这三个画笔,两个Paint和一个TextPaint mCirclePaint = new Paint(); mCirclePai

Android动态自定义圆形进度条

效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - roundWidth / 2; //设置画笔的属性 paint.setColor(roundColor); paint.setStrokeWidth(roundWidth); paint.setStyle(Paint.Style.STROKE); canvas.

Android 实现自定义圆形进度条的实例代码

Android 自定义圆形进度条 今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径

详解微信小程序——自定义圆形进度条

微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

Android实现自定义圆形进度条

今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径大小 <?xml version=

自定义Android圆形进度条(附源码)

本文实例讲述了Android自定义圆形进度条,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 自定义的View: import com.example.circlepregress.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import andr

Android使用Canvas绘制圆形进度条效果

前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B