Android implementation of custom Carousel picture control detailed _android

First, the effect chart

Implementation principle

To complete a carousel picture, the first thought should be ViewPager to use to achieve. ViewPagerThere's already a sliding function, we just let it roll itself. Plus the small dots below. So our custom controls are made up ViewPager LinearLayout of and stacked together.

First, 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 pager =
   (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

  msg) {super.handlemessage (msg);
   } public void OnStop () {///First cancels the 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.

Second, set up adapter

To achieve an infinite loop, just return the method in the adapter to getCount() Infinity and return directly Integer.MAX_VALUE .

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) {Container.removeview ((ImageView) object); @Override public Object Instantiateitem (ViewGroup container, final int position) {ImageView view = (ImageView) Lay
  Outinflater.from (Mcontext). Inflate (R.layout.imageview,container,false); View.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {if listener!=
    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% GetrealcounT ()); @Override public void onpagescrollstatechanged (int state) {} public interface ONAUTOVIEWPAGERITEMCLICKLISTENER&L T
 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. Use to create adapter as long as you inherit here BaseViewPagerAdapter , and then rewrite the loadImage(ImageView view,int position,T t) method, where the picture is loaded on the line.

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

Third, 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_
  CONTENT);
  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 one ViewPager , one 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 by addView(mViewPager); adding.

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>

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.