Android 自定義圓環倒計時控制元件
阿新 • • 發佈：2019-02-07
先來一張最終效果圖:
主要思路: 在畫漸變色圓環的時候,設定一個屬性動畫,根據屬性動畫的執行時長,來作為倒計時的時長.監聽屬性動畫的進度,來達到 倒計時的目的.
二話不說,直接貼程式碼.具體實現思路都在註釋上.
自定義屬性:
<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; 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; // 計算文字的基線,方法見http://blog.csdn.net/harvic880925/article/details/50423762 canvas.drawText(percent, center, baseline, textPaint); // 繪製表示進度的文字 if (maxValue == currentValue) { if (listener != null) { listener.onFinish(); } } } /** * 設定圓環的寬度 * * @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; ValueAnimator 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(); } }); 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();
}
});
}
});
}
}如果有什麼不對的地方或者疑問,歡迎指正和提出(〃'▽'〃)