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