Recently, I have seen many app opening advertisements with countdown circles, such as Zhaopin Recruitment, Sohu News, etc. to imitate a wave~~
1. First look at the custom circle 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();
}
}
Define attributes: 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. Let's see how to use it in 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. Look at the layout file of 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. Finally, jump to the MainActivity of your main page: In fact, nothing is done in this.
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);
}
}