Android利用CountDownTimer實現(xiàn)驗證碼倒計時效果實例
前言
等待總是讓人感到焦急和厭煩的,特別是看不到進展的等待。所以為了不讓用戶癡癡地等,我們在進行某些耗時操作時,一般都要設計一個進度條或者倒計時器,讓進度可視化,告訴用戶“等待之后更精彩”。在使用短信驗證碼注冊或者登錄App就可以看到這樣的設計:點擊“發(fā)送驗證碼”的按鈕之后,按鈕上就會出現(xiàn)倒計時(一般為60秒),倒計時結束之后,按鈕的文字就會變成“重新發(fā)送”。
在Android中要實現(xiàn)這樣的效果可以使用Handler發(fā)送消息,但其實還有一個已經(jīng)封裝好的抽象類可以幫上忙,那就是CountDownTimer,利用它,我們可以很輕松地實現(xiàn)倒計時。很久以前我就用過這個類,但是這幾天寫時發(fā)現(xiàn)了一個當初沒有注意到的坑,因此打算寫一篇博客記錄下來。
1、需求分析
- 點擊按鈕之后,按鈕文字變?yōu)椤皀s后發(fā)送驗證碼”(n為倒計時讀數(shù));
- 為了讓倒計時更加醒目,將秒數(shù)和單位設為藍色;
- 倒計時結束之后,按鈕的文字顯示為“重新發(fā)送”。
瞄一眼效果圖:
2、工程創(chuàng)建和布局編寫
創(chuàng)建工程就不用多說了,由于我們只需要看到按鈕上的倒計時效果,不必輸入手機號碼,所以只要在界面上簡單地放置一個按鈕即可:
<RelativeLayout 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" android:padding="16dp" tools:context="com.lindroid.countdowndemo.MainActivity"> <Button android:id="@+id/btn_captcha" android:layout_width="match_parent" android:layout_height="50dp" android:background="#c7c7c7" android:text="獲取驗證碼" android:textAllCaps="false" android:textColor="@android:color/black" android:textSize="18sp" /> </RelativeLayout>
3、如何使用CountDownTimer
CountDownTimer倒計時器的使用并不難,我們可以創(chuàng)建一個類繼承它,并實現(xiàn)它的構造函數(shù)和重寫兩個方法:
private CountTimer countTimer; /** * 點擊按鈕后倒計時 */ class CountTimer extends CountDownTimer { public CountTimer(long millisInFuture, long countDownInterval) { super(millisInFuture, countDownInterval); } /** * 倒計時過程中調(diào)用 * * @param millisUntilFinished */ @Override public void onTick(long millisUntilFinished) { } /** * 倒計時完成后調(diào)用 */ @Override public void onFinish() { } }
大體的框架如上所述,我來稍微解釋一下。首先是構造函數(shù),里面有兩個參數(shù):
- millisInFuture:倒計時的總時間,單位為毫秒
- countDownInterval:倒計時的時間間隔,單位為毫秒
比如我想設置10秒的倒計時,每隔1秒就讀一次數(shù),那么初始化就可以將數(shù)值傳入:
CountTimer countTimer = = new CountTimer(10000, 1000);
除了構造函數(shù),還有兩個方法,它們的作用分別如下:
- onTick:倒計時過程中調(diào)用
- onFinish:倒計時結束后調(diào)用
那么怎么開啟倒計時呢?只需要用countTimer去調(diào)用start方法就可以了。另外,為了節(jié)省資源,在Activity銷毀時應該停止倒計時:
@Override protected void onDestroy() { super.onDestroy(); countTimer.cancel(); }
到這里,你應該知道怎么使用如何使用CountDownTimer了吧?如果還有疑問,可以在文末下載完整的代碼。
4、實現(xiàn)簡單的倒計時效果
現(xiàn)在我們先來實現(xiàn)點擊按鈕后就進行倒計時讀數(shù)的效果,代碼如下:
CountTimer countTimer = new CountTimer(10000, 1000); /** * 點擊按鈕后倒計時 */ class CountTimer extends CountDownTimer { public CountTimer(long millisInFuture, long countDownInterval) { super(millisInFuture, countDownInterval); } /** * 倒計時過程中調(diào)用 * * @param millisUntilFinished */ @Override public void onTick(long millisUntilFinished) { Log.e("Tag", "倒計時=" + (millisUntilFinished/1000)); btnCaptcha.setText(millisUntilFinished / 1000 + "s后重新發(fā)送"); //設置倒計時中的按鈕外觀 btnCaptcha.setClickable(false);//倒計時過程中將按鈕設置為不可點擊 btnCaptcha.setBackgroundColor(Color.parseColor("#c7c7c7")); btnCaptcha.setTextColor(ContextCompat.getColor(context, android.R.color.black)); btnCaptcha.setTextSize(16); } /** * 倒計時完成后調(diào)用 */ @Override public void onFinish() { Log.e("Tag", "倒計時完成"); //設置倒計時結束之后的按鈕樣式 btnCaptcha.setBackgroundColor(ContextCompat.getColor(context, android.R.color.holo_blue_light)); btnCaptcha.setTextColor(ContextCompat.getColor(context, android.R.color.white)); btnCaptcha.setTextSize(18); btnCaptcha.setText("重新發(fā)送"); btnCaptcha.setClickable(true); } }
倒計時的讀數(shù)是實時的,毫無疑問應該在onTick方法中處理這些邏輯,倒計時完成后要將按鈕文字改為“重新發(fā)送”,這個可以交給onFinish。
運行一下,點擊按鈕,倒計時成功出現(xiàn)了,但是再點幾次,詭異的事情發(fā)生了:有時候倒計時讀數(shù)會漏掉某個數(shù)字,比如從10直接就到8了,打印出來的日志是這樣的:
這……到底是怎么回事?少掉的一秒難道是被某人給續(xù)了么?
5、CountDownTimer誤差解決
為了找回生命中的這一秒鐘,我在一個技術群里和小伙伴們討論了很久,最后算是逃過了時間黑洞的魔爪。
我們采用的倒計時讀數(shù)是將millisUntilFinished除于1000得到的,這里就有一個小小的陷阱了:millisUntilFinished是長整型變量,除于1000之后得到是整數(shù)部分。我們可以將millisUntilFinished的值打印出來看看:
現(xiàn)在明白為什么看不到讀數(shù)9了嗎?那是因為程序執(zhí)行雖然很快,但再快也是需要時間的,所以從10秒倒計時到9秒時,millisUntilFinished會比9000稍小一點,是8999,而長整型8999除于1000之后就得到8了。當然,既然是誤差那就有多種情況,少掉的數(shù)字不一定是9,這里只是我針對我遇到的情況而言。
知道原因之后就好辦了,我們可以先將millisUntilFinished轉換成double類型后再除于1000,這樣就可以保留小數(shù)部分了,然后使用Math類中的round方法四舍五入,但是這樣倒計時的話會從10到2,這顯然不行,所以再減去1,讓它從9到1。修改后的onTick方法代碼是這樣的:
public void onTick(long millisUntilFinished) { //處理后的倒計時數(shù)值 int time = (int) (Math.round((double) millisUntilFinished / 1000) - 1); btnCaptcha.setText(String.valueOf(time)+"s后重新發(fā)送"); //設置倒計時中的按鈕外觀 btnCaptcha.setClickable(false);//倒計時過程中將按鈕設置為不可點擊 btnCaptcha.setBackgroundColor(Color.parseColor("#c7c7c7")); btnCaptcha.setTextColor(ContextCompat.getColor(context, android.R.color.black)); btnCaptcha.setTextSize(16); }
運行后試試,就可以發(fā)現(xiàn)失去的那一秒又回來啦。
6、給倒計時讀數(shù)和單位設置前景色
給同一字符串中的不同字符設置不同的字體顏色,這就需要用到SpannableString與SpannableStringBuilder相關的知識了,限于篇幅,這里就不贅述了,可以參考這篇文章:SpannableString與SpannableStringBuilder。這里只簡單介紹一下:
6.1 拼接字符串
int time = (int) (Math.round((double) millisUntilFinished / 1000) - 1); //拼接要顯示的字符串 SpannableStringBuilder sb = new SpannableStringBuilder(); sb.append(String.valueOf(time)); sb.append("s后重新發(fā)送");
6.2 設置要顯示的文字樣式
//字符“后”在字符串中的下標 int index = String.valueOf(sb).indexOf("后"); //給秒數(shù)和單位設置藍色前景色 ForegroundColorSpan colorSpan = new ForegroundColorSpan(ContextCompat.getColor(context, android.R.color.holo_blue_dark)); sb.setSpan(colorSpan, 0, index, Spannable.SPAN_INCLUSIVE_EXCLUSIVE); btnCaptcha.setText(sb);
這次運行之后就可以看到跟效果圖一樣的效果了。最后給一下源碼:CountDownTimerDemo
總結
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- Android使用CountDownTimer模擬短信驗證倒計時
- Android CountDownTimer實現(xiàn)定時器和倒計時效果
- Android使用CountDownTimer類實現(xiàn)倒計時鬧鐘
- Android實現(xiàn)倒計時CountDownTimer使用詳解
- Android 列表倒計時的實現(xiàn)的示例代碼(CountDownTimer)
- Android利用CountDownTimer實現(xiàn)倒計時功能 Android實現(xiàn)停留5s跳轉到登錄頁面
- Android中CountDownTimer 實現(xiàn)倒計時功能
- Android CountDownTimer案例總結
相關文章
Android判斷現(xiàn)在所處界面是否為home主桌面的方法
這篇文章主要介紹了Android判斷現(xiàn)在所處界面是否為home主桌面的方法,涉及Android界面判斷的相關技巧,需要的朋友可以參考下2015-05-05Android實現(xiàn)打開手機淘寶并自動識別淘寶口令彈出商品信息功能
最近項目經(jīng)理給我們安排一個活兒,基于Android開發(fā)實現(xiàn)打開手機淘寶,并自動識別淘口令,彈出商品信息,今天小編就抽空給大家分享下這個需求是怎么實現(xiàn)的,需要的朋友參考下吧2017-11-11Android種使用Notification實現(xiàn)通知管理以及自定義通知欄實例(示例四)
本篇文章主要介紹了Android種使用Notification實現(xiàn)通知管理以及自定義通知欄實例,具有一定的參考價值,需要的朋友可以了解一下。2016-12-12EditText監(jiān)聽方法,實時的判斷輸入多少字符
在EditText提供了一個方法addTextChangedListener實現(xiàn)對輸入文本的監(jiān)控。本文分享了EditText監(jiān)聽方法案例,需要的朋友一起來看下吧2016-12-12Android應用內(nèi)懸浮窗的實現(xiàn)方案示例
本篇文章主要介紹了Android應用內(nèi)懸浮窗的實現(xiàn)方案示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08