ViewPager带小圆点的自动轮播

实现ViewPager自动无限轮播,如下效果图;请求网络上的数个图片地址使用xutils显示图片;

1 首先需要绘制小圆点,小圆点最后需要使用ImageView控件进行显示,ImageView控件根据图片的数量自动创建;并且同一张ImageView需要根据场景显示不同的资源;所以创建图片资源文件目录如下;

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="8dp" />

    <solid android:color="#fff" >
    </solid>

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="8dp" />

    <solid android:color="#000" >
    </solid>
</shape>

2 图片轮播布局

 <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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

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

    <LinearLayout
        android:id="@+id/ll_dot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
		android:layout_alignBottom="@id/vp"        
        
        >
    </LinearLayout>

</RelativeLayout>

3.1 需要根据图片地址个数,创建对应个数的小圆点

 private void initdot() {
		for (int i = 0; i < urls.length; i++) {
			ImageView img = new ImageView(this); // 现在空
			if (i == 0) {
				img.setImageResource(R.drawable.dot_focus);
			} else {
				img.setImageResource(R.drawable.dot_normal);
			}
			LayoutParams params = new LayoutParams(20, 20);
			/**
			 * 
			 */
			params.setMargins(5, 0, 5, 5);
			
			// 加载到布局容器
			ll_dot.addView(img, params);
			dots.add(img);
		}

	}

3.2 因为需要延时显示图片,所以需要使用Handler进行每2秒自动播放图片

	Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case 1:
				int po = vp.getCurrentItem();
				vp.setCurrentItem(++po);
				// 发送延迟消息
				this.sendEmptyMessageDelayed(1, 2000);
				break;
			default:
				break;
			}
		};
	};
 

3.3 使用ViewPager进行轮播图片

	String[] urls = BbImages.imgs;
	// 记录小圆点个数的容器
	List<ImageView> dots = new ArrayList<ImageView>();
	private ViewPager vp;
	private LinearLayout ll_dot;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		vp = (ViewPager) findViewById(R.id.vp);
		ll_dot = (LinearLayout) findViewById(R.id.ll_dot);
		initdot();
		vp.setAdapter(new VPAdapter(urls, this, handler));
		handler.sendEmptyMessageDelayed(1, 2000);
		vp.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int postion) {
				//
				for (int i = 0; i < dots.size(); i++) {
					ImageView img = dots.get(i);
					if (i == postion % dots.size()) {
						img.setImageResource(R.drawable.dot_focus);
					} else {
						img.setImageResource(R.drawable.dot_normal);
					}
				}
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
	}

4 ViewPager的适配页面类
getCount() 方法的返回值：这个值直接关系到ViewPager的“边界”，因此当我们把它设置为Integer.MAX_VALUE之后，用户基本就看不到这个边界了（估计滑到这里的时候电池已经挂了吧o_O）。当然，通常情况下设置为100倍实际内容个数也是可以的，之前看的某个实现就是这么干的。

•instantiateItem() 方法position的处理：由于我们设置了count为 Integer.MAX_VALUE，因此这个position的取值范围很大很大，但我们实际要显示的内容肯定没这么多（往往只有几项），所以这里肯定会有求模操作。但是，简单的求模会出现问题：考虑用户向左滑的情形，则position可能会出现负值。所以我们需要对负值再处理一次，使其落在正确的区间内。

•instantiateItem() 方法父组件的处理：通常我们会直接addView，但这里如果直接这样写，则会抛出IllegalStateException。假设一共有2个view，则当用户第2次滑动第一view的时候就会触发这个异常，原因是我们试图把一个有父组件的View添加到另一个组件。所以我们可以每次都初始化一个新的布局视图,然后把去改变布局中控件的内容,这样就不用担心view的个数和postion位置冲突问题

package com.example.day17_viewpagerround.adapter;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.day17_viewpagerround.R;
import com.lidroid.xutils.BitmapUtils;

public class VPAdapter extends PagerAdapter {

	String[] urls;
	Context context;
	Handler handler;

	public VPAdapter(String[] urls, Context context, Handler handler) {
		super();
		this.urls = urls;
		this.context = context;
		this.handler = handler;
	}

	@Override
	public int getCount() {
		return Integer.MAX_VALUE;
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		View v = View.inflate(context, R.layout.view_item, null);
		ImageView img = (ImageView) v.findViewById(R.id.imageView1);
		/**
		 * 给img添加触摸监听
		 */
		img.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					handler.removeCallbacksAndMessages(null);
					break;
				case MotionEvent.ACTION_UP:
				case MotionEvent.ACTION_CANCEL:
					handler.sendEmptyMessageDelayed(1, 2000);
					break;
				}

				return true;
			}

		});

		BitmapUtils utils = new BitmapUtils(context);
		String uri = urls[position % urls.length];
		utils.display(img, uri);

		/**
		 * 加载到容器
		 */
		container.addView(v);

		return v;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView((View) object);
	}

}