Android ViewPager巧用偷梁换柱实现自动循环滚动

前言

项目需求有个显示banner图，可自动循环滚动，也可手动滚动，网上也有很多demo，很多我不需要的功能都封装进去，所以就自己重新构造了一个，大家下载我封装好的demo直接调用即可，调用方法也是很简单，构造方法也很简单。如有需要相同功能的可直接调用，代码简洁好修改。

功能

1.自动滚动展示banner，循环滚动
2.小圆点指示banner
3.有手势事件时自动滚动停止
4.可对每一个位置的banner进行点击
5.自动释放不用的banner，节省内存

实现思路

咱在此先假设有5张图片（如图1-1，拿出我许久不用的画图，是不是很漂亮。赤橙黄绿青蓝紫 谁持彩练当空舞？雨后复斜阳，关山阵阵苍。当年鏖战急， 弹洞前村壁。 装点此关山， 今朝更好看。 不好意思，一背起诗来我就止不住，大家见谅啊），黑框中是我们想要显示的五张图片下标1-5，我们知道如果我们只用ViewPager的话当滑动到图片1的时候，也就是第一张图片的时候再往前划肯定是滑不动了，同样滑动到最后一张也就是下标5的时候再往后滑肯定也是滑不动了。所以在此如果想要实现循环滑动，那么我的方法就是图1-1所示，相信大家都明白了，就是在要显示的1-5图片之前加入图片0，图片0也就是图片5所显示的内容，然后再在图片5之后加入图片6，同样图片6也就是图片1所显示的内容，这样我们在下标1的位置再向前滑就滑到下标0的位置，而0所显示的内容正是图片5，给人的感觉是从Pager首位置滑动到了尾位置，这种情况下大家或许会问那0再向前滑也滑不动呀，对的，所以我们在此要做一下处理，当滑动到图片0的时候我们就让它跳转到图片5，给它来个偷梁换柱，同样的方法，当滑动到图片6的时候让它跳转到图片1，这样一来，整个ViewPager就实现了循环滚动的效果。
其他功能就很简单易懂了，大家看看代码吧。

使用方法

大家把下载好的zip打开，adapter和widget里的文件放到自己项目里。
然后布局，如下：

<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="130dp"
    tools:context="${relativePackage}.${activityClass}" >

    <com.maxi.slidebanner.widget.AutoSlideViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="130dp" />

    <com.maxi.slidebanner.widget.SlidePagerPiontsView
        android:id="@+id/banner_points"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="5dp"
        android:orientation="horizontal" />

</RelativeLayout>

然后去代码中声明：

package com.maxi.slidebanner;

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

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.maxi.slidebanner.adapter.SlidePageAdapter;
import com.maxi.slidebanner.widget.AutoSlideViewPager;
import com.maxi.slidebanner.widget.AutoSlideViewPager.OnPageSlideSelected;
import com.maxi.slidebanner.widget.SlidePagerPiontsView;

public class MainActivity extends Activity {
    AutoSlideViewPager viewPager;
    SlidePagerPiontsView viewPionts;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findView();
        init();
    }

    private void findView() {
        viewPager = (AutoSlideViewPager) findViewById(R.id.view_pager);
        viewPionts = (SlidePagerPiontsView) findViewById(R.id.banner_points);
    } 

    private int[] image = { R.drawable.b1, R.drawable.b2, R.drawable.b3,
            R.drawable.b4, R.drawable.b5 };
    private List<Integer> imageList = new ArrayList<Integer>();

    private void init() {
        for (int i = 0; i < image.length; i++) {
            imageList.add(image[i]);
        }
        viewPionts.setPoints(image.length, R.drawable.point_normal, R.drawable.point_read);
        SlidePageAdapter pageAdapter = new SlidePageAdapter(this,imageList);
        viewPager.setAdapter(pageAdapter);
        viewPager.setAutoSlideDuration(5000); //默认3秒 设置自动滚动时间为5秒
        viewPager.setOnPageSlideSelected(new OnPageSlideSelected(){

            @Override
            public void onSlideSelected(int position) {
                // TODO Auto-generated method stub
                viewPionts.setSelectPoint(image.length, position);
            }

            @Override
            public void onClickSelected(int position) {
                // TODO Auto-generated method stub
                Toast.makeText(MainActivity.this, "点击第"+position+"个banner", Toast.LENGTH_SHORT).show();
            }

        });
    }
}

是不是很简单。当然我在此用的不是网络获取的图片，如果需要网络获取图片的话只需在SlidePageAdapter中的setViewList中稍作更改即可。
下载地址：SlideBannerDemo
git地址：SlideBannerDemo