Android uses countdowntimer to realize the countdown effect of verification code

preface

Waiting is always anxious and boring, especially when there is no progress. Therefore, in order to prevent users from waiting, we generally design a progress bar or countdown timer to visualize the progress and tell users "better after waiting". You can see this design when you register or log in to the app using the SMS verification code: after clicking the "send verification code" button, the countdown (usually 60 seconds) will appear on the button. After the countdown, the text of the button will become "resend".

To achieve this effect in Android, you can use handler to send messages, but there is also an encapsulated abstract class that can help, that is countdowntimer. With it, we can easily realize the countdown. I used this class a long time ago, but I found a hole I didn't notice when writing these days, so I plan to write a blog to record it.

1. Demand analysis

Take a look at the renderings:

2. Project creation and layout authoring

Needless to say, since we only need to see the countdown effect on the button and do not need to enter the mobile phone number, we can simply place a button on the interface:

3. How to use countdowntimer

Countdowntimer is not difficult to use. We can create a class to inherit it, implement its constructor and override two methods:

The general framework is described above. Let me explain it a little. The first is the constructor, which has two parameters:

For example, if I want to set a 10 second countdown and read it every 1 second, then the initialization can pass the value into:

In addition to the constructor, there are two methods, which are used as follows:

So how to start the countdown? Just use counttimer to call the start method. In addition, in order to save resources, the countdown should be stopped when the activity is destroyed:

Here, you should know how to use countdowntimer? If you have any questions, you can download the complete code at the end of the article.

4. Achieve a simple countdown effect

Now let's realize the effect of countdown reading after clicking the button. The code is as follows:

The countdown reading is real-time. There is no doubt that these logic should be processed in the ontick method. After the countdown is completed, the button text should be changed to "resend", which can be handed over to onfinish.

Run it, click the button, and the countdown appears successfully, but after a few more times, strange things happen: sometimes the countdown reading will miss a number, such as from 10 to 8. The printed log is as follows:

What the hell is going on? Is the missing second renewed by someone?

5. Countdowntimer error resolution

In order to retrieve this second in my life, I discussed it with my partners in a technology group for a long time, and finally escaped the claw of the black hole of time.

The countdown reading we use is obtained by dividing millisuntilfinished by 1000. Here is a small trap: millisuntilfinished is a long integer variable, and the integer part is obtained after dividing by 1000. We can print out the value of millisuntilfinished:

Now understand why you can't see reading 9? That's because although the program execution is fast, it takes time no matter how fast. Therefore, when the countdown from 10 seconds to 9 seconds, millisuntilfinished will be slightly smaller than 9000, which is 8999, and the long integer 8999 will get 8 after dividing by 1000. Of course, since it is an error, there are many situations. The missing number is not necessarily 9. Here is just for the situation I encountered.

It's easy to do after knowing the reason. We can convert millisuntilfinished to double type and divide it by 1000, so that we can keep the decimal part, and then use the round method in math class to round, but the countdown will be from 10 to 2, which is obviously not OK, so subtract 1 to make it from 9 to 1. The modified ontick method code is as follows:

Try after running, you can find that the lost second is back.

6. Set the foreground color for the countdown readings and units

To set different font colors for different characters in the same string, you need to use the knowledge related to spannablestring and spannablestrinbuilder. Limited to space, it will not be repeated here. You can refer to this article: spannablestring and spannablestrinbuilder. Here is a brief introduction:

6.1 splicing string

6.2 setting the text style to be displayed

After this run, you can see the same effect as the effect drawing. Finally, give me the source code: countdowntimerdemo

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.