无限循环的轮播图ViewPager实现

无限循环的ViewPager实现原理

    实现无限循环的轮播图的原理是：在需要显示的图片的集合的首尾各添加一张图片。因此最后的ViewPager集合展示的图片的数量会比实际的图片多两张，这两张是为了方便切换来实现无限循环的效果的。

   首先，说明一下两个集合，imageIds数组存放的是实际要展示的图片的资源id，imageViewList集合存放的是ViewPager要展示的图片集合。在imaggViewList首尾添加一张图片后，imageViewList.size()=imageIds.length+2;

   imageViewList集合首部添加的图片是imageIds中最后一张图片，也就是说imagViewList集合首部的图片和imageViewList倒数第二张图片是一张图片。imageViewList集合尾部添加的图片是imageIds的第一张图片，也就是说imageViewList集合最后一张图片和imageViewList第二张图片是一张图片。

   下面之间看一张图来理解整个过程：

   注：下面的图解是以当前imageIds中有三个元素来进行讲解的。下标为0,1,2.

接下来直接上代码：

package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	private ViewPager viewPager;
	private LinearLayout llPointGroup;
	//图片资源
	private final int[] imageIds = { R.drawable.a, R.drawable.b};
	private List<ImageView> imageViewList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
	}

	private void init() {
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		llPointGroup = (LinearLayout) findViewById(R.id.ll_point);
		
		initImageViewList();
		initPointList();
		
		viewPager.setAdapter(new MyPagerAdapter());
		viewPager.setCurrentItem(1);//默认是第一个图片。也就是viewpager中下标为1的位置。不是为0的位置。
		
		setListener();
		MyHandler mHandler = new MyHandler();
		mHandler.sendEmptyMessageDelayed(88,3 * 1000);
	}

	private class MyHandler extends Handler{
		@Override
		public void handleMessage(Message msg) {
			super.handleMessage(msg);
			viewPager.setCurrentItem(viewPager.getCurrentItem() + 1 , true);
			sendEmptyMessageDelayed(88,3 * 1000);
		}
	}
	
	private void initImageViewList() {
		imageViewList = new ArrayList<ImageView>();
		//集合头部添加一个ImageView。这个ImageView和真实的最后一个图片是一样的。
		ImageView ivFirst = new ImageView(this);
		ivFirst.setImageResource(imageIds[imageIds.length - 1]);
		imageViewList.add(ivFirst);
		for (int i = 0; i < imageIds.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setImageResource(imageIds[i]);
			imageViewList.add(imageView);
		}
		//集合尾部添加一个。这个和真实的第一个图片是一样的。
		ImageView ivLast = new ImageView(this);
		ivLast.setImageResource(imageIds[0]);
		imageViewList.add(ivLast);
	}
	
	private void initPointList() {
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
				LinearLayout.LayoutParams.WRAP_CONTENT, 
				LinearLayout.LayoutParams.WRAP_CONTENT);
		params.leftMargin = 20;
		//初始化原点集合。原点的个数和imageIds的大小是一致的。imageViewList的大小比imageIds多两个。为了实现无限循环
		for (int i = 0; i < imageIds.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setImageResource(R.drawable.point_bg);
			llPointGroup.addView(imageView, params);
			
			//默认选中第一个
			if(i == 0){
				imageView.setEnabled(true);
			}else{
				imageView.setEnabled(false);
			}
		}
	}

	private int lastPosiontion = 1;//上一个位置的下标。默认为1.因为viewpager默认会移动下标为1的位置。
	private void setListener() {
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				//切换指示点
				int realLastPosition = getRealIndexFromDataList(lastPosiontion);
				int realCurPosition = getRealIndexFromDataList(position);
				if(realCurPosition != realLastPosition){
					//当两次切换的真实下标不一样时才切换指示点
					View lastView = llPointGroup.getChildAt(realLastPosition);
					View curView = llPointGroup.getChildAt(realCurPosition);
					if(lastView != null){
						lastView.setEnabled(false);//上一个点不在选择
					}
					if(curView != null){
						curView.setEnabled(true);//当前点选中
					}
					lastPosiontion = position;
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {}
			@Override
			public void onPageScrollStateChanged(int state) {
				if(state == ViewPager.SCROLL_STATE_IDLE){
					//当前显示在Viewpager中的位置
					int curPosiontion = viewPager.getCurrentItem();
					if(curPosiontion == 0){
						//第一张图片是另加的
						//第一个图片和倒数第二个图片是一样的。切换是不带移动的效果。实现左移无限循环
						viewPager.setCurrentItem(imageViewList.size() - 2,false);
					}
					if(curPosiontion == imageViewList.size() - 1){
						//最后一张图片也是多加的
						//最后一个图片和第二个图片是一样的。切换是不带移动的效果。实现右移无限循环
						viewPager.setCurrentItem(1,false);
					}
				}
			}
		});
	}
	
	
	/**
	 * 根据当前index获取实际在数据集合中的位置下标
	 * @param position	在图片集合imageList中的位置
	 * @return 实际在imageIds中的位置
	 */
	private int getRealIndexFromDataList(int position){
		int realPosition = position - 1;
		int count = imageViewList.size();
		if(realPosition < 0){
			realPosition += count;
		}else if(realPosition >= count){
			realPosition -= count;
		}
		return realPosition;
	}
	
	
	/**
	 * 这里实际是三张图。ImageViewList中首尾各添加了一个图片。
	 * 展示的其实是五张图片。只不过首尾的图片和中间的图片是有重复的。
	 * 这样做是为了实现无限循环。
	 */
	private class MyPagerAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return imageViewList == null ? 0 : imageViewList.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object obj) {
			return view == obj;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(imageViewList.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			View view = imageViewList.get(position);
			container.addView(view);
			return view;
		}
	}

}
需要直接下载源码的可以点击下边的链接免费下载：

点击下载源码