Andorid realization clicks to obtain the verification code countdown effect _android

We often use in the development of the countdown function, such as sending verification code, Countdown 60s and then verify the acquisition of code, in order to facilitate later use, here to make a record, talk about the implementation of the countdown.

1, the first Countdown tool class encapsulation

public class Countdowntimerutils extends Countdowntimer {private TextView mtextview; /** * @param textView the TextView * * * @param millisinfuture the number of Millis in the future fro M the call * to {@link #start ()} until the countdown are 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 (Millisinfutu 
    Re, countdowninterval); 
  This.mtextview = TextView;  
    The * @param millisuntilfinished/@Override public void Ontick (long millisuntilfinished) {/** * will be invoked during the countdown. Mtextview.setclickable (FALSE); Set not clickable Mtextview.settext (millisuntilfinished/1000 + "SEC"); Set countdown time Mtextview.setbackgroundresource (r.drawable.shape_verify_btn_press); The Set button is grayed out and is not clickable spannablestringspannablestring = new Spannablestring (Mtextview.gettext (). toString ());
    Gets the text on the button foregroundcolorspan span = new Foregroundcolorspan (color.red);  
     /** * public void Setspan (Object what, int start, int end, int flags) {* Mainly start and end,start are starting positions, both in English and Chinese. * Calculated starting from 0. 
     End is the ending position, so the text that is processed contains the start position, but does not contain the ending position. /Spannablestring.setspan (span, 0, 2, spannable.span_inclusive_exclusive)//The countdown time is set to red Mtextview.settext (Spann 
  ablestring); 
    /** * After the countdown is complete, call * * @Override public void OnFinish () {Mtextview.settext ("re-obtaining authentication code"); Mtextview.setclickable (TRUE);//Regain click Mtextview.setbackgroundresource (r.drawable.shape_verify_btn_normal); 

 Restore Background Color}}

Let this tool class inherit Countdowntimer, and then the display countdown to the view, in the countdown will call the Ontick method, in this method to the view of the countdown interface to refresh, after the countdown to the end, will invoke the OnFinish method, You can restore the view state inside.

2. layout file

View Layout Shape_verify_btn_normal.xml When you have not clicked to obtain the authentication code

 <?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:shape=" Rectangle >

  <!--fill color: Set background transparent-->
  <solid android:color= "@color/ Maincolor "/>
  <!--border color: cannot be the same as the window background color-->
  <stroke
    android:width=" 1DP "android:color="
    @ Color/white "/>
  <!--set button Four Corners arc-->
  <!--android:radius arc radius-->
  <corners android: radius= "5dip"/>

  <!--padding:button the spacing between text and button boundaries-->
  <padding
    android:bottom= "5DP "
    android:left=" 5DP "
    android:right=" 5DP "
    android:top=" 5DP "/>
</shape>

Click the view layout after obtaining the verification code 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 >

  <!--fill color: Set background transparent-->
  <solid android:color= "@color/ Graywhite "/>
  <!--border color: cannot be the same as the window background color-->
  <stroke
    android:width=" 1DP "android:color="
    @ Color/white "/>
  <!--set button Four Corners arc-->
  <!--android:radius arc radius-->
  <corners android: radius= "5dip"/>

  <!--padding:button the spacing between text and button boundaries-->
  <padding
    android:bottom= "5DP "
    android:left=" 5DP "
    android:right=" 5DP "
    android:top=" 5DP "/>
</shape>

Layout of the entire interface

<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_hei ght= "40DP" android:inputtype= "Phone" android:hint= "@string/phone_number" android:textsize= "16SP" android:t Extcolor= "@color/black" android:singleline= "true" android:background= "@drawable/shape_form" android:textcursor drawable= "@drawable/text_cursor" android:layout_marginleft= "30DP" android:layout_marginright= "30DP" Android:la yout_margintop= "30DP" android:layout_gravity= "center_vertical"/> <linearlayout android:layout_width= "MATC
    H_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= "Wra"
      P_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" Andro Id:singleline= "true" android:background= "@drawable/shape_form" android:textcursordrawable= "@drawable/text_curs or "/> <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= "@c Olor/white "android:gravity=" center "android:layout_marginleft=" 10DP "android:background=" @drawable/shap E_verify_btn_normal "/> </LinearLayout> <button android:id=" @+id/rst_next_step "Android:layout_wi" Dth= "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>

There is a problem with the layout here, because the word in the TextView will change during the countdown, and the length of each word varies, and if the layout_width is set to Wrap_content, then the length of the TextView will change. affect the appearance of the interface, so you can fix its length, and then the Verification Code input box Layout_weight set to 1, so it can be.

3, the specific use of methods

Send successfully into countdown
Countdowntimer = new Countdowntimerutils (Tv_send_code, 60000, 1000);
Countdowntimer.start ();

60000 of these represent the time of the countdown, that is, the 60s;1000 represents a decrease of 1s each time.

The above is the specific implementation process, the following attached a number of effects picture!

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.