Android自定義圓環(huán)倒計(jì)時(shí)控件
本文實(shí)例為大家分享了Android自定義圓環(huán)倒計(jì)時(shí)控件的具體代碼,供大家參考,具體內(nèi)容如下
先來一張最終效果圖:

主要思路: 在畫漸變色圓環(huán)的時(shí)候,設(shè)置一個(gè)屬性動(dòng)畫,根據(jù)屬性動(dòng)畫的執(zhí)行時(shí)長,來作為倒計(jì)時(shí)的時(shí)長.監(jiān)聽屬性動(dòng)畫的進(jìn)度,來達(dá)到 倒計(jì)時(shí)的目的.
二話不說,直接貼代碼.具體實(shí)現(xiàn)思路都在注釋上.
自定義屬性:
<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 {
/**
* 進(jìn)度條最大值
*/
private int maxValue = 200;
/**
* 當(dāng)前進(jìn)度值
*/
private int currentValue ;
/**
* 每次掃過的角度,用來設(shè)置進(jìn)度條圓弧所對應(yīng)的圓心角,alphaAngle=(currentValue/maxValue)*360
*/
private float alphaAngle;
/**
* 底部圓弧的顏色,默認(rèn)為Color.LTGRAY
*/
private int firstColor;
/**
* 進(jìn)度條圓弧塊的顏色
*/
private int secondColor;
/**
* 中間文字顏色(默認(rèn)藍(lán)色)
*/
private int centerTextColor = Color.BLUE;
/**
* 中間文字的字體大小(默認(rèn)40dp)
*/
private int centerTextSize;
/**
* 圓環(huán)的寬度
*/
private int circleWidth;
/**
* 畫圓弧的畫筆
*/
private Paint circlePaint;
/**
* 畫文字的畫筆
*/
private Paint textPaint;
/**
* 是否使用漸變色
*/
private boolean isShowGradient = false;
/**
* 漸變圓周顏色數(shù)組
*/
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); // 默認(rèn)底色為亮灰色
break;
case R.styleable.CountDownProgressBar_countDown_secondColor:
secondColor = ta.getColor(attr, Color.BLUE); // 默認(rèn)進(jìn)度條顏色為藍(lán)色
break;
case R.styleable.CountDownProgressBar_countDown_centerTextSize:
centerTextSize = ta.getDimensionPixelSize(attr, (int) dip2px(40)); // 默認(rèn)中間文字字體大小為40dp
break;
case R.styleable.CountDownProgressBar_countDown_circleWidth:
circleWidth = ta.getDimensionPixelSize(attr, (int) dip2px(6f)); // 默認(rèn)圓弧寬度為6dp
break;
case R.styleable.CountDownProgressBar_countDown_centerTextColor:
centerTextColor = ta.getColor(attr, Color.BLUE); // 默認(rèn)中間文字顏色為藍(lán)色
break;
case R.styleable.CountDownProgressBar_countDown_isShowGradient:
isShowGradient = ta.getBoolean(attr, false); // 默認(rèn)不適用漸變色
break;
default:
break;
}
}
ta.recycle();
circlePaint = new Paint();
circlePaint.setAntiAlias(true); // 抗鋸齒
circlePaint.setDither(true); // 防抖動(dòng)
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); // 繪制進(jìn)度圓弧
drawText(canvas, center);
}
/**
* 繪制進(jìn)度圓弧
*
* @param canvas 畫布對象
* @param center 圓心的x和y坐標(biāo)
* @param radius 圓的半徑
*/
private void drawCircle(Canvas canvas, int center, int radius) {
circlePaint.setShader(null); // 清除上一次的shader
circlePaint.setColor(firstColor); // 設(shè)置底部圓環(huán)的顏色,這里使用第一種顏色
circlePaint.setStyle(Paint.Style.STROKE); // 設(shè)置繪制的圓為空心
canvas.drawCircle(center, center, radius, circlePaint); // 畫底部的空心圓
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 圓的外接正方形
if (isShowGradient) {
// 繪制顏色漸變圓環(huán)
// shader類是Android在圖形變換中非常重要的一個(gè)類。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); // 設(shè)置圓弧的顏色
circlePaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圓弧改成圓角的
alphaAngle = currentValue * 360.0f / maxValue * 1.0f; // 計(jì)算每次畫圓弧時(shí)掃過的角度,這里計(jì)算要注意分母要轉(zhuǎn)為float類型,否則alphaAngle永遠(yuǎn)為0
canvas.drawArc(oval, -90, alphaAngle, false, circlePaint);
}
/**
* 繪制文字
*
* @param canvas 畫布對象
* @param center 圓心的x和y坐標(biāo)
*/
private void drawText(Canvas canvas, int center) {
int result = ((maxValue - currentValue) * (duration / 1000) / maxValue); // 計(jì)算進(jìn)度
String percent;
if (maxValue == currentValue) {
percent = "完成";
textPaint.setTextSize(centerTextSize); // 設(shè)置要繪制的文字大小
} 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); // 設(shè)置要繪制的文字大小
}
textPaint.setTextAlign(Paint.Align.CENTER); // 設(shè)置文字居中,文字的x坐標(biāo)要注意
textPaint.setColor(centerTextColor); // 設(shè)置文字顏色
textPaint.setStrokeWidth(0); // 注意此處一定要重新設(shè)置寬度為0,否則繪制的文字會重疊
Rect bounds = new Rect(); // 文字邊框
textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 獲得繪制文字的邊界矩形
FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 獲取繪制Text時(shí)的四條線
int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 計(jì)算文字的基線 canvas.drawText(percent, center, baseline, textPaint); // 繪制表示進(jìn)度的文字
}
/**
* 設(shè)置圓環(huán)的寬度
*
* @param width
*/
public void setCircleWidth(int width) {
this.circleWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width, getResources()
.getDisplayMetrics());
circlePaint.setStrokeWidth(circleWidth);
//一般只是希望在View發(fā)生改變時(shí)對UI進(jìn)行重繪。invalidate()方法系統(tǒng)會自動(dòng)調(diào)用 View的onDraw()方法。
invalidate();
}
/**
* 設(shè)置圓環(huán)的底色,默認(rèn)為亮灰色LTGRAY
*
* @param color
*/
public void setFirstColor(int color) {
this.firstColor = color;
circlePaint.setColor(firstColor);
//一般只是希望在View發(fā)生改變時(shí)對UI進(jìn)行重繪。invalidate()方法系統(tǒng)會自動(dòng)調(diào)用 View的onDraw()方法。
invalidate();
}
/**
* 設(shè)置進(jìn)度條的顏色,默認(rèn)為藍(lán)色<br>
*
* @param color
*/
public void setSecondColor(int color) {
this.secondColor = color;
circlePaint.setColor(secondColor);
//一般只是希望在View發(fā)生改變時(shí)對UI進(jìn)行重繪。invalidate()方法系統(tǒng)會自動(dòng)調(diào)用 View的onDraw()方法。
invalidate();
}
/**
* 設(shè)置進(jìn)度條漸變色顏色數(shù)組
*
* @param colors 顏色數(shù)組,類型為int[]
*/
public void setColorArray(int[] colors) {
this.colorArray = colors;
//一般只是希望在View發(fā)生改變時(shí)對UI進(jìn)行重繪。invalidate()方法系統(tǒng)會自動(dòng)調(diào)用 View的onDraw()方法。
invalidate();
}
/**
* 按進(jìn)度顯示百分比,可選擇是否啟用數(shù)字動(dòng)畫
*
* @param duration 動(dòng)畫時(shí)長
*/
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發(fā)生改變時(shí)對UI進(jìn)行重繪。invalidate()方法系統(tǒng)會自動(dòng)調(diào)用 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>
頁面調(diào)用:
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();
}
});
}
});
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android?Flutter實(shí)現(xiàn)頁面切換轉(zhuǎn)場動(dòng)畫效果
Hero組件非常適合從列表、概覽頁切換到詳情頁轉(zhuǎn)場動(dòng)畫場合。本文將利用Hero組件制作一個(gè)簡單的頁面切換轉(zhuǎn)場動(dòng)畫效果,感興趣的可以了解一下2022-06-06
Android WebView調(diào)用本地相冊的方法
這篇文章主要為大家詳細(xì)介紹了Android WebView調(diào)用本地相冊的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
Android實(shí)現(xiàn)掃一掃識別數(shù)字功能
這篇文章主要介紹了Android實(shí)現(xiàn)掃一掃識別數(shù)字功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-09-09
Android ToggleButton 詳解及實(shí)例代碼
這篇文章主要介紹了Android ToggleButton 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件
這篇文章主要給大家介紹了關(guān)于Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
Android開發(fā)中的錯(cuò)誤及解決辦法總結(jié)
本文屬于個(gè)人平時(shí)項(xiàng)目開發(fā)過程遇到的一些問題,記錄下來并總結(jié)解決方案,希望能幫到大家解決問題,需要的朋友可以參考下2022-02-02
Android優(yōu)質(zhì)索尼滾動(dòng)相冊
這篇文章主要介紹了Android優(yōu)質(zhì)索尼滾動(dòng)相冊,桌面小部件滾動(dòng)相冊,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

