Android Client Implementation Picture Carousel control _android

This article and everyone to write an Android image Carousel control, for your reference, the specific contents are as follows

1. Components of a Carousel control

We analyze the main components of a carousel control as an example of a carousel control that knows the daily Android client:

First we need to have a view object to display the picture, according to the 5 points in the bottom center of the figure above, we know that we need 5 ImageView to display the picture that needs to be carousel, and 5 ImageView to display 5 points. Now consider the behavior of the following carousel components, first need to switch to the next picture at a certain interval, and the effect of the switch between the pictures should be smooth, like "turn the book" the same. From this we can think of 5 pictures as Viewpager page, so the picture will naturally have a smooth effect of switching. Next, we're going to find a parent container for the 5 small dots at the bottom, so it's more appropriate to use linearlayout because they're linear. Then we have to put the Viewpager and the 5-point linearlayout into a parent container, where we choose to use the linearlayout of the vertically arranged child view.

So we get the layout file for the Carousel 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:o" rientation= "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 a carousel control, we have identified what "data structure" is used to represent a carousel component, then what we do next is implement the "algorithm" of the carousel component, which is the business logic.

2. Behavior analysis of the Carousel component

The first thing a carousel control has to do is play it automatically, that is, every interval (usually 3-5 seconds) of the event, automatically "turn to the next page." To do this, we can maintain a CurrentItem variable to record the currently displayed picture, then set a timed task, call Viewpager's Setcurrentitem method to set the current picture to be displayed, and set the CurrentItem to the next picture to display. One thing we should be aware of is that when you play to the last picture, the next one should be the first picture, and the effect of the switch is no longer smooth.

The carousel control should also be able to respond to our sliding motion, which means that we can toggle between the different pictures by sliding the left and right, and this behavior Viewpager for us automatically. Another thing that a carousel control should have is that when you switch to a specified picture, the corresponding dot should be displayed in a different color from the other 4 dots so that the user can know what the first few pictures are currently playing. It's not complicated to do that by simply adding a onpagechangelistener listener to the Viewpager and then overriding the corresponding callback method, so that when a user selects a page, the Onpageselected method is recalled. The system passes in the index of the current page, and we can set the corresponding dot color according to the index.

3. The specific implementation of the Carousel control

Through the above analysis, we have a clear understanding of the carousel component representation and business logic, and then as long as we use Java to describe these are done.

(1) Timed task
We need to perform the "Change Viewpager current page for the next page" task on a regular basis, where we use handler to implement the 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 above code, delay represents a delay constant (unit ms) that we set. Because we need to loop, so the 5th display should show the first one, so we want to do a modulo on line 6th, so that the currentitem in between 0 to 4 constantly change. Note that line 5th has a Isautoplay variable that indicates whether the current should be played automatically. So when should it not be played automatically? We know that when we slide our fingers over the picture, the picture will "follow" our hands, just like when we flip the page, it's only when we release the handwritten pages. So we are "dragging" the picture, that is, when our hands are not released, the carousel control should not be played automatically. To do this, we simply rewrite the onpagescrollstatechanged method in Onpagechangelistener and set the Isautoplay variable to false when the current state is "dragged". From line 10th we can see that when AutoPlay is false, the currently displayed picture is not changed, and the next scheduled task will be performed only after the time specified by delay.

(2) Onpagechangelistener
    above we mentioned that to add a Onpagechangelistener listener object to Viewpager, To achieve a small dot color change and autoplay variable assignment. The actual implementation see the following code, the meaning of the code is very 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) {//scro}}}
          Ll_state_dragging case 1:isautoplay = false;
        Break
          scroll_state_settling case 2:isautoplay = true;
        Break
      Default:break; }
    }
  }

In line 10th to 16th of the above code, we rewrote the Onpageselected method, and the position parameter represents the index of the current page. In this method, we set the current picture corresponding to the dot picture for Dot_focus, set the other dot picture as Dot_blur, so that users can know the current position. On line 21st through 32, we rewrite the Onpagescrollstatechanged method, which represents the current scroll state, which is 1 to indicate that the current user is dragging, so set Isautoplay to False This value of 2 indicates that the user has loosened the hand and the picture is "scrolling", at which point we will set the Isautoplay back to the default value True and resume AutoPlay.

(3) further
Sometimes we want to be able to "flip" to the first page directly from the last page, and this behavior is not supported by Pagerview, and to implement this behavior, we can add some "secondary pages" to the Pagerview and rewrite the related methods in Onpagechangelisener. However, in many scenarios we only need to keep the default behavior of Pagerview, we should pay attention to add any function to consider the application scene, to avoid the superfluous.

The above is the entire content of this article, I hope to help you learn.