Android Implementation Custom Carousel Picture Control Sample _android

To complete a carousel picture, the first thought should be to use Viewpager to achieve. Viewpager already has a sliding function, we just let it roll itself. Plus the small dots below. So our custom control is made up of Viewpager and LinearLayout.

Direct above effect chart:

Create a custom Viewpager

First, complete code.

Package Com.kcode.autoscrollviewpager.view;
Import Android.content.Context;
Import Android.os.Message;
Import Android.support.v4.view.ViewPager;
Import Android.util.AttributeSet;
Import Android.util.Log;

Import android.view.MotionEvent;
Import Java.util.Timer;

Import Java.util.TimerTask;
 /** * Created by Caik on 2016/10/10.

  * * public class Autoviewpager extends Viewpager {private static final String TAG = "Autoviewpager";

  private int CurrentItem;
  Private Timer Mtimer;

  Private Autotask Mtask;

  Private Boolean Isfirst = true;
  Public Autoviewpager {Super (context);
  Public Autoviewpager (context, AttributeSet attrs) {Super (context, attrs);
    public void Start () {if (Mtimer = = null) {Mtimer = new Timer ();

  } mtimer.schedule (New Autotask (), 3000,3000); Private Runnable Runnable = new Runnable () {@Override public void run () {CurrentItem = Getcurrentitem
      (); if (CurrentItem = = GetAdapter (). GetCount ()-1) {CurrentItem = 0;
      }else {currentitem++;
    } setcurrentitem (CurrentItem);

  }
  };

  Private Autohandler Mhandler = new Autohandler (); public void Updatepointview (int size) {if (GetParent () instanceof Autoscrollviewpager) {Autoscrollviewpager pag
      ER = (autoscrollviewpager) getparent ();
    Pager.initpointview (size);
    }else {log.e (TAG, "Parent view not being Autoscrollviewpager");
    } public void onpageselected (int position) {Autoscrollviewpager pager = (Autoscrollviewpager) getparent ();
  Pager.updatepointview (position);
    Private class Autotask extends timertask{@Override public void Run () {mhandler.post (runnable); } private final static class Autohandler extends android.os.handler{@Override public void Handlemessage (Me

    Ssage msg) {super.handlemessage (msg); } public void OnStop () {///First Cancel timer if (Mtimer!= null) {MTImer.cancel ();
    Mtimer = null;
  } public void OnDestroy () {onStop ();
  public void Onresume () {start (); @Override public boolean ontouchevent (motionevent ev) {switch (ev.getaction ()) {case Motionevent.action_
        DOWN:LOG.I (TAG, "down");
        OnStop ();
      Break
        Case MOTIONEVENT.ACTION_MOVE:LOG.I (TAG, "move");
      Break
        Case MOTIONEVENT.ACTION_UP:LOG.I (TAG, "up");
        Onresume ();
    Break
  return super.ontouchevent (EV);

 }
}

Autoviewpager inherits to Viewpager, we start a timer with a timer.

public void Start () {
    if (Mtimer = = null) {
      Mtimer = new Timer ();
    }
    Mtimer.schedule (New Autotask (), 3000,3000);

  }

  Private Runnable Runnable = new Runnable () {
    @Override public
    void Run () {
      CurrentItem = Getcurrentitem (); 
   if (CurrentItem = = Getadapter (). GetCount ()-1) {
        CurrentItem = 0;
      } else {
        currentitem++;
      }
      Setcurrentitem (CurrentItem);
    }
  ;

Update the page every three seconds. This will make a rolling effect of their own.

Set Adapter

To achieve an infinite loop, simply return the GetCount () method in the adapter to the Integer.max_value directly.

Complete Adapter Code:

Package Com.kcode.autoscrollviewpager.view;
Import Android.content.Context;
Import Android.support.v4.view.PagerAdapter;
Import Android.support.v4.view.ViewPager;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.view.ViewGroup;

Import Android.widget.ImageView;

Import COM.KCODE.AUTOSCROLLVIEWPAGER.R;
Import java.util.ArrayList;

Import java.util.List;
 /** * Created by Caik on 2016/10/11.

  * Public abstract class Baseviewpageradapter<t> extends Pageradapter implements viewpager.onpagechangelistener{

  Private list<t> data = new arraylist<> ();
  Private context Mcontext;

  Private Autoviewpager Mview;

  Private Onautoviewpageritemclicklistener listener;
  Public Baseviewpageradapter (List<t> t) {this.data = t;
    Public Baseviewpageradapter, Autoviewpager viewpager {this.mcontext = context;
    Mview = Viewpager;
    Mview.setadapter (this);
    Mview.addonpagechangelistener (this); Mview.setcurRentitem (0);
    Public Baseviewpageradapter (context context, Autoviewpager Viewpager,onautoviewpageritemclicklistener listener) {
    This.mcontext = context;
    Mview = Viewpager;
    This.listener = listener;
    Mview.setadapter (this);
    Mview.addonpagechangelistener (this);
  Mview.setcurrentitem (0); Public Baseviewpageradapter, list<t> Data,autoviewpager Viewpager,
    Onautoviewpageritemclicklistener listener) {This.mcontext = context;
    Mview = Viewpager;
    This.data = data;
    This.listener = listener;
    Mview.setadapter (this);
    Mview.addonpagechangelistener (this);

    Mview.setcurrentitem (0);
    Mview.start ();
  Mview.updatepointview (Getrealcount ());
    public void Add (t) {Data.add (t);
    Notifydatasetchanged ();
  Mview.updatepointview (Getrealcount ());
  @Override public int GetCount () {return data = null 0:integer.max_value; public int Getrealcount () {return data = null? 0:data.siZe (); @Override public void Destroyitem (ViewGroup container, int position, object object) {Container.removeview (Ima
  Geview) object);  @Override public Object Instantiateitem (ViewGroup container, final int position) {ImageView view = (ImageView)
    Layoutinflater.from (Mcontext). Inflate (R.layout.imageview,container,false); View.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {if (Li
        Stener!= null) {Listener.onitemclick (position% getrealcount (), data.get (position% Getrealcount ()));

    }
      }
    });
    LoadImage (View,position, data.get (position% Getrealcount ()));

    Container.addview (view);
  return view;

  public abstract void LoadImage (ImageView view,int position,t T);
  @Override public boolean isviewfromobject (view view, Object object) {return view = = object; @Override public void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) {} @Override public void onpageselected (int position) {mview.onpageselected (position% get
  Realcount ()); @Override public void onpagescrollstatechanged (int state) {} public interface Onautoviewpageritemclicklisten
  er<t> {void Onitemclick (int position,t T);

 }
}

Here we use generics, because sometimes we can just pass a URL to the collection, or it may be a collection of objects to facilitate expansion. The method of loading a picture is also an abstract method

public abstract void LoadImage (ImageView view,int position,t T);

Because each app uses a different picture-loading frame, the load here is implemented by the app itself. When used, create adapter just inherit the baseviewpageradapter here and rewrite the LoadImage (imageview view,int position,t T) method, where you can load the picture.

If you need a small dot at the bottom, it's done here. When used, direct use

  <com.kcode.autoscrollviewpager.view.autoviewpager
    android:layout_width= "Match_parent"
    android: layout_height= "200DP" >
    
  </com.kcode.autoscrollviewpager.view.AutoViewPager>

Replace

  <android.support.v4.view.viewpager
    android:layout_width= "match_parent"
    android:layout_height= "match _parent ">

  </android.support.v4.view.ViewPager>

It's OK. Need a small dot at the bottom to mark the words, continue down

Add Small dot Mark

You need to add a dot marker. In fact, it is to add another layer on the Viewpager. We create a new view that inherits to Relativelayout

The complete code is as follows:

Package Com.kcode.autoscrollviewpager.view;
Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.view.ViewGroup;
Import Android.widget.ImageView;
Import Android.widget.LinearLayout;

Import Android.widget.RelativeLayout;

Import COM.KCODE.AUTOSCROLLVIEWPAGER.R;

Import static Android.view.Gravity.CENTER;
 /** * Created by Caik on 2016/10/17.

  * * public class Autoscrollviewpager extends relativelayout{private Autoviewpager Mviewpager;

  Private context Mcontext;

  Private LinearLayout layout;
    Public Autoscrollviewpager {Super (context);
  Init (context);
    Public Autoscrollviewpager (context, AttributeSet attrs) {Super (context, attrs);
  Init (context);
    private void init (context context) {Mcontext = context;
    Mviewpager = new Autoviewpager (context);
    Layout = new LinearLayout (mcontext);
  AddView (Mviewpager);
  Public Autoviewpager Getviewpager () {return mviewpager; } public void Initpointview (int size) {layout = new LinearLayout (mcontext);
      for (int i = 0; i < size; i++) {ImageView ImageView = new ImageView (mcontext);
      Linearlayout.layoutparams params = new Linearlayout.layoutparams (20,20);
      Params.leftmargin = 8;
      params.gravity = CENTER;
      Imageview.setlayoutparams (params);
      if (i = = 0) {imageview.setbackgroundresource (r.drawable.point_checked);
      }else {imageview.setbackgroundresource (r.drawable.point_normal);
    } layout.addview (ImageView); } layoutparams layoutparams = new Layoutparams (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONT
    ENT);
    Layoutparams.addrule (Align_parent_bottom);
    Layoutparams.addrule (Align_parent_right);
    Layoutparams.setmargins (12,20,12,20);
    Layout.setlayoutparams (Layoutparams);
  AddView (layout);
    public void Updatepointview (int position) {int size = Layout.getchildcount (); for (int i = 0; i < Size
      i++) {ImageView ImageView = (imageview) layout.getchildat (i);
      if (i = = position) {Imageview.setbackgroundresource (r.drawable.point_checked);
      }else {imageview.setbackgroundresource (r.drawable.point_normal);

 }

    }
  }

}

When initializing, create a Viewpager, a linearlayout (to place dots)

 Public Autoscrollviewpager {
    super (context);
    Init (context);
  }

  Public Autoscrollviewpager (context, AttributeSet attrs) {
    Super (context, attrs);
    Init (context);
  }

  private void init (context context) {
    Mcontext = context;
    Mviewpager = new Autoviewpager (context);
    Layout = new LinearLayout (mcontext);
    AddView (Mviewpager);
  }

Again through AddView (Mviewpager);

Two pictures need to be prepared, drawn with shape, and shape can be used to view the Android shape.

Initialize Small dots:

 public void Initpointview (int size) {

    layout = new LinearLayout (mcontext);
    for (int i = 0; i < size; i++) {
      ImageView ImageView = new ImageView (mcontext);
      Linearlayout.layoutparams params = new Linearlayout.layoutparams (20,20);
      Params.leftmargin = 8;
      params.gravity = CENTER;
      Imageview.setlayoutparams (params);
      if (i = = 0) {
        imageview.setbackgroundresource (r.drawable.point_checked);
      } else {
        imageview.setbackgroundresource (r.drawable.point_normal);
      }

      Layout.addview (ImageView);
    }

    Layoutparams layoutparams = new Layoutparams (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_ CONTENT);
    Layoutparams.addrule (align_parent_bottom);
    Layoutparams.addrule (align_parent_right);
    Layoutparams.setmargins (12,20,12,20);
    Layout.setlayoutparams (layoutparams);
    AddView (layout);
  }

To update small dots:

 public void Updatepointview (int position) {
    int size = Layout.getchildcount ();
    for (int i = 0; i < size; i++) {
      ImageView ImageView = (imageview) layout.getchildat (i);
      if (i = = position) {
        imageview.setbackgroundresource (r.drawable.point_checked);
      } else {
        imageview.setbackgroundresource (r.drawable.point_normal);}}}
  

Use the following controls with Dots

<com.kcode.autoscrollviewpager.view.autoscrollviewpager
    android:id= "@+id/viewpager"
    android: Layout_width= "Match_parent"
    android:layout_height= "220DP" >

  </ Com.kcode.autoscrollviewpager.view.autoscrollviewpager>

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.