Android Client Implements Picture Roadcasting Control

This article and you 1 write an Android picture rotation control for your reference, the specific content is as follows

1. Components of the Roadcast Control

Taking the round-robin control of the Android client of the daily newspaper as an example, we analyze the main components of the next round-robin control:

First, we need an View object to display the picture. From the five points in the bottom center of the image above, we know that we need five ImageViews to display the picture that needs to be rotated, and five ImageViews to display five points.Now consider what the following rotation components should do. First, you need to switch to the next picture at regular intervals, and the effect of switching between pictures should be smooth, just like "flip" 1.So we can think of five pictures as Page of ViewPager, which will naturally have a smooth effect when switching pictures.Next, we'll find a parent container for the bottom five dots, which are linearly arranged, so LinearLayout is a good choice.Next, we'll put ViewPager and LinearLayout, which hold five points, in a parent container, where we choose to use LinearLayout, which arranges children View vertically.

So 1, we get the layout file for the round-robin control (carousel_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

  <android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <LinearLayout
    android:id="@+id/dots"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="8dp" >
  </LinearLayout>
  
</LinearLayout>

By analyzing the components of the round-robin control, we have determined what "data structure" is used to represent a round-robin component. Next, what we need to do is to implement the algorithm of the round-robin component, that is, business logic.

2. Behavior analysis of the relay component

The first behavior of a round-robin control is to automatically play, that is, to automatically "turn to the next page" every 1 certain event interval (usually 3 to 5 seconds).To achieve this, we can maintain an currentItem variable to record the currently displayed picture, set a timer task, call ViewPager's setCurrentItem method to set the current picture to be displayed, and set currentItem to the next picture to be displayed.One thing to note is that when the last picture is played, the next one should be displayed as the first one, and the switching effect is no longer smooth.

The rotation control also responds to our sliding action, which means we can switch between different pictures by sliding left and right, which ViewPager automatically provides for us.Another round-robin control should behave as follows: when switching to the specified picture, the corresponding dot should be displayed in a different color from the other four dots so that the user can know which picture is currently playing.To accomplish this, you only need to add an OnPageChangeListener listener to ViewPager and then override the corresponding callback method, so that when the user selects an Page, the onPageSelected method will be callback, and the system will pass in the current Page index, and we can set the corresponding dot color based on this index.

3. Implementation of Round-robin Control

After the above analysis, we have a clear understanding of the representation and business logic of the round-robin components, and then we can do it as long as we use Java to describe them.

(1) Timing tasks
We need to perform the task of "Changing ViewPager's current Page to the next Page" on a regular basis. Here we use Handler to implement it, code as follows:

mHandler.postDelayed(task, DELAY);
  private final Runnable task = new Runnable() {
    @Override
    public void run() {
      if (isAutoPlay) {
        currentItem = (currentItem + 1) % (mTopStories.size());
        mVP.setCurrentItem(currentItem);
        mHandler.postDelayed(task, DELAY);
      } else {
        mHandler.postDelayed(task, DELAY);
      }
    }
  };

In the code above, DELAY represents a delay constant (in units ms) that we set.Since what we need is loop playback, we should show the first one after the fifth one is displayed, so we want to do a modular operation like line 6 so that the currentItem keeps changing from 0 to 4.Note that line 5 has an isAutoPlay variable that indicates whether autoplay should be performed at this time.So when should it not play automatically?We know that when we slide our finger to switch pictures, the pictures "follow" our hand, just like when we turn a page, the pages of the handbook can only fall if they are released.So when we are "dragging" the picture, that is, before our hands are released, the rotation control should not play automatically.To do this, we only need to override the onPageScrollStateChanged method in OnPageChangeListener, setting the isAutoPlay variable to false when the current state is Drag.From line 10, we know that when autoPlay is false, the currently displayed picture will not be changed, only the next timed task will be performed after the time specified by DELAY.

(2) OnPageChangeListener
We mentioned above that we want to add an OnPageChangeListener listener object to ViewPager to change the color of small dots and assign the autoPlay variable.See the following code for the specific implementation. The meaning of the code is straightforward:

class TopOnPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      for (int i = 0; i < mDotsIV.size(); i++) {
        if (i == position) {
          mDotsIV.get(i).setImageResource(R.drawable.dot_focus);
        } else {
          mDotsIV.get(i).setImageResource(R.drawable.dot_blur);
        }
      }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
      switch (state) {
        //SCROLL_STATE_DRAGGING
        case 1:
          isAutoPlay = false;
          break;
        //SCROLL_STATE_SETTLING
        case 2:
          isAutoPlay = true;
          break;
        default:
          break;
      }
    }
  }

In lines 10 to 16 of the above code, we override the onPageSelected method, where the position parameter represents the current Page index.In this method, we set the dot image corresponding to the current picture to dot_focus, set the picture of the other dots to dot_blur, so users can know the current location.From lines 21 to 32, we override the onPageScrollStateChanged method, where the state parameter represents the current "scrolling state" and the value of 1 indicates that the current user is in the process of dragging, so set isAutoPlay to false;A value of 2 indicates that the user has let go and the picture is scrolling, so we need to set isAutoPlay back to the default value of true to restore autoplay.

(3) One step further
Sometimes we want to be able to "flip" directly from the last page to page 1, which is not supported by PagerView by default. To achieve this behavior, we can add a "secondary page" to PagerView and rewrite the relevant methods in OnPageChangeLisener.However, in many scenarios, we just need to keep PagerView's default behavior, and be aware that adding any functionality will take into account the scenario and avoid adding to it.

This is the whole content of this article, and I hope it will be helpful for everyone to learn.