android uses Rxjava to realize countdown function

  • 2021-09-12 02:14:48
  • OfStack

When we develop, we often encounter the scene of using countdown. In the past, we used thread+handler to realize it, but after the powerful Rxjava was born, it made this 1 cut simple. We can directly use the transmitter to send out one time every 1S in the sub-thread, receive and update ui in the main thread, and restore the interface after waiting for the countdown to end. The code demo used in the countdown to obtain the verification code when the user registers is given below. The specific calling method is as follows:


 /**
 *  Click to get the verification code, 10S Countdown, use Rxjava Perform thread switching 
 * @param view
 */
 public void getSureCode(View view) {
 Observable.create(new ObservableOnSubscribe<Integer>() {
  @Override
  public void subscribe(ObservableEmitter<Integer> emitter) throws Exception {
  int i = 10;
  while (i >= 0) {
   try {
   Thread.sleep(1000);
   emitter.onNext(i);
   } catch (InterruptedException e) {
   e.printStackTrace();
   }
   i--;
  }
  emitter.onComplete();
  }
 }).subscribeOn(Schedulers.io())//  This method sets the thread to the IO Thread 
  .observeOn(AndroidSchedulers.mainThread())//  Sets the thread to the UI Thread 
  .subscribe(new Consumer<Integer>() {
   @Override
   public void accept(Integer integer) throws Exception {
   bindingView.countDownTv.setClickable(integer > 0 ? false : true);
   bindingView.countDownTv.setBackground(integer > 0 ? getResources().getDrawable(R.drawable.rectangle_gray_bg) : getResources().getDrawable(R.drawable.rectangle_red_bg));
   if(integer > 0) {
    String content = integer + " Second to resend ";
    SpannableString span = new SpannableString(content);
    int index = content.indexOf(" Posterior ");
    span.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorTheme)), 0, index, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); // Set the foreground color to red 
    bindingView.countDownTv.setText(span);
   } else {
    bindingView.countDownTv.setText(getString(R.string.get_check_code));
   }
   }
  });
 }

The following is the layout file. There is only one TextView control in the layout. Here, dataBinding is used to bind the control:


<layout xmlns:android="http://schemas.android.com/apk/res/android">

 <LinearLayout xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.smilexie.countdownwithrxjava.MainActivity">

 <TextView
  android:id="@+id/count_down_tv"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_margin="10dp"
  android:gravity="center"
  android:layout_gravity="center_vertical"
  android:padding="8dp"
  android:background="@drawable/rectangle_red_bg"
  android:text="@string/get_check_code"
  android:textSize="14sp"
  android:textColor="@color/white"
  android:onClick="getSureCode"/>

 </LinearLayout>
</layout>


Here, two drawable are defined to change the background of countdown, and clicking on the control is not allowed during countdown:
rectangle_gray_bg. xml file


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <!--  Fill color  -->
 <solid android:color="@color/colorLineItem"></solid>
 <!--  Width of line, color gray  -->
 <stroke android:width="1dp" android:color="@color/colorLineItem"></stroke>
 <!--  Fillet radius of rectangle  -->
 <corners android:radius="5dp" />
</shape>

rectangle_gray_bg.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <!--  Fill color  -->
 <solid android:color="@color/colorTheme"></solid>
 <!--  Width of line, color gray  -->
 <stroke android:width="1dp" android:color="@color/colorTheme"></stroke>
 <!--  Fillet radius of rectangle  -->
 <corners android:radius="5dp" />
</shape>

Two color values:


<color name="colorLineItem">#FFDDDDDD</color>
<color name="colorTheme">#f64a33</color>

Related articles: