安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时

Posted 2022-06-11 zy9011

在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