安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时
在sina里看到了什么全民夺宝的链接，然后忍不住1元的诱惑被坑了10多块，什么都没有抽到，但是还是有人抽到了不知道是不是坑爹的，然后也就动手做一下倒计时的功能。
先看全民夺宝：
说起这个功能是不是感觉so easy,然后就以此来搞2个倒计时效果，顺便也学习一下CountDownTimer的使用。
哈哈，看看今天实现的效果图：
回顾 常用的倒计时方式
方法一
Timer与TimerTask（Java实现）
public class timerTask extends Activity{
private int recLen = 11;
private TextView txtView;
Timer timer = new Timer();
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.timertask);
txtView = (TextView)findViewById(R.id.txttime);
timer.schedule(task, 1000, 1000); // timeTask
}
TimerTask task = new TimerTask() {
@Override
public void run() {
runOnUiThread(new Runnable() { // UI thread
@Override
public void run() {
recLen--;
txtView.setText(""+recLen);
if(recLen < 0){
timer.cancel();
txtView.setVisibility(View.GONE);
}
}
});
}
};
} 方法二
TimerTask与Handler（不用Timer的改进型）
public class timerTask extends Activity{
private int recLen = 11;
private TextView txtView;
Timer timer = new Timer();
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.timertask);
txtView = (TextView)findViewById(R.id.txttime);
timer.schedule(task, 1000, 1000); // timeTask
}
final Handler handler = new Handler(){
@Override
public void handleMessage(Message msg){
switch (msg.what) {
case 1:
txtView.setText(""+recLen);
if(recLen < 0){
timer.cancel();
txtView.setVisibility(View.GONE);
}
}
}
};
TimerTask task = new TimerTask() {
@Override
public void run() {
recLen--;
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
}
};
} 方法三
Handler与Message（不用TimerTask）
public class timerTask extends Activity{
private int recLen = 11;
private TextView txtView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.timertask);
txtView = (TextView)findViewById(R.id.txttime);
Message message = handler.obtainMessage(1); // Message
handler.sendMessageDelayed(message, 1000);
}
final Handler handler = new Handler(){
public void handleMessage(Message msg){ // handle message
switch (msg.what) {
case 1:
recLen--;
txtView.setText("" + recLen);
if(recLen > 0){
Message message = handler.obtainMessage(1);
handler.sendMessageDelayed(message, 1000); // send message
}else{
txtView.setVisibility(View.GONE);
}
}
super.handleMessage(msg);
}
};
} 方法四
Handler与Thread（不占用UI线程）
public class timerTask extends Activity{
private int recLen = 11;
private TextView txtView;
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.timertask);
txtView = (TextView)findViewById(R.id.txttime);
new Thread(new MyThread()).start(); // start thread
}
final Handler handler = new Handler(){ // handle
public void handleMessage(Message msg){
switch (msg.what) {
case 1:
recLen--;
txtView.setText("" + recLen);
}
super.handleMessage(msg);
}
};
public class MyThread implements Runnable{ // thread
@Override
public void run(){
while(recLen>0){
try{
Thread.sleep(1000); // sleep1000ms
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
}catch (Exception e) {
} 方法五
Handler与Runnable（最简单型）
public class timerTask extends Activity{
private int recLen = 11;
private TextView txtView;
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.timertask);
txtView = (TextView)findViewById(R.id.txttime);
handler.postDelayed(runnable, 1000);
}
Handler handler = new Handler();
Runnable runnable = new Runnable() {
@Override
public void run() {
if(recLen>0){
recLen--;
}
txtView.setText("" + recLen);
handler.postDelayed(this, 1000);
}
};
} 回顾了以前最常使用的5种方法是不是觉得还是比较麻烦，要说最好的也就第5种。
CountDownTimer 实现倒计时功能
使用案列（简单）
/** * 继承 CountDownTimer 防范 * * 重写 父类的方法 onTick() 、 onFinish() */
class MyCountDownTimer extends CountDownTimer {
/** * @param millisInFuture * 表示以毫秒为单位 倒计时的总数 * 例如 millisInFuture=1000 表示1秒 * @param countDownInterval * 表示 间隔 多少微秒 调用一次 onTick 方法 * 例如: countDownInterval =1000 ; 表示每1000毫秒调用一次onTick() * */
public MyCountDownTimer(long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
}
@Override
public void onFinish() {
.....//记时结束处理
}
@Override
public void onTick(long millisUntilFinished) {
.....//计时过程中的处理
}
}
} 开始倒计时使用：CountDownTimer .start();
关闭：CountDownTimer .cancle();
这里拿两种情况来实现这功能，顺便也做成2个自定义view来使用。
布局界面图：
先看布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.losileeya.countdownmaster.MainActivity" android:layout_marginTop="20dp" android:gravity="center_horizontal" android:orientation="vertical" android:background="#AAA9AA">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="场景一：商品抢购" android:textSize="24sp" android:textColor="#D93552" />
<com.losileeya.countdownmaster.view.CommodityBuyView android:id="@+id/commodityBuyView" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="场景二:短信验证码" android:textSize="24sp" android:textColor="#D93552" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="vertical">
<EditText android:id="@+id/et_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/code_bg" android:hint="请输入手机号" android:padding="10dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:maxLength="11" android:textSize="16sp"/>
<LinearLayout android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" >
<EditText android:id="@+id/et_msg_code" android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="1" android:background="@drawable/code_bg" android:layout_marginLeft="50dp" android:gravity="center" />
<com.losileeya.countdownmaster.view.TimeButton android:id="@+id/time_button" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="center" >
</com.losileeya.countdownmaster.view.TimeButton>
</LinearLayout>
</LinearLayout>
</LinearLayout>我们先来 做短信验证码的倒计时功能：
思路就是：给按钮监听是否可点击，并且动态改变显示的文字，从而实现倒计时的效果。
package com.losileeya.countdownmaster.view;
import android.content.Context;
import android.os.CountDownTimer;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import com.losileeya.countdownmaster.R;
/** * 自定义控件，实现验证码按钮倒计时功能。 * losileeya * */
public class TimeButton extends LinearLayout {
private Button timeButton;
private int default_time = 60*1000;//默认时间
private TimeButtonCallBack timeButtoncallback;//倒计时按钮回掉接口
private MyCountDownTimer mc; //倒计时线程
public TimeButton(Context context) {
this(context, null);
}
public TimeButton(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TimeButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//把view和布局绑定
timeButton = (Button) inflater.inflate(R.layout.view_time_button, this).findViewById(R.id.time);
initListerner();
}
/** * 暴露倒计时时间给使用者调 * @param millis */
public void setTime(int millis){
this.default_time= millis;
}
public void initListerner() {
timeButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (timeButtoncallback != null) {
if (timeButtoncallback.Start()) {
// 手机号验证通过了，那么继续下面的操作。
} else {
// 手机号验证未通过，直接返回了，不执行下面的操作。
return;
}
} else {
// 回调接口为空，有问题，直接返回了，不执行下面的操作。
return;
}
timeButton.setClickable(false);
mc = new MyCountDownTimer(default_time, 1000);
mc.start(); //倒计时记时
}
});
}
public void setTimeButtonCallBack(TimeButtonCallBack timeButtoncallback) {
this.timeButtoncallback = timeButtoncallback;
}
/** * 倒计时控件回调外部代码的接口。 * * */
public interface TimeButtonCallBack {
/** * 点击按钮后，开始计时前调用的方法。 * * @return 返回true会开始计时，false会退出计时。 */
public boolean Start();
/** * 结束啦。 */
public void End();
/** * 数字发生变化了。 * * @param num * @return */
public void numChanged(int num);
}
/** * 继承 CountDownTimer 防范 * * 重写 父类的方法 onTick() 、 onFinish() */
class MyCountDownTimer extends CountDownTimer {
/** * * @param millisInFuture * 表示以毫秒为单位 倒计时的总数 * * 例如 millisInFuture=1000 表示1秒 * * @param countDownInterval * 表示 间隔 多少微秒 调用一次 onTick 方法 * * 例如: countDownInterval =1000 ; 表示每1000毫秒调用一次onTick() * */
public MyCountDownTimer(long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
}
@Override
public void onFinish() {
mc.cancel();
timeButton.setText("获取验证码");
timeButton.setClickable(true);
if (timeButtoncallback != null) {
timeButtoncallback.End();
}
}
@Override
public void onTick(long millisUntilFinished) {
timeButton.setText(millisUntilFinished/1000 + "秒后重新获取");
if (timeButtoncallback != null) {
timeButtoncallback.numChanged((int)millisUntilFinished/1000);
}
}
}
}接下来是仿全民夺宝抢购倒计时功能：
实现思路：一整个view包含商品图片、商品描述，项目实际开发中会通过接口获取值，然后就是一个倒计时效果，倒计时结束后变为揭晓获奖答案。
package com.losileeya.countdownmaster.view;
import android.content.Context;
import android.os.CountDownTimer;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.losileeya.countdownmaster.R;
/** * Created by losileeya on 2016/4/21. */
public class CommodityBuyView extends LinearLayout {
private TextView tv_goods_desc,tv_status,tv_awardee;
private MyCountDownTimer mc;
private LinearLayout ll_result;
private String awardee;
public CommodityBuyView(Context context) {
this(context, null);
}
public CommodityBuyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CommodityBuyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
/** * find 控件，初始化 * @param context */
private void initView(Context context) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//通过LayoutInflater 打气筒填补当前自定义view的布局。this表示attach到父控件
View view=inflater.inflate(R.layout.view_commodity_buying,this);
tv_goods_desc= (TextView)view.findViewById(R.id.tv_goods_desc);
tv_status= (TextView) view.findViewById(R.id.tv_status);
tv_awardee= (TextView) view.findViewById(R.id.tv_awardee);
ll_result= (LinearLayout) view.findViewById(R.id.ll_result);
tv_status=(TextView) view.findViewById(R.id.tv_status);
//这里为了显示出毫秒，所以0.1秒倒计时一次
mc = new MyCountDownTimer(280000, 100);
mc.start();
}
/** * 继承 CountDownTimer 防范 * * 重写 父类的方法 onTick() 、 onFinish() */
class MyCountDownTimer extends CountDownTimer {
/** * * @param millisInFuture * 表示以毫秒为单位 倒计时的总数 * * 例如 millisInFuture=1000 表示1秒 * * @param countDownInterval * 表示 间隔 多少微秒 调用一次 onTick 方法 * * 例如: countDownInterval =1000 ; 表示每1000毫秒调用一次onTick() * */
public MyCountDownTimer(long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
}
@Override
public void onFinish() {
tv_status.setText("揭晓中....");
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
//倒计时隐藏
tv_status.setVisibility(View.GONE);
//获奖结果显示
ll_result.setVisibility(View.VISIBLE);
//延迟5秒后公布获奖人
tv_awardee.setText(awardee);
}
}, 5000);
}
/** * 处理时间倒计时进行页面刷新 * @param millisUntilFinished */
@Override
public void onTick(long millisUntilFinished) {
int ss = 1000;
int mi = ss * 60;
long minute = millisUntilFinished/ mi;//计算分钟
long second = (millisUntilFinished- minute * mi) / ss;//总时间-分钟的毫秒数得到秒数
long milliSecond = millisUntilFinished - minute * mi - second * ss;//获得毫秒数
String strMinute = minute < 10 ? "0" + minute : "" + minute;//分钟
String strSecond = second < 10 ? "0" + second : "" + second;//秒
String strMilliSecond = milliSecond < 10 ? "0" + milliSecond : "" + milliSecond;//毫秒不满十前面补0
strMilliSecond = milliSecond >100 ? strMilliSecond.substring(0,strMilliSecond.length()-1) : "" + strMilliSecond;////毫秒超过100显示前2位
//显示分秒毫秒的倒计时
tv_status.setText(strMinute + " 分 "+strSecond+"秒"+strMilliSecond);
}
}
/** * 设置获奖人 * @param awardee */
public void setAwardee(String awardee){
this.awardee= awardee;
}
}就写到这里吧,困觉。
总结
其实代码是很简单的，但是效果也还算可以的，项目过程中也或许用得到，至少很多人可能都不知道CountDownTimer这个东东，所以兴趣是最好的老师。如果你觉得还行的话，帮忙顶起来这将是对我最大的鼓励。
come on,enjoy it.
demo传送门： CountDownMaster
这里最后推荐一个倒计时控件：CountdownView