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

2019-10-22 18:11:10

字體：大中小

供稿：網(wǎng)友

上一篇文章總結(jié)了下自定義View的幾個步驟，如果還有不清楚的同學(xué)可以先去看看Android自定義View(一) ，這篇文章和大家分享一下自定義加載進(jìn)度條，效果如下

Android,View,加載,進(jìn)度條

下面就以水平的進(jìn)度條為列進(jìn)行講解：

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;/** * 進(jìn)度條的寬 */private int mProgressWidth;/** * 進(jìn)度條的圓角大小 */private int mRadius;/** * 默認(rèn)進(jìn)度條的顏色 */private int mBgColor;/** * 進(jìn)度條的當(dāng)前進(jìn)度 */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()方法

@Overrideprotected 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è)置漸變開始的起點(diǎn)坐標(biāo)和終點(diǎn)坐標(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ù)進(jìn)度繪制圓角矩形 */ 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);}

好了，這樣就完成了我們水平漸變加載進(jìn)度條，下面貼出圓形進(jìn)度條的源碼：

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)前進(jìn)度文本  */ 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>

好了，這樣就完成了我們的水平加載進(jìn)度條，和圓形加載進(jìn)度條效果了，是不是感覺還可以啊。

源碼下載地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識閱讀請移步到Android開發(fā)頻道。

上一篇：Android實(shí)現(xiàn)水波紋外擴(kuò)效果的實(shí)例代碼

下一篇：Android自定義View多種效果解析