Android如何自定義圓環倒計時控件

小編給大家分享一下Android如何自定義圓環倒計時控件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

主要思路:在畫漸變色圓環的時候,設置一個屬性動畫,根據屬性動畫的執行時長,來作為倒計時的時長.監聽屬性動畫的進度,來達到 倒計時的目的.

二話不說,直接貼代碼.具體實現思路都在注釋上.

自定義屬性:

<declare-styleable name="CountDownProgressBar">    <attr name="countDown_circleWidth" format="dimension" />    <attr name="countDown_centerTextSize" format="dimension" />    <attr name="countDown_betaAngle" format="integer" />    <attr name="countDown_firstColor" format="color" />    <attr name="countDown_secondColor" format="color" />    <attr name="countDown_centerTextColor" format="color" />    <attr name="countDown_isShowGradient" format="boolean" /></declare-styleable>

主要代碼:

import android.animation.ValueAnimator;import android.content.Context;import android.content.res.Resources;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.LinearInterpolator; import com.daodaojk.myapplication.R; public class CountDownProgressBar extends View {  /**   * 進度條最大值   */  private int maxValue = 200;   /**   * 當前進度值   */  private int currentValue ;   /**   * 每次掃過的角度，用來設置進度條圓弧所對應的圓心角，alphaAngle=(currentValue/maxValue)*360   */  private float alphaAngle;   /**   * 底部圓弧的顏色，默認為Color.LTGRAY   */  private int firstColor;   /**   * 進度條圓弧塊的顏色   */  private int secondColor;  /**   * 中間文字顏色(默認藍色)   */  private int centerTextColor = Color.BLUE;  /**   * 中間文字的字體大小(默認40dp)   */  private int centerTextSize;   /**   * 圓環的寬度   */  private int circleWidth;   /**   * 畫圓弧的畫筆   */  private Paint circlePaint;   /**   * 畫文字的畫筆   */  private Paint textPaint;  /**   * 是否使用漸變色   */  private boolean isShowGradient = false;   /**   * 漸變圓周顏色數組   */  private int[] colorArray = new int[]{Color.parseColor("#2773FF"),      Color.parseColor("#27C0D2"), Color.parseColor("#40C66E")};  private int duration;  private OnFinishListener listener;  private ValueAnimator animator;   public CountDownProgressBar(Context context) {    this(context, null);  }    public CountDownProgressBar(Context context, AttributeSet attrs) {    this(context, attrs, 0);  }    public CountDownProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);     TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CountDownProgressBar,        defStyleAttr, 0);    int n = ta.getIndexCount();     for (int i = 0; i < n; i++) {      int attr = ta.getIndex(i);      switch (attr) {        case R.styleable.CountDownProgressBar_countDown_firstColor:          firstColor = ta.getColor(attr, Color.LTGRAY); // 默認底色為亮灰色          break;        case R.styleable.CountDownProgressBar_countDown_secondColor:          secondColor = ta.getColor(attr, Color.BLUE); // 默認進度條顏色為藍色          break;        case R.styleable.CountDownProgressBar_countDown_centerTextSize:          centerTextSize = ta.getDimensionPixelSize(attr, (int) dip2px(40)); // 默認中間文字字體大小為40dp          break;        case R.styleable.CountDownProgressBar_countDown_circleWidth:          circleWidth = ta.getDimensionPixelSize(attr, (int) dip2px(6f)); // 默認圓弧寬度為6dp          break;        case R.styleable.CountDownProgressBar_countDown_centerTextColor:          centerTextColor = ta.getColor(attr, Color.BLUE); // 默認中間文字顏色為藍色          break;        case R.styleable.CountDownProgressBar_countDown_isShowGradient:          isShowGradient = ta.getBoolean(attr, false); // 默認不適用漸變色          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 widthPixels = this.getResources().getDisplayMetrics().widthPixels;//獲取屏幕寬    int heightPixels = this.getResources().getDisplayMetrics().heightPixels;//獲取屏幕高    int width = MeasureSpec.getSize(widthMeasureSpec);    int hedight = MeasureSpec.getSize(heightMeasureSpec);    int minWidth = Math.min(widthPixels, width);    int minHedight = Math.min(heightPixels, hedight);    setMeasuredDimension(Math.min(minWidth, minHedight), Math.min(minWidth, minHedight));  }   @Override  protected void onDraw(Canvas canvas) {    int center = this.getWidth() / 2;    int radius = center - circleWidth / 2;     drawCircle(canvas, center, radius); // 繪制進度圓弧    drawText(canvas, center);  }   /**   * 繪制進度圓弧   *   * @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); // 圓的外接正方形    if (isShowGradient) {      // 繪制顏色漸變圓環      // 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.BLUE);    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坐標   */  private void drawText(Canvas canvas, int center) {    int result = ((maxValue - currentValue) * (duration / 1000) / maxValue); // 計算進度    String percent;    if (maxValue == currentValue) {      percent = "完成";      textPaint.setTextSize(centerTextSize); // 設置要繪制的文字大小    } else {      percent = (result / 60 < 10 ? "0" + result / 60 : result / 60) + ":" + (result % 60 < 10 ? "0" + result % 60 : result % 60);//      percent = result+"秒";      textPaint.setTextSize(centerTextSize+centerTextSize/3); // 設置要繪制的文字大小    }    textPaint.setTextAlign(Paint.Align.CENTER); // 設置文字居中，文字的x坐標要注意    textPaint.setColor(centerTextColor); // 設置文字顏色     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; // 計算文字的基線    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);    //一般只是希望在View發生改變時對UI進行重繪。invalidate()方法系統會自動調用 View的onDraw()方法。    invalidate();  }   /**   * 設置圓環的底色，默認為亮灰色LTGRAY   *   * @param color   */  public void setFirstColor(int color) {    this.firstColor = color;    circlePaint.setColor(firstColor);    //一般只是希望在View發生改變時對UI進行重繪。invalidate()方法系統會自動調用 View的onDraw()方法。    invalidate();  }   /**   * 設置進度條的顏色，默認為藍色<br>   *   * @param color   */  public void setSecondColor(int color) {    this.secondColor = color;    circlePaint.setColor(secondColor);    //一般只是希望在View發生改變時對UI進行重繪。invalidate()方法系統會自動調用 View的onDraw()方法。    invalidate();  }   /**   * 設置進度條漸變色顏色數組   *   * @param colors 顏色數組，類型為int[]   */  public void setColorArray(int[] colors) {    this.colorArray = colors;    //一般只是希望在View發生改變時對UI進行重繪。invalidate()方法系統會自動調用 View的onDraw()方法。    invalidate();  }    /**   * 按進度顯示百分比，可選擇是否啟用數字動畫   *   * @param duration 動畫時長   */  public void setDuration(int duration, OnFinishListener listener) {     this.listener = listener;    this.duration = duration + 1000;    if (animator != null) {      animator.cancel();    } else {      animator = ValueAnimator.ofInt(0, maxValue);      animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {          currentValue = (int) animation.getAnimatedValue();          //一般只是希望在View發生改變時對UI進行重繪。invalidate()方法系統會自動調用 View的onDraw()方法。          invalidate();          if (maxValue == currentValue && CountDownProgressBar.this.listener != null) {            CountDownProgressBar.this.listener.onFinish();          }        }      });      animator.setInterpolator(new LinearInterpolator());    }    animator.setDuration(duration);    animator.start();  }   public interface OnFinishListener {    void onFinish();  }   public void setOnFinishListener(OnFinishListener listener) {    this.listener = listener;  }   public static int px2dip(int pxValue) {    final float scale = Resources.getSystem().getDisplayMetrics().density;    return (int) (pxValue / scale + 0.5f);  }    public static float dip2px(float dipValue) {    final float scale = Resources.getSystem().getDisplayMetrics().density;    return (dipValue * scale + 0.5f);  }}

xml布局:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:orientation="vertical"><Button  android:layout_width="match_parent"  android:text="開始"  android:id="@+id/btn_start"  android:layout_height="wrap_content" />  <com.daodaojk.myapplication.view.CountDownProgressBar    android:id="@+id/cpb_countdown"    android:layout_width="200dp"    android:layout_marginTop="100dp"    android:layout_gravity="center_horizontal"    app:countDown_centerTextSize="25dp"    app:countDown_circleWidth="4dp"    app:countDown_firstColor="@color/text_gray_ccc"    app:countDown_secondColor="@color/text_blue"    app:countDown_isShowGradient="true"    app:countDown_centerTextColor="#2395FF"    android:layout_height="200dp" /></LinearLayout>

頁面調用:

package com.daodaojk.myapplication.ui; import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Toast; import com.daodaojk.myapplication.R;import com.daodaojk.myapplication.view.CountDownProgressBar; public class CountDownActivity extends AppCompatActivity {   private CountDownProgressBar cpb_countdown;   @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_count_down);    Button btn_start = findViewById(R.id.btn_start);    cpb_countdown = (CountDownProgressBar) findViewById(R.id.cpb_countdown);    btn_start.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        cpb_countdown.setDuration(10000, new CountDownProgressBar.OnFinishListener() {          @Override          public void onFinish() {            Toast.makeText(CountDownActivity.this, "完成了", Toast.LENGTH_SHORT).show();          }        });      }    });  }}

以上是“Android如何自定義圓環倒計時控件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！