android:viewpager实现图片循环滑动+索引点击事件

先付上运行结果



这画质 o(︶︿︶)o 唉。。

至于左右循环滑动的原理就是把viewpager相关的代码改成无限循环。 需要自定义ViewPagerAdapter

layout布局：

<FrameLayout 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.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:orientation="horizontal"
        android:padding="20dp" >

        <ImageView
            android:id="@+id/imagePoint1"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_choose" />

        <ImageView
            android:id="@+id/imagePoint2"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint3"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint4"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint5"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint6"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint7"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint8"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />

        <ImageView
            android:id="@+id/imagePoint9"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:padding="5dp"
            android:src="@drawable/page_unchoose" />
    </LinearLayout>

</FrameLayout>

MainActivity

package com.example.viewpager;

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

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class MainActivity extends Activity implements OnPageChangeListener,
		OnClickListener {

	private List<View> list_image = new ArrayList<View>();
	private ViewPager pager;
	private int img[] = { R.drawable.beauty1, R.drawable.beauty2,
			R.drawable.beauty3, R.drawable.beauty4, R.drawable.beauty5,
			R.drawable.beauty6, R.drawable.beauty7, R.drawable.beauty8,
			R.drawable.beauty9 };
	private ImageView point[];
	private int pointId[] = { R.id.imagePoint1, R.id.imagePoint2,
			R.id.imagePoint3, R.id.imagePoint4, R.id.imagePoint5,
			R.id.imagePoint6, R.id.imagePoint7, R.id.imagePoint8,
			R.id.imagePoint9 };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		pager = (ViewPager) findViewById(R.id.pager);
		initData();
		initPoint();
		MyViewPagerAdapter adapter = new MyViewPagerAdapter(list_image,
				img.length);
		pager.setAdapter(adapter);
		pager.setOnPageChangeListener(this);
		// 这个是最主要的 为了使pager能够循环切换 初始的位置较大一点
		pager.setCurrentItem(img.length * 100);
	}

	// 初始化索引 并且为其添加点击事件
	private void initPoint() {
		// TODO Auto-generated method stub
		point = new ImageView[img.length];
		for (int i = 0; i < img.length; i++) {
			point[i] = (ImageView) findViewById(pointId[i]);
			point[i].setOnClickListener(this);
			point[i].setTag(i);
		}
	}

	// 初始化list集合
	private void initData() {
		// TODO Auto-generated method stub
		for (int i : img) {
			ImageView imageView = new ImageView(this);
			LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
					LayoutParams.MATCH_PARENT);
			imageView.setImageResource(i);
			imageView.setScaleType(ScaleType.FIT_XY);
			imageView.setLayoutParams(params);
			list_image.add(imageView);
		}
	}

	/*
	 * 改变索引的背景图片
	 */
	private void pointChange(int position) {
		position = position % (img.length);
		for (int i = 0; i < img.length; i++) {
			point[i].setImageResource(R.drawable.page_unchoose);
		}
		point[position].setImageResource(R.drawable.page_choose);
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub
	}

	@Override
	public void onPageSelected(int position) {
		// TODO Auto-generated method stub
		pointChange(position);
	}

	/*
	 * 索引的点击事件，点击后对应的索引变色 并且图片切换到相应的图片
	 */
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		int position = (Integer) v.getTag();
		pointChange(position);
		/*
		 * try----catch捕捉异常 第一次程序一直崩溃 加了这个就好多了 
		 * 我想着应该是pager已经添加了这张图片 执行这个语句会再添加一次
		 * 只是我认为的。。
		 */
		try {
			pager.setCurrentItem(pager.getCurrentItem()/img.length*img.length + position);
		} catch (Exception e) {
		}
	}
}

自定义的ViewPagerAdapter

package com.example.viewpager;

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

import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

public class MyViewPagerAdapter extends PagerAdapter {

	private List<View> list_image = new ArrayList<View>();
	private int imgLenth;

	public MyViewPagerAdapter(List<View> list_image, int imgLenth) {
		this.list_image = list_image;
		this.imgLenth = imgLenth;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return 10000;
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		//取余很重要呀 list集合里面就那么几张图片
		container.addView(list_image.get(position % imgLenth));
		return list_image.get(position % imgLenth);
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		//同上
		container.removeView(list_image.get(position % imgLenth));
	}
}

发现有个bug 而我不能解决 。。。

滑动没有问题 可是当我点击索引的时候 偶尔会出现空白的情况 这时候再滑动一下就出来了 不知道为什么 debug了一下午。。 等我解决了 在更新一下~