Android实现自定义轮播图片控件详解

概述首先上效果图实现原理要完成一个轮播图片，首先想到的应该是使用ViewPager来实现。ViewPager已经有了滑动的功能，我们只要让它自己滚动。再加上下方的小圆点就行了。所以我们本次的自定义控件就是由ViewPager和Li

首先上效果图

实现原理

要完成一个轮播图片，首先想到的应该是使用VIEwPager来实现。VIEwPager已经有了滑动的功能，我们只要让它自己滚动。再加上下方的小圆点就行了。所以我们本次的自定义控件就是由VIEwPager和linearLayout叠加起来组成的。

一、创建一个自定义的VIEwPager

先上完整的代码

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(Context context) {  super(context); } public autoVIEwPager(Context 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 be 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(Message msg) {   super.handleMessage(msg);  } } public voID onStop(){  //先取消定时器  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 继承至VIEwPager，我们通过Timer来启动一个定时器。

public voID start(){  if (mTimer == null) {   mTimer = new Timer();  }  mTimer.schedule(new autoTask(),3000); } private Runnable runnable = new Runnable() {  @OverrIDe  public voID run() {   currentItem = getCurrentItem();   if(currentItem == getAdapter().getCount() - 1){    currentItem = 0 ;   }else {    currentItem++ ;   }   setCurrentItem(currentItem);  } };

每隔三秒去更新一下页面。这样就能起到一个自己滚动的效果。

二、设置Adapter

要实现无限循环，只要把Adapter中的getCount()方法返回无限大，直接返回Integer.MAX_VALUE就可以了。

完整的Adapter代码：

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(Context context,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(Context context,List<T> data,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 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((ImageVIEw) 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 (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,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<T> {  voID onItemClick(int position,T t); }}

这里我们使用了泛型，因为有时候我们可能只传一个url集合进来，也可能是对象集合，方便拓展。加载图片的方法也是一个抽象方法

public abstract voID loadImage(ImageVIEw vIEw,T t);

因为每个App使用的图片加载框架都不一样，所以这里的加载就留个App自己实现。使用的时候创建Adapter只要继承这里的BaseVIEwPagerAdapter，然后重写loadImage(ImageVIEw vIEw,T t)方法，在这里进行图片的加载就行了。

如果你需不要底部的小圆点标示的话，这里就已经完成了。

使用的时候，直接使用

 <com.kcode.autoscrollvIEwpager.vIEw.autoVIEwPager  androID:layout_wIDth="match_parent"  androID:layout_height="200dp">   </com.kcode.autoscrollvIEwpager.vIEw.autoVIEwPager>

代替

 <androID.support.v4.vIEw.VIEwPager  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"> </androID.support.v4.vIEw.VIEwPager>

就可以了。需要底部的小圆点标示的话，继续往下

三、添加小圆点标示

需要添加小圆点标示的话。其实就是在VIEwPager上再加一层。我们新建一个VIEw，继承至relativeLayout

完整代码如下：

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(Context context) {  super(context);  init(context); } public autoScrollVIEwPager(Context 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);   }  } }}

初始化的时候创建一个VIEwPager,一个linearLayout（用来放小圆点）

 public autoScrollVIEwPager(Context context) {  super(context);  init(context); } public autoScrollVIEwPager(Context context,attrs);  init(context); } private voID init(Context context){  mContext = context;  mVIEwPager = new autoVIEwPager(context);  layout = new linearLayout(mContext);  addVIEw(mVIEwPager); }

再通过addVIEw(mVIEwPager);添加。

需要准备两张图片，这里用Shape进行绘制,Shape的使用可以查看AndroID Shape使用.

初始化小圆点：

 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);  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);   }  } }

带小圆点的使用以下控件

 <com.kcode.autoscrollvIEwpager.vIEw.autoScrollVIEwPager  androID:ID="@+ID/vIEwPager"  androID:layout_wIDth="match_parent"  androID:layout_height="220dp"> </com.kcode.autoscrollvIEwpager.vIEw.autoScrollVIEwPager>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

总结

以上是内存溢出为你收集整理的Android实现自定义轮播图片控件详解全部内容，希望文章能够帮你解决Android实现自定义轮播图片控件详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。