Android自定義View實現(xiàn)加載進度條效果

更新時間：2020年06月19日 11:39:15 作者：huangyi-blog

這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)加載進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

上一篇文章總結了下自定義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);
 /**
 * 根據(jù)進度繪制圓角矩形
 */
 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);

 /**
 * 繪制圓環(huán)背景
 */
 int xPoint = getWidth() / 2;//獲取圓心x的坐標
 int radius = xPoint - mCircleWidth;//獲取圓心的半徑
 canvas.drawCircle(xPoint, xPoint, radius, mPaint);//用于定義的圓弧的形狀和大小的界限

 /**
 * 繪制圓環(huán)
 */
 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自定義APP全局懸浮按鈕
這篇文章主要為大家詳細介紹了Android自定義APP全局懸浮按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-01-01
Android開發(fā) -- setTag的妙用和The key must be an application-specif
本文主要介紹Android開發(fā)setTag的妙用，小編覺得挺實用的，給大家一個參考，希望對大家學習有所幫助。
2016-06-06
Android使用GRPC進行通信過程解析
這篇文章主要給大家介紹了在Android上使用grpc的方法教程，文中通過示例代碼給大家詳細介紹了在android上使用grpc的方法以及可能遇到的種種問題的解決方法，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧
2023-02-02
Android使用OKHttp包處理HTTP相關操作的基本用法講解
這篇文章主要介紹了Android使用OKHttp包處理HTTP相關操作的基本用法講解,包括操作如何利用OKHttp操作HTTP請求與處理緩存等內容,需要的朋友可以參考下
2016-07-07
Flutter 中 Dart的Mixin示例詳解
這篇文章主要介紹了Flutter 中 Dart的Mixin的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
OpenGL Shader實例分析（2）繪制心臟跳動效果
這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第2篇，繪制心臟跳動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-02-02
Android多渠道打包時獲取當前渠道的方法
這篇文章主要介紹了Android多渠道打包時獲取當前渠道的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
最近較流行的效果 Android自定義View實現(xiàn)傾斜列表/圖片
最近較流行的效果，這篇文章主要介紹了Android自定義View實現(xiàn)傾斜列表/圖片的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
Android應用中使用SharedPreferences類存儲數(shù)據(jù)的方法
這篇文章主要介紹了Android應用中使用SharedPreferences類存儲數(shù)據(jù)的方法,SharedPreferences使用鍵值對應的方式進行存儲,使用于少量的數(shù)據(jù)保存,需要的朋友可以參考下
2016-04-04
使用android studio導入模塊的兩種方法(超詳細)
這篇文章主要介紹了使用android studio導入模塊的兩種方法,本文通過圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09