Android APP开屏界面倒计时圆圈的实现

最近看到好多APP开屏广告有倒计时圆圈，比如智联招聘，搜狐新闻等。来模仿一波~~

1. 先来看自定义圆圈view：CountdownCircleProgressBar

package com.example.mywelcomeapp;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;


public class CountdownCircleProgressBar extends View {

<span class="hljs-javadoc">/**
 * 圆圈的颜色
 */</span>
<span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mCircleColor;

<span class="hljs-javadoc">/**
 * 圆圈的宽度
 */</span>
<span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mCircleWith;

<span class="hljs-javadoc">/**
 * 画笔
 */</span>
<span class="hljs-keyword">private</span> Paint mPaint;

<span class="hljs-javadoc">/**
 * 当前进度
 */</span>
<span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mProgress;

<span class="hljs-javadoc">/**
 * 是否正在运行
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> isRunning = <span class="hljs-keyword">true</span>;


<span class="hljs-keyword">public</span> <span class="hljs-title">CountdownCircleProgressBar</span>(Context context) {
    <span class="hljs-keyword">this</span>(context, <span class="hljs-keyword">null</span>);
}

<span class="hljs-keyword">public</span> <span class="hljs-title">CountdownCircleProgressBar</span>(Context context, @Nullable AttributeSet attrs) {
    <span class="hljs-keyword">this</span>(context, attrs, <span class="hljs-number">0</span>);
}

<span class="hljs-javadoc">/**
 * 必要的初始化，获得一些自定义的值
 *
 *<span class="hljs-javadoctag"> @param</span> context      上下文
 *<span class="hljs-javadoctag"> @param</span> attrs        attrs
 *<span class="hljs-javadoctag"> @param</span> defStyleAttr defStyleAttr
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-title">CountdownCircleProgressBar</span>(Context context, @Nullable AttributeSet attrs, <span class="hljs-keyword">int</span> defStyleAttr) {
    <span class="hljs-keyword">super</span>(context, attrs, defStyleAttr);

    TypedArray array = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.CountdownCircleProgressBar, defStyleAttr, <span class="hljs-number">0</span>);
    <span class="hljs-keyword">int</span> n = array.getIndexCount();
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>; i &lt; n; i++) {
        <span class="hljs-keyword">int</span> attr = array.getIndex(i);
        <span class="hljs-keyword">switch</span> (attr) {
            <span class="hljs-keyword">case</span> R.styleable.CountdownCircleProgressBar_circleColor:
                mCircleColor = array.getColor(attr, Color.GREEN);
                <span class="hljs-keyword">break</span>;
            <span class="hljs-keyword">case</span> R.styleable.CountdownCircleProgressBar_circleWith:
                mCircleWith = array.getDimensionPixelSize(attr, (<span class="hljs-keyword">int</span>) TypedValue.applyDimension(
                        TypedValue.COMPLEX_UNIT_PX, <span class="hljs-number">20</span>, getResources().getDisplayMetrics()));
                <span class="hljs-keyword">break</span>;
            <span class="hljs-keyword">default</span>:
                <span class="hljs-keyword">break</span>;
        }
    }
    array.recycle();

    mPaint = <span class="hljs-keyword">new</span> Paint();

}

<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMeasure</span>(<span class="hljs-keyword">int</span> widthMeasureSpec, <span class="hljs-keyword">int</span> heightMeasureSpec) {
    <span class="hljs-keyword">super</span>.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas) {
    <span class="hljs-comment">//获取圆心坐标</span>
    <span class="hljs-keyword">int</span> centre = getWidth() / <span class="hljs-number">2</span>;
    <span class="hljs-comment">//半径</span>
    <span class="hljs-keyword">int</span> radius = centre - mCircleWith / <span class="hljs-number">2</span>;
    <span class="hljs-comment">//设置圆环宽度</span>
    mPaint.setStrokeWidth(mCircleWith);
    <span class="hljs-comment">//消除锯齿</span>
    mPaint.setAntiAlias(<span class="hljs-keyword">true</span>);
    <span class="hljs-comment">//设置空心</span>
    mPaint.setStyle(Paint.Style.STROKE);

    <span class="hljs-comment">//用于定义的圆弧的形状和大小的界限</span>
    RectF oval = <span class="hljs-keyword">new</span> RectF(centre - radius, centre - radius, centre + radius, centre + radius);

    <span class="hljs-comment">//canvas.drawCircle(centre, centre, radius, mPaint);//换出圆环</span>
    <span class="hljs-comment">//设置圆环的颜色</span>
    mPaint.setColor(mCircleColor);
    <span class="hljs-comment">//根据进度画圆弧: 顺时针画圆弧</span>
    canvas.drawArc(oval, -<span class="hljs-number">90</span>, mProgress, <span class="hljs-keyword">false</span>, mPaint);
    <span class="hljs-comment">//根据进度画圆弧 : 逆时针画圆弧</span>
    <span class="hljs-comment">//canvas.drawArc(oval, -90, -mProgress, false, mPaint);</span>
}


<span class="hljs-javadoc">/**
 * 播放倒计时动画
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">play</span>() {
    <span class="hljs-comment">//绘制线程</span>
    <span class="hljs-keyword">new</span> Thread() {
        <span class="hljs-annotation">@Override</span>
        <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">run</span>() {
            <span class="hljs-keyword">while</span> (isRunning) {
                mProgress++;
                postInvalidate();
                <span class="hljs-keyword">try</span> {
                    Thread.sleep(timeMillis / <span class="hljs-number">360</span>);
                } <span class="hljs-keyword">catch</span> (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }.start();
}


<span class="hljs-javadoc">/**
 * 倒计时时间
 */</span>
<span class="hljs-keyword">private</span> <span class="hljs-keyword">long</span> timeMillis = <span class="hljs-number">3000</span>;

<span class="hljs-javadoc">/**
 * 设置倒计时时间
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setTimeMillis</span>(<span class="hljs-keyword">long</span> timeMillis) {
    <span class="hljs-keyword">this</span>.timeMillis = timeMillis;
    invalidate();
}


}

定义属性：attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CountdownCircleProgressBar">
        <attr name="circleColor" format="color"/>
        <attr name="circleWith" format="dimension"/>
    </declare-styleable>
</resources>