Android自定义View实现加载进度条效果

2024-09-28 16:09:21

上一篇文章总结了下自定义View的几个步骤，如果还有不清楚的同学可以先去看看Android自定义View(一)，这篇文章和大家分享一下自定义加载进度条，效果如下

下面就以水平的进度条为列进行讲解：

1.首先还是在attrs.xml文件中自定义我们需要的属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="GradientProgressBar">
 <attr name="textSize" format="dimension" />
 <attr name="textColor" format="color" />
 <attr name="bgColor" format="color" />
 <attr name="startColor" format="color" />
 <attr name="endColor" format="color" />
 <attr name="rectRadius" format="dimension" />
 <attr name="loadSpeed" format="integer" />
 <attr name="lineWidth" format="dimension" />
 </declare-styleable>
 <declare-styleable name="RoundProgressBar">
 <attr name="textSizeRound" format="dimension" />
 <attr name="textColorRound" format="color" />
 <attr name="bgColorRound" format="color" />
 <attr name="currentColorRound" format="color" />
 <attr name="circleWidthRound" format="dimension" />
 <attr name="loadSpeedRound" format="integer" />
 </declare-styleable>
</resources>

2.获取我们的自定义属性：

/**
 * 字体大小
 */
private int mTextSize;
/**
 * 字体颜色
 */
private int mTextColor;
/**
 * 渐变开始的颜色
 */
private int mStartColor;
/**
 * 渐变结束的颜色
 */
private int mEndColor;
/**
 * 进度条的宽
 */
private int mProgressWidth;
/**
 * 进度条的圆角大小
 */
private int mRadius;
/**
 * 默认进度条的颜色
 */
private int mBgColor;
/**
 * 进度条的当前进度
 */
private float mCurrentProgress;
/**
 * 加载的速度
 */
private int mLoadSpeed;

private String mContent="0%";
private Rect mBounds;
private Paint mPaint;

public GradientProgressBar(Context context) {
 this(context, null);
}

public GradientProgressBar(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
}

public GradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.GradientProgressBar, defStyleAttr, 0);
 int count = array.getIndexCount();
 for (int i = 0; i < count; i++) {
 int index = array.getIndex(i);
 switch (index) {
  case R.styleable.GradientProgressBar_textSize:
  /**
   * 默认设置为16sp，TypeValue也可以把sp转化为px
   */
  mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
   TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
  break;
  case R.styleable.GradientProgressBar_textColor:
  /**
   * 默认设置为黑色
   */
  mTextColor = array.getColor(index, Color.BLACK);
  break;
  case R.styleable.GradientProgressBar_startColor:
  mStartColor = array.getColor(index, Color.BLACK);
  break;
  case R.styleable.GradientProgressBar_endColor:
  mEndColor = array.getColor(index, Color.BLACK);
  break;
  case R.styleable.GradientProgressBar_bgColor:
  mBgColor = array.getColor(index, Color.BLACK);
  break;
  case R.styleable.GradientProgressBar_rectRadius:
  mRadius = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
   TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()
  ));
  break;
  case R.styleable.GradientProgressBar_lineWidth:
  mProgressWidth=array.getDimensionPixelSize(index,(int)TypedValue.applyDimension(
   TypedValue.COMPLEX_UNIT_DIP,200,getResources().getDisplayMetrics()));
  break;
  case R.styleable.GradientProgressBar_loadSpeed:
  mLoadSpeed=array.getInt(index,10);
  break;
 }
 }
 array.recycle();
 init();
}

init()方法做如下操作

private void init(){
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPaint.setAntiAlias(true);
 mBounds = new Rect();
 new Thread(new Runnable() {
 @Override
 public void run() {
  while (mCurrentProgress < mProgressWidth) {
  mCurrentProgress = mCurrentProgress + 1;
  mContent = Math.round((mCurrentProgress / mProgressWidth) * 100) + "%";
  try {
   postInvalidate();
   Thread.sleep(mLoadSpeed);
  } catch (Exception e) {
   e.printStackTrace();
  }
  }
 }
 }).start();
}

3.重写OnDraw()方法

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

 /**
 * 设置画笔的属性
 */
 mPaint.setColor(mBgColor);
 mPaint.setStyle(Paint.Style.FILL);

 /**
 * 绘制背景圆角矩形
 */
 canvas.drawRoundRect(0, 0, mProgressWidth, getHeight(), mRadius, mRadius, mPaint);

 /**
 * 设置线性渐变,设置渐变开始的起点坐标和终点坐标，渐变开始和结束的颜色，设置镜像
 * 对于这个方法不太明白的可以google一下，这里不再详细说明
 */
 LinearGradient gradient = new LinearGradient(0, getHeight() / 2, mProgressWidth, getHeight() / 2,
  mStartColor, mEndColor, Shader.TileMode.MIRROR);
 mPaint.setShader(gradient);
 /**
 * 根据进度绘制圆角矩形
 */
 canvas.drawRoundRect(0, 0, mCurrentProgress, getHeight(), mRadius, mRadius, mPaint);

 mPaint.reset();
 mPaint.setAntiAlias(true);
 mPaint.setColor(mTextColor);
 mPaint.setTextSize(mTextSize);

 /**
 * 获取绘制文本所需的矩形大小
 */
 mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
 canvas.drawText(mContent, getWidth() / 2 - mBounds.width() / 2, getHeight() / 2 + mBounds.height() / 2, mPaint);
}

好了，这样就完成了我们水平渐变加载进度条，下面贴出圆形进度条的源码：

public class RoundProgressBar extends View {

 /**
 * 自定义变量
 */
 private int mTextSize;
 private int mTextColor;
 private int mCircleWidth;
 private int mBgColor;
 private int mCurrentColor;
 private int mLoadSpeed;
 private float mCurrentProgress;

 private String mContent = "0%";
 private Rect mBounds;
 private Paint mPaint;

 public RoundProgressBar(Context context) {
 this(context, null);
 }

 public RoundProgressBar(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundProgressBar, defStyleAttr, 0);
 int count = array.getIndexCount();
 for (int i = 0; i < count; i++) {
  int index = array.getIndex(i);
  switch (index) {
  case R.styleable.RoundProgressBar_textSizeRound:
   /**
   * 默认设置为16sp，TypeValue也可以把sp转化为px
   */
   mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
   break;
  case R.styleable.RoundProgressBar_textColorRound:
   /**
   * 默认设置为黑色
   */
   mTextColor = array.getColor(index, Color.BLACK);
   break;
  case R.styleable.RoundProgressBar_bgColorRound:
   mBgColor = array.getColor(index, Color.BLACK);
   break;
  case R.styleable.RoundProgressBar_circleWidthRound:
   mCircleWidth = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()
   ));
   break;
  case R.styleable.RoundProgressBar_currentColorRound:
   mCurrentColor = array.getColor(index, Color.BLACK);
   break;
  case R.styleable.RoundProgressBar_loadSpeedRound:
   mLoadSpeed=array.getInt(index,10);
   break;
  }
 }
 array.recycle();
 init();
 }

 private void init() {
 mBounds = new Rect();
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPaint.setAntiAlias(true);
 new Thread(new Runnable() {
  @Override
  public void run() {
  while (mCurrentProgress < 360) {
   mCurrentProgress = mCurrentProgress + 1;
   mContent = Math.round((mCurrentProgress / 360) * 100) + "%";
   postInvalidate();
   try {
   Thread.sleep(mLoadSpeed);
   } catch (Exception e) {
   e.printStackTrace();
   }
  }
  }
 }).start();
 }

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

 /**
  * 设置画笔的属性
  */
 mPaint.setColor(mBgColor);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeWidth(mCircleWidth);

 /**
  * 绘制圆环背景
  */
 int xPoint = getWidth() / 2;//获取圆心x的坐标
 int radius = xPoint - mCircleWidth;//获取圆心的半径
 canvas.drawCircle(xPoint, xPoint, radius, mPaint);//用于定义的圆弧的形状和大小的界限

 /**
  * 绘制圆环
  */
 mPaint.setColor(mCurrentColor);
 RectF oval = new RectF(xPoint - radius, xPoint - radius, radius + xPoint, radius + xPoint);
 canvas.drawArc(oval, -90, mCurrentProgress, false, mPaint);

 /**
  * 绘制当前进度文本
  */
 mPaint.reset();
 mPaint.setAntiAlias(true);
 mPaint.setColor(mTextColor);
 mPaint.setTextSize(mTextSize);
 mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
 canvas.drawText(mContent, xPoint - mBounds.width() / 2, xPoint + mBounds.height() / 2, mPaint);
 }
}

4.在xml文件中申明我们的自定义View

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@android:color/white"
 android:gravity="center_horizontal"
 android:orientation="vertical">
 <com.customeview2.GradientProgressBar
 android:id="@+id/gradientProgressBar"
 android:layout_width="300dp"
 android:layout_height="15dp"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_marginTop="200dp"
 app:bgColor="#C3C3C3"
 app:endColor="#25B7FA"
 app:lineWidth="300dp"
 app:loadSpeed="10"
 app:rectRadius="20dp"
 app:startColor="#D2EEFB"
 app:textColor="@android:color/holo_red_light"
 app:textSize="12sp" />

 <com.customeview2.RoundProgressBar
 android:id="@+id/roundProgressBar"
 android:layout_width="60dp"
 android:layout_height="60dp"
 android:layout_below="@+id/gradientProgressBar"
 android:layout_gravity="center"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_marginTop="40dp"
 app:bgColorRound="#C3C3C3"
 app:circleWidthRound="3dp"
 app:currentColorRound="#25B7FA"
 app:loadSpeedRound="10"
 app:textColor="@android:color/holo_red_light"
 app:textColorRound="@android:color/holo_red_light"
 app:textSizeRound="11sp" />
</LinearLayout>

好了，这样就完成了我们的水平加载进度条，和圆形加载进度条效果了，是不是感觉还可以啊。

源码下载地址

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

Android自定义View实现渐变色进度条

在网上看到一个进度条效果图,非常美观,如下: 进行效果分解: 1.渐变色,看起来颜色变化并不复杂,使用LinearGradient应该可以实现. 2.圆头,无非是画两个圆,外圆使用渐变色的颜色,内圆固定为白色. 3.灰底,还没有走到的进度部分为灰色. 4.进度值,使用文本来显示: 5.弧形的头部,考虑使用直线进行连接,或者使用曲线,例如贝塞尔曲线: 我首先初步实现了进度条的模样,发现样子有了,却不太美观. 反思了一下,我只是个写代码的,对于哪种比例比较美观,是没有清晰的认识的,所以,还是参考原图
android自定义进度条渐变色View的实例代码

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

通过自定义view实现了一个水滴滴落到水波面,溅起水花并且水波流动上涨的进度条控件.之前看到过好多水波流动的进度条,感觉欠缺些东西,就想到了水滴到水平面,溅起水花然后水流动上涨的进度条效果,于是自己动手写了出来.效果如下,视频录制有些卡顿,实际会流畅很多. 一.用法 1.布局文件中添加WaveProgressView,circleColor属性为圆环颜色,waterColor属性为水波水滴的颜色,progress属性为初始的进度 <com.yhongm.wave_progress_view.Wa
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 七种进度条的样式

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

前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响有时候会让用户等待很久.显示一个加载进度条可以提升很大的体验.微信内访问H5页面加载效果不错,效仿着写了一个. 1.实现 1-1.自定义类继承WebView类 class ProgressWebView(context: Context, attr: AttributeSet) : WebView(context, attr) { /** *xml布局中使用,所以用两个构造参数的构造函数 */ private va
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实现快递跟踪进度条

本文实例为大家分享了android快递跟踪进度条展示的具体代码,供大家参考,具体内容如下 activity.class import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; publ
Android仿微信公众号文章页面加载进度条

前言: 微信公众号文章详情页面加载的时候,WebView会在头部显示一个进度条,这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容,不需要等完全加载完之后才全部显示出来.如何实现呢? 其实很简单,自定义一个WebView就可以实现了. 详细实现步骤如下 : 1.自定义一个ProgressWebView 继续 Webview @SuppressWarnings("deprecation") public class ProgressWebView extends WebVie
android ListView和ProgressBar(进度条控件)的使用方法

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

Android自定义View实现加载进度条效果

相关推荐

随机推荐