Android自定義View實現(xiàn)加載進度條效果
更新時間：2020年06月19日 11:39:15 作者：huangyi-blog
這篇文章主要為大家詳細(xì)介紹了Android自定義View實現(xiàn)加載進度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
上一篇文章總結(jié)了下自定義View的幾個步驟，如果還有不清楚的同學(xué)可以先去看看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;
/**
* 漸變結(jié)束的顏色
*/
private int mEndColor;
/**
* 進度條的寬
*/
private int mProgressWidth;
/**
* 進度條的圓角大小
*/
private int mRadius;
/**
* 默認(rèn)進度條的顏色
*/
private int mBgColor;
/**
* 進度條的當(dāng)前進度
*/
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:
/**
* 默認(rèn)設(shè)置為16sp，TypeValue也可以把sp轉(zhuǎn)化為px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.GradientProgressBar_textColor:
/**
* 默認(rèn)設(shè)置為黑色
*/
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);
/**
* 設(shè)置畫筆的屬性
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.FILL);
/**
* 繪制背景圓角矩形
*/
canvas.drawRoundRect(0, 0, mProgressWidth, getHeight(), mRadius, mRadius, mPaint);
/**
* 設(shè)置線性漸變,設(shè)置漸變開始的起點坐標(biāo)和終點坐標(biāo)，漸變開始和結(jié)束的顏色，設(shè)置鏡像
* 對于這個方法不太明白的可以google一下，這里不再詳細(xì)說明
*/
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:
/**
* 默認(rèn)設(shè)置為16sp，TypeValue也可以把sp轉(zhuǎn)化為px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.RoundProgressBar_textColorRound:
/**
* 默認(rèn)設(shè)置為黑色
*/
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);
/**
* 設(shè)置畫筆的屬性
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mCircleWidth);
/**
* 繪制圓環(huán)背景
*/
int xPoint = getWidth() / 2;//獲取圓心x的坐標(biāo)
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);
/**
* 繪制當(dāng)前進度文本
*/
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>
好了，這樣就完成了我們的水平加載進度條，和圓形加載進度條效果了，是不是感覺還可以啊。
源碼下載地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android詳解之NoHttp最基本使用，無封裝,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Android 隱藏及切換顯示鍵盤的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android Studio 多層級 Module 對 aar 引用問題解決方法
這篇文章主要介紹了Android Studio 多層級 Module 對 aar 引用問題的解決方法，需要的朋友參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了Android ActionBar制作時鐘的實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了Android仿微博個人詳情頁滾動到頂部的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒家，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Android開發(fā)之Service用法,實例分析了Android中Service的功能及使用技巧,需要的朋友可以參考下2015-05-05
Android Studio 3.6中新的視圖綁定工具ViewBinding 用法詳解
這篇文章主要介紹了Android Studio 3.6中新的視圖綁定工具ViewBinding 用法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Android編程實現(xiàn)添加低電流提醒功能的方法,涉及Android廣播監(jiān)聽及電源監(jiān)控等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)通用篩選欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了android音頻編輯之音頻裁剪的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01