Android -- 倒计时 Button 的几种实现

猿小侯
3,273 阅读13分钟

    最近有朋友问我如何实现短信验证功能，还特意强调了验证码发送按钮的倒计时问题，其实这些都是些很基础的问题，但既然写了，也不妨贴出来，权当记录。 

好了，既然是基础，那话不多说，上代码。

    第一种实现方式：自定义倒计时类，实现Runnable接口

[java] view plain copy print?
  1. public class MainActivity extends AppCompatActivity  implements View.OnClickListener {  
  2.   
  3.     private Button timeBtn;  
  4.     public int T = 10; //倒计时时长  
  5.     private Handler mHandler = new Handler();  
  6.   
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_main);  
  11.         timeBtn = (Button) findViewById(R.id.timeBtn);  
  12.         timeBtn.setOnClickListener(this);  
  13.     }  
  14.   
  15.     @Override  
  16.     public void onClick(View view) {  
  17.         switch (view.getId()){  
  18.             case R.id.timeBtn:  
  19.                 new Thread(new MyCountDownTimer()).start(); //开始执行  
  20.                 break;  
  21.         }  
  22.     }  
  23.   
  24.     /** 
  25.      * 自定义倒计时类，实现Runnable接口 
  26.      */  
  27.     class MyCountDownTimer implements Runnable{  
  28.   
  29.         @Override  
  30.         public void run() {  
  31.   
  32.             //倒计时开始，循环  
  33.             while (T > 0) {  
  34.                 mHandler.post(new Runnable() {  
  35.                     @Override  
  36.                     public void run() {  
  37.                         timeBtn.setClickable(false);  
  38.                         timeBtn.setText(T + "秒后重新开始");  
  39.                     }  
  40.                 });  
  41.                 try {  
  42.                     Thread.sleep(1000); //强制线程休眠1秒，就是设置倒计时的间隔时间为1秒。  
  43.                 } catch (InterruptedException e) {  
  44.                     e.printStackTrace();  
  45.                 }  
  46.                 T--;  
  47.             }  
  48.   
  49.             //倒计时结束，也就是循环结束  
  50.             mHandler.post(new Runnable() {  
  51.                 @Override  
  52.                 public void run() {  
  53.                     timeBtn.setClickable(true);  
  54.                     timeBtn.setText("倒计时开始");  
  55.                 }  
  56.             });  
  57.             T = 10; //最后再恢复倒计时时长  
  58.         }  
  59.     }  
  60. }  
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button timeBtn;
    public int T = 10; //倒计时时长
    private Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timeBtn = (Button) findViewById(R.id.timeBtn);
        timeBtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.timeBtn:
                new Thread(new MyCountDownTimer()).start();//开始执行
                break;
        }
    }

    /**
     * 自定义倒计时类，实现Runnable接口
     */
    class MyCountDownTimer implements Runnable{

        @Override
        public void run() {

            //倒计时开始，循环
            while (T > 0) {
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        timeBtn.setClickable(false);
                        timeBtn.setText(T + "秒后重新开始");
                    }
                });
                try {
                    Thread.sleep(1000); //强制线程休眠1秒，就是设置倒计时的间隔时间为1秒。
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                T--;
            }

            //倒计时结束，也就是循环结束
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    timeBtn.setClickable(true);
                    timeBtn.setText("倒计时开始");
                }
            });
            T = 10; //最后再恢复倒计时时长
        }
    }
}

效果展示：


第二种实现方式：自定义Button

[java] view plain copy print?
  1. public class CountDownTimerButton extends Button implements View.OnClickListener {  
  2.   
  3.     private Context mContext;  
  4.     private OnClickListener mOnClickListener;  
  5.     private Timer mTimer;//调度器  
  6.     private TimerTask mTask;  
  7.     private long duration = 10000;//倒计时时长 设置默认10秒  
  8.     private long temp_duration;  
  9.     private String clickBeffor = "倒计时开始";//点击前  
  10.     private String clickAfter = "秒后重新开始";//点击后  
  11.   
  12.     public CountDownTimerButton(Context context) {  
  13.         super(context);  
  14.         mContext = context;  
  15.         setOnClickListener(this);  
  16.     }  
  17.   
  18.     public CountDownTimerButton(Context context, AttributeSet attrs) {  
  19.         super(context, attrs);  
  20.         mContext = context;  
  21.         setOnClickListener(this);  
  22.     }  
  23.   
  24.     private Handler mHandler = new Handler(){  
  25.         @Override  
  26.         public void handleMessage(Message msg) {  
  27.             CountDownTimerButton.this.setText(temp_duration/1000 + clickAfter);  
  28.             temp_duration -= 1000;  
  29.             if (temp_duration < 0) {//倒计时结束  
  30.                 CountDownTimerButton.this.setEnabled(true);  
  31.                 CountDownTimerButton.this.setText(clickBeffor);  
  32.                 stopTimer();  
  33.             }  
  34.         }  
  35.     };  
  36.     @Override  
  37.     public void setOnClickListener(OnClickListener onClickListener) {//提供外部访问方法  
  38.         if (onClickListener instanceof CountDownTimerButton) {  
  39.             super.setOnClickListener(onClickListener);  
  40.         }else{  
  41.             this.mOnClickListener = onClickListener;  
  42.         }  
  43.     }  
  44.   
  45.     @Override  
  46.     public void onClick(View view) {  
  47.         if (mOnClickListener != null) {  
  48.             mOnClickListener.onClick(view);  
  49.         }  
  50.         startTimer();  
  51.     }  
  52.   
  53.     //计时开始  
  54.     private void startTimer(){  
  55.         temp_duration = duration;  
  56.         CountDownTimerButton.this.setEnabled(false);  
  57.         mTimer = new Timer();  
  58.         mTask = new TimerTask() {  
  59.             @Override  
  60.             public void run() {  
  61.                 mHandler.sendEmptyMessage(0x01);  
  62.             }  
  63.         };  
  64.         mTimer.schedule(mTask, 0, 1000);//调度分配，延迟0秒，时间间隔为1秒  
  65.     }  
  66.   
  67.     //计时结束  
  68.     private void stopTimer(){  
  69.         if (mTask != null) {  
  70.             mTask.cancel();  
  71.             mTask = null;  
  72.         }  
  73.         if (mTimer != null) {  
  74.             mTimer.cancel();  
  75.             mTimer = null;  
  76.         }  
  77.     }  
  78. }  
public class CountDownTimerButton extends Button implements View.OnClickListener {

    private Context mContext;
    private OnClickListener mOnClickListener;
    private Timer mTimer;//调度器
    private TimerTask mTask;
    private long duration = 10000;//倒计时时长 设置默认10秒
    private long temp_duration;
    private String clickBeffor = "倒计时开始";//点击前
    private String clickAfter = "秒后重新开始";//点击后

    public CountDownTimerButton(Context context) {
        super(context);
        mContext = context;
        setOnClickListener(this);
    }

    public CountDownTimerButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        setOnClickListener(this);
    }

    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            CountDownTimerButton.this.setText(temp_duration/1000 + clickAfter);
            temp_duration -= 1000;
            if (temp_duration < 0) {//倒计时结束
                CountDownTimerButton.this.setEnabled(true);
                CountDownTimerButton.this.setText(clickBeffor);
                stopTimer();
            }
        }
    };
    @Override
    public void setOnClickListener(OnClickListener onClickListener) {//提供外部访问方法
        if (onClickListener instanceof CountDownTimerButton) {
            super.setOnClickListener(onClickListener);
        }else{
            this.mOnClickListener = onClickListener;
        }
    }

    @Override
    public void onClick(View view) {
        if (mOnClickListener != null) {
            mOnClickListener.onClick(view);
        }
        startTimer();
    }

    //计时开始
    private void startTimer(){
        temp_duration = duration;
        CountDownTimerButton.this.setEnabled(false);
        mTimer = new Timer();
        mTask = new TimerTask() {
            @Override
            public void run() {
                mHandler.sendEmptyMessage(0x01);
            }
        };
        mTimer.schedule(mTask, 0, 1000);//调度分配，延迟0秒，时间间隔为1秒
    }

    //计时结束
    private void stopTimer(){
        if (mTask != null) {
            mTask.cancel();
            mTask = null;
        }
        if (mTimer != null) {
            mTimer.cancel();
            mTimer = null;
        }
    }
}

对应的Activity文件

[java] view plain copy print?
  1. public class MainActivity extends AppCompatActivity{  
  2.   
  3.     private CountDownTimerButton timeBtn;  
  4.   
  5.     @Override  
  6.     protected void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.activity_maind);  
  9.   
  10.         timeBtn = (CountDownTimerButton) findViewById(R.id.timeBtn);  
  11.         timeBtn.setOnClickListener(new View.OnClickListener() {  
  12.             @Override  
  13.             public void onClick(View view) {  
  14.                 Toast.makeText(ThirdActivity.this, "倒计时开始", Toast.LENGTH_SHORT).show();  
  15.             }  
  16.         });  
  17.     }  
  18. }  
public class MainActivity extends AppCompatActivity{

    private CountDownTimerButton timeBtn;

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

        timeBtn = (CountDownTimerButton) findViewById(R.id.timeBtn);
        timeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(ThirdActivity.this, "倒计时开始", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

对应的xml文件

[html] view plain copy print?
  1. <?xml version="1.0"  encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:id="@+id/activity_main"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  10.     android:paddingRight="@dimen/activity_horizontal_margin"  
  11.     android:paddingTop="@dimen/activity_vertical_margin"  
  12.     tools:context="com.hbh.cl.countdowntimerdemo.MainActivity">  
  13.   
  14.     <com.hbh.cl.view.CountDownTimerButton  
  15.         android:id="@+id/timeBtn"  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="wrap_content"  
  18.         android:text="@string/start"/>  
  19.     <TextView  
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content"  
  22.         android:layout_below="@id/timeBtn"  
  23.         android:text="Third Activity"/>  
  24. </RelativeLayout>   
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hbh.cl.countdowntimerdemo.MainActivity">

    <com.hbh.cl.view.CountDownTimerButton
        android:id="@+id/timeBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/start"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/timeBtn"
        android:text="Third Activity"/>
</RelativeLayout>

效果展示：


第三种实现方式：使用 CountDownTimer

[java] view plain copy print?
  1. public class MainActivity extends AppCompatActivity  implements View.OnClickListener {  
  2.   
  3.     private Button timeBtn;  
  4.     private CountDownTime mTime;  
  5.   
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.activity_main);  
  10.         timeBtn = (Button) findViewById(R.id.timeBtn);  
  11.         timeBtn.setOnClickListener(this);  
  12.   
  13.         mTime = new CountDownTime(10000, 1000); //初始化对象  
  14.     }  
  15.   
  16.     @Override  
  17.     public void onClick(View view) {  
  18.         switch (view.getId()){  
  19.             case R.id.timeBtn:  
  20.                 mTime.start(); //开始计时  
  21.                 break;  
  22.         }  
  23.     }  
  24.   
  25.     /** 
  26.      * 第一种方法 使用android封装好的 CountDownTimer 
  27.      * 创建一个类继承 CountDownTimer 
  28.      */  
  29.     class CountDownTime extends CountDownTimer{  
  30.   
  31.         //构造函数  第一个参数代表总的计时时长  第二个参数代表计时间隔  单位都是毫秒  
  32.         public CountDownTime(long millisInFuture, long countDownInterval) {  
  33.             super(millisInFuture, countDownInterval);  
  34.         }  
  35.   
  36.         @Override  
  37.         public void onTick(long l) {  //每计时一次回调一次该方法  
  38.             timeBtn.setClickable(false);  
  39.             timeBtn.setText(l/1000 + "秒后重新开始");  
  40.         }  
  41.   
  42.         @Override  
  43.         public void onFinish() { //计时结束回调该方法  
  44.             timeBtn.setClickable(true);  
  45.             timeBtn.setText("倒计时开始");  
  46.         }  
  47.     }  
  48. }  
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button timeBtn;
    private CountDownTime mTime;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timeBtn = (Button) findViewById(R.id.timeBtn);
        timeBtn.setOnClickListener(this);

        mTime = new CountDownTime(10000, 1000);//初始化对象
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.timeBtn:
                mTime.start(); //开始计时
                break;
        }
    }

    /**
     * 第一种方法 使用android封装好的 CountDownTimer
     * 创建一个类继承 CountDownTimer
     */
    class CountDownTime extends CountDownTimer{

        //构造函数  第一个参数代表总的计时时长  第二个参数代表计时间隔  单位都是毫秒
        public CountDownTime(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
        }

        @Override
        public void onTick(long l) { //每计时一次回调一次该方法
            timeBtn.setClickable(false);
            timeBtn.setText(l/1000 + "秒后重新开始");
        }

        @Override
        public void onFinish() { //计时结束回调该方法
            timeBtn.setClickable(true);
            timeBtn.setText("倒计时开始");
        }
    }
}


效果展示：




代码全都贴上了，都有注释，不说了，下班大笑

avatar
文章
阅读
粉丝