Android APP开屏界面倒计时圆圈的实现（附demo下载）

最近看到好多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;

/**
 * @author jkloshhm
 * @date 2018-04-24
 */

public class CountdownCircleProgressBar extends View {

    /**
     * 圆圈的颜色
     */
    private int mCircleColor;

    /**
     * 圆圈的宽度
     */
    private int mCircleWith;

    /**
     * 画笔
     */
    private Paint mPaint;

    /**
     * 当前进度
     */
    private int mProgress;

    /**
     * 是否正在运行
     */
    public boolean isRunning = true;


    public CountdownCircleProgressBar(Context context) {
        this(context, null);
    }

    public CountdownCircleProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    /**
     * 必要的初始化，获得一些自定义的值
     *
     * @param context      上下文
     * @param attrs        attrs
     * @param defStyleAttr defStyleAttr
     */
    public CountdownCircleProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

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

        mPaint = new Paint();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

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

        //用于定义的圆弧的形状和大小的界限
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);

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


    /**
     * 播放倒计时动画
     */
    public void play() {
        //绘制线程
        new Thread() {
            @Override
            public void run() {
                while (isRunning) {
                    mProgress++;
                    postInvalidate();
                    try {
                        Thread.sleep(timeMillis / 360);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }


    /**
     * 倒计时时间
     */
    private long timeMillis = 3000;

    /**
     * 设置倒计时时间
     */
    public void setTimeMillis(long timeMillis) {
        this.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>

2.再来看WelcomeActivity中怎么用：

package com.example.mywelcomeapp;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import java.util.Timer;
import java.util.TimerTask;

/**
 * @date 2018-04-24
 * @author jkloshhm
 *
 */

public class WelcomeActivity extends AppCompatActivity {

    private Timer mTimer = new Timer();

    private CountdownCircleProgressBar mCircleProgressBar;
    /**
     * 开屏时长固定为5000ms
     */
    public final static int OPEN_SCREEN_TIME = 5000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        mCircleProgressBar = (CountdownCircleProgressBar) findViewById(R.id.skipBtn);
        mCircleProgressBar.setTimeMillis(OPEN_SCREEN_TIME);
        //mCircleProgressBar 播放动画
        mCircleProgressBar.play();
        //mCircleProgressBar 跳过按钮点击事件
        mCircleProgressBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startMainActivity();
            }
        });

        //使用计时器Task来等待5秒跳转
        TimerTask timerTask = new TimerTask() {
            @Override
            public void run() {
                startMainActivity();
            }
        };
        mTimer.schedule(timerTask,OPEN_SCREEN_TIME);

    }

    /**
     * 跳转到MainActivity，同时finish WelcomeActivity
     */
    private void startMainActivity(){
        startActivity(new Intent(WelcomeActivity.this,MainActivity.class));
        finish();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 注意：WelcomeActivity销毁时应该停止线程，防止内存泄漏！！！
        mCircleProgressBar.isRunning = false;
        // 注意：WelcomeActivity销毁时应该停止mTimer，防止内存泄漏！！！
        mTimer.cancel();
    }
}

3.再来看WelcomeActivity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="@mipmap/welcome_activity_background">

    <com.example.mywelcomeapp.CountdownCircleProgressBar
        android:id="@+id/skipBtn"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:background="@mipmap/welcome_activity_skip_btn_background"
        app:circleColor="@color/colorPrimary"
        app:circleWith="2dp" />

</RelativeLayout>

4.最后是跳转到你的主页面的MainActivity：其实这个里面什么都没做。

package com.example.mywelcomeapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

/**
 * @date 2018-04-24
 * @author jkloshhm
 *
 */

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}

5.完整demo下载：开屏界面倒计时圆圈的实现demo