ViewPager 实现前后自由的“无限”轮播

ViewPager 来实现广告条的无限轮播效果。为ViewPager设置适配器以及滑动监听等就可以实现我们想要的功能了。

1、重写viewPager适配器：新建一个类MyAdapter来继承PagerAdapter并重写它的getCountt()，isViewFromObject(View arg0, Object arg1)，destroyItem(ViewGroup container, int position, Object object)，instantiateItem(ViewGroup container, int position)等方法。2、viewPager设置setOnPageChangeListener()监听。3、中间插入法。

效果图如下:

XML布局如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="200dp" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_main"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="图片标题" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <View
                    android:id="@+id/r_main_1"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginTop="3dp"
                    android:background="@drawable/dot_focused" />

                <View
                    android:id="@+id/r_main_2"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginTop="3dp"
                    android:background="@drawable/dot_normal" />

                <View
                    android:id="@+id/r_main_3"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginTop="3dp"
                    android:background="@drawable/dot_normal" />

                <View
                    android:id="@+id/r_main_4"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginTop="3dp"
                    android:background="@drawable/dot_normal" />

                <View
                    android:id="@+id/r_main_5"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_marginLeft="2dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginTop="3dp"
                    android:background="@drawable/dot_normal" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

主Activity类MainActivity如下：

package com.example.android_viewpagerdemo;

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

import android.R.color;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 
 * @author yehu
 * @time 2016年1月15日下午11:40:56
 */
public class MainActivity extends Activity {

	private ViewPager vp;
	private TextView title;
	private int[] imageIds;
	private String[] titles;
	private List<ImageView> images;
	private List<View> dots;
	private int oldposition = 0;
	private int max;
	private int currenitem;
	private boolean flag = false;
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			currenitem = vp.getCurrentItem();
			currenitem = (currenitem + 1) % max;
			vp.setCurrentItem(currenitem);
			handler.removeMessages(msg.what);
			handler.sendEmptyMessageDelayed(0, 2000);
		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 获取需要操作的UI组件
		vp = (ViewPager) findViewById(R.id.vp_main);
		title = (TextView) findViewById(R.id.tv_main);
		// 图片的ID数组
		imageIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,
				R.drawable.d, R.drawable.e };
		// 图片的集合
		images = new ArrayList<ImageView>();
		for (int i = 0; i < imageIds.length; i++) {
			ImageView image = new ImageView(this);
			image.setBackgroundResource(imageIds[i]);
			images.add(image);
		}
		max = 20 * images.size();
		// 图片对应的标题
		titles = new String[] { "巩俐不低俗，我就不能低俗", "扑树又回来啦！再唱经典老歌引万人大合唱",
				"揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" };
		dots = new ArrayList<View>();
		dots.add(findViewById(R.id.r_main_1));
		dots.add(findViewById(R.id.r_main_2));
		dots.add(findViewById(R.id.r_main_3));
		dots.add(findViewById(R.id.r_main_4));
		dots.add(findViewById(R.id.r_main_5));

		title.setTextColor(Color.WHITE);
		MyAdapter adapter = new MyAdapter(this, images, max);
		vp.setAdapter(adapter);
		vp.setOnTouchListener(new View.OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {

				return false;
			}
		});
		vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {

			}

			@Override
			public void onPageSelected(int position) {
				int temp = position % images.size();
				title.setText(titles[temp]);
				dots.get(oldposition).setBackgroundResource(
						R.drawable.dot_normal);
				dots.get(temp).setBackgroundResource(R.drawable.dot_focused);
				oldposition = temp;
			}

			/**
			 * 当Page的滑动状态发生改变时调用
			 * 
			 * @see ViewPager#SCROLL_STATE_IDLE : 停止没有滑动
			 * @see ViewPager#SCROLL_STATE_DRAGGING : 开始拖动(只调用一次)
			 * @see ViewPager#SCROLL_STATE_SETTLING: 沉降:
			 *      当手指离开是Pager自动回到当前页或进下/上一页
			 */
			@Override
			public void onPageScrollStateChanged(int state) {
				// 开始拖动滑动就移除消息
				if (state == ViewPager.SCROLL_STATE_DRAGGING) {
					handler.removeMessages(0);
					vp.setTag(true);
				} else if (state == ViewPager.SCROLL_STATE_SETTLING) {
					// 是否拖动过
					Boolean isDrag = (Boolean) vp.getTag();
					if (isDrag != null && isDrag) {
						vp.setTag(false);
						handler.sendEmptyMessageDelayed(0, 3000);
					}
				}

			}
		});
		handler.sendEmptyMessageDelayed(0, 2000);
		// 设置加载中间部分
		int item = max / 2 - (max / 2) % images.size();
		// 22 ->11-->10
		// 11-11%5=11-1= 10
		Log.i("TAG", "max= " + max + ",item " + item);
		vp.setCurrentItem(item);
	}

	@Override
	protected void onDestroy() {
		super.onDestroy();
		handler.removeCallbacksAndMessages(null);
	}

}

在本类中设置了ViewPager的滑动监听和适配器。

ViewPager的适配器MyAdapter如下：

package com.example.android_viewpagerdemo;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
 * 
 * @author yehu
 * @time 2016年1月15日下午11:41:04
 */
public class MyAdapter extends PagerAdapter {
	private Context context;
	private List<ImageView> images;
	private int max;

	public MyAdapter() {
	}

	public MyAdapter(Context context, List<ImageView> images, int max) {
		this.context = context;
		this.images = images;
		this.max = max;

	}

	// 数量
	@Override
	public int getCount() {
		return max;
	}

	// 判断是否是同一个对象
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

	// 删除页
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// super.destroyItem(container, position, object);
		container.removeView((View) object);
	}

	// 加载页
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		ImageView imageView = images.get(position % images.size());
		container.addView(imageView);
		return imageView;
	}

}

其它的布局和资源见本Demo项目如下：

待上传……