Android實現(xiàn)點擊獲取驗證碼倒計時效果
我們在開發(fā)中經(jīng)常用到倒計時的功能,比如發(fā)送驗證碼后,倒計時60s再進行驗證碼的獲取,為了方便以后使用,這里做個記錄,講講倒計時器的實現(xiàn)。
1、先進行倒計時工具類的封裝
public class CountDownTimerUtils extends CountDownTimer {
private TextView mTextView;
/**
* @param textView The TextView
*
*
* @param millisInFuture The number of millis in the future from the call
* to {@link #start()} until the countdown is done and {@link #onFinish()}
* is called.
* @param countDownInterval The interval along the way to receiver
* {@link #onTick(long)} callbacks.
*/
public CountDownTimerUtils(TextView textView, long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
this.mTextView = textView;
}
/**
* 倒計時期間會調(diào)用
* @param millisUntilFinished
*/
@Override
public void onTick(long millisUntilFinished) {
mTextView.setClickable(false); //設(shè)置不可點擊
mTextView.setText(millisUntilFinished / 1000 + "秒"); //設(shè)置倒計時時間
mTextView.setBackgroundResource(R.drawable.shape_verify_btn_press); //設(shè)置按鈕為灰色,這時是不能點擊的
SpannableString spannableString = new SpannableString(mTextView.getText().toString()); //獲取按鈕上的文字
ForegroundColorSpan span = new ForegroundColorSpan(Color.RED);
/**
* public void setSpan(Object what, int start, int end, int flags) {
* 主要是start跟end,start是起始位置,無論中英文,都算一個。
* 從0開始計算起。end是結(jié)束位置,所以處理的文字,包含開始位置,但不包含結(jié)束位置。
*/
spannableString.setSpan(span, 0, 2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);//將倒計時的時間設(shè)置為紅色
mTextView.setText(spannableString);
}
/**
* 倒計時完成后調(diào)用
*/
@Override
public void onFinish() {
mTextView.setText("重新獲取驗證碼");
mTextView.setClickable(true);//重新獲得點擊
mTextView.setBackgroundResource(R.drawable.shape_verify_btn_normal); //還原背景色
}
}
讓這個工具類繼承CountDownTimer,然后把顯示倒計時的View傳進去,在倒計時期間會調(diào)用onTick方法,在這個方法里面對View的倒計時界面進行刷新,倒計時結(jié)束后,會調(diào)用onFinish方法,在里面恢復(fù)View的狀態(tài)即可。
2、布局文件
未點擊獲取驗證碼時的view布局 shape_verify_btn_normal.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <!-- 填充的顏色:這里設(shè)置背景透明 --> <solid android:color="@color/maincolor" /> <!-- 邊框的顏色 :不能和窗口背景色一樣--> <stroke android:width="1dp" android:color="@color/white" /> <!-- 設(shè)置按鈕的四個角為弧形 --> <!-- android:radius 弧形的半徑 --> <corners android:radius="5dip" /> <!-- padding:Button里面的文字與Button邊界的間隔 --> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> </shape>
點擊獲取驗證碼之后的view布局 shape_verify_btn_press.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <!-- 填充的顏色:這里設(shè)置背景透明 --> <solid android:color="@color/graywhite" /> <!-- 邊框的顏色 :不能和窗口背景色一樣--> <stroke android:width="1dp" android:color="@color/white" /> <!-- 設(shè)置按鈕的四個角為弧形 --> <!-- android:radius 弧形的半徑 --> <corners android:radius="5dip" /> <!-- padding:Button里面的文字與Button邊界的間隔 --> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> </shape>
整個界面的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/login_bg"> <EditText android:id="@+id/rst_phone_number" android:layout_width="match_parent" android:layout_height="40dp" android:inputType="phone" android:hint="@string/phone_number" android:textSize="16sp" android:textColor="@color/black" android:singleLine="true" android:background="@drawable/shape_form" android:textCursorDrawable="@drawable/text_cursor" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:layout_marginTop="30dp" android:layout_gravity="center_vertical"/> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:layout_marginTop="15dp" android:orientation="horizontal"> <EditText android:id="@+id/rst_verify_code" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:inputType="number" android:hint="@string/rst_verify_code" android:textSize="16sp" android:textColor="@color/black" android:singleLine="true" android:background="@drawable/shape_form" android:textCursorDrawable="@drawable/text_cursor" /> <TextView android:id="@+id/rst_send_code" android:layout_width="130dp" android:layout_height="match_parent" android:text="@string/rst_send_code" android:textSize="13sp" android:textColor="@color/white" android:gravity="center" android:layout_marginLeft="10dp" android:background="@drawable/shape_verify_btn_normal"/> </LinearLayout> <Button android:id="@+id/rst_next_step" android:layout_width="match_parent" android:layout_height="40dp" android:layout_margin="30dp" android:text="@string/rst_next_step" android:textSize="15sp" android:textColor="@color/white" android:background="@drawable/shape_btn"/> </LinearLayout>
這里布局有個問題,因為獲取驗證碼這個TextView中的字會在倒計時期間有變化,而且每次字的變化長度不一樣,如果把它的layout_width設(shè)為wrap_content,那么這個TextView的長度會變化,影響界面美觀,所以可以把它的長度固定,然后把驗證碼輸入框的layout_weight設(shè)為1,這樣就可以了。
3、具體使用方法
// 發(fā)送成功進入倒計時 countDownTimer = new CountDownTimerUtils(tv_send_code, 60000, 1000); countDownTimer.start();
其中60000代表要倒計時的時長,即60s;1000代表每次遞減1s。
以上就是具體的實現(xiàn)過程,下面附幾張效果圖!



以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Studio導(dǎo)入Project與Module的方法及實例
這篇文章主要介紹了Android Studio導(dǎo)入Project與Module的方法及實例的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android Studio使用教程(二):基本設(shè)置與運行
這篇文章主要介紹了Android Studio使用教程(二):基本設(shè)置與運行,本文講解了項目結(jié)構(gòu)、偏好設(shè)置、常用功能介紹、創(chuàng)建模擬器等內(nèi)容,需要的朋友可以參考下2015-05-05
Flutter TV Android端開發(fā)技巧詳細(xì)教程
這篇文章主要為大家介紹了Flutter TV Android端開發(fā)技巧詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
Android 之BottomsheetDialogFragment仿抖音評論底部彈出對話框效果(實例代碼)
這篇文章主要介紹了Android 中之BottomsheetDialogFragment仿抖音評論底部彈出對話框效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Android編程之線性布局LinearLayout實例簡析
這篇文章主要介紹了Android編程之線性布局LinearLayout用法,結(jié)合實例形式簡單分析了Android線性布局的使用技巧,需要的朋友可以參考下2016-01-01
android 仿微信demo——微信通訊錄界面功能實現(xiàn)(移動端,服務(wù)端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能給你們提供幫助2021-06-06
詳解Android業(yè)務(wù)組件化之URL Schema使用
這篇文章主要為大家詳細(xì)介紹了Android業(yè)務(wù)組件化之URL Schema使用,感興趣的小伙伴們可以參考一下2016-09-09
Android原生ViewPager控件實現(xiàn)卡片翻動效果
這篇文章主要為大家詳細(xì)介紹了Android原生ViewPager控件實現(xiàn)卡片翻動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07

