ViewPager 无限循环，轮播实现

写在前面

之前写过ViewPager简单的使用，做android时间久了，做什么都想着引包，但是实现的基本的原理还是应该学习一下的，今天写一下ViewPager 无限循环、轮播实现的基本实现方式。

实现的基本原理

其实这东西实现的基本原理也很好理解，例如我们需要展示出来的三张照片的话，那么我们在建 ViewPager页面的时候，多建两张，分别放在头和尾，头和倒数第二张图片一样，尾和正数第二张照片一样。如下图

基本原理图1.png

页面滑动是从第二张图片开始，当页面滑动到最后一张图片的时候，自动跳转到第二张图片并且取消切换动画。这样就可以基本上实现无限滑动。

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

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="250dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />

        <ImageView
            android:id="@+id/iv_2"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />

        <ImageView
            android:id="@+id/iv_3"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/point_selector" />
    </LinearLayout>
</RelativeLayout>

代码中包含轮播图中的选择的小点，不需要的可以取消掉。

java 代码

初始化 ， Activity需要 “implements ViewPager.OnPageChangeListener”

vp = (ViewPager) findViewById(R.id.vp);
        ivs = new ImageView[3];
        ivs[0] = (ImageView) findViewById(R.id.iv_1);//小点
        ivs[1] = (ImageView) findViewById(R.id.iv_2);
        ivs[2] = (ImageView) findViewById(R.id.iv_3);
        ivs[0].setSelected(true);
        list = new ArrayList<View>();
        list.add(View.inflate(this, R.layout.view_3, null));
        list.add(View.inflate(this, R.layout.view_1, null));
        list.add(View.inflate(this, R.layout.view_2, null));
        list.add(View.inflate(this, R.layout.view_3, null));
        list.add(View.inflate(this, R.layout.view_1, null));
        MyPageAdapter adapter = new MyPageAdapter();
        vp.setAdapter(adapter);
        vp.setCurrentItem(1, false);
        vp.addOnPageChangeListener(this);//添加页面改变事件

ViewPager 适配器需要继承PagerAdapter

 private List<View> mFragmentList;

    public MypagerAdapter(List<View> mFragmentList) {
        this.mFragmentList = mFragmentList;
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(mFragmentList.get(position));
        return mFragmentList.get(position);
    }
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(mFragmentList.get(position));
    }

页面滑动监听onPageScrollStateChanged

 @Override
    public void onPageScrollStateChanged(int state) {
        //验证当前的滑动是否结束
        if (state == ViewPager.SCROLL_STATE_IDLE) {
              if (curponsition == 0){
                vp.setCurrentItem(3, false);//切换，不要动画效果
            } else if (curponsition == 4) {
                vp.setCurrentItem(1, false);//切换，不要动画效果
            }
        }
    }

小点切换，页面切换监听，上面滑动监听切换页面需要用到下面的索引

  @Override
    public void onPageSelected(int position) {
        curponsition = position;//记录当前显示的索引 
        switch (position) {
            case 0:
            case 3:
                setSelect(2);
                break;
            case 1:
            case 4:
                setSelect(0);
                break;
            case 2:
                setSelect(1);
                break;
        }
    }

    private void setSelect(int index) {
        for (int i = 0; i < ivs.length; i++) {
            ivs[i].setSelected(i == index);
        }
    }

如果定时轮播还需要加一个定时器以及handler，index初始值为-1

 handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                vp.setCurrentItem(msg.arg1, true);//设置页面
            }
        };
        //实例化定时器
        timer = new Timer();
        //指定定时器计划
        timer.schedule(new TimerTask() {

            @Override
            public void run() {
              // TODO Auto-generated method stub
                Message msg = Message.obtain();
                index++;
                msg.arg1 = index % 3 + 2;
                msg.what = 10086;
                handler.sendMessage(msg);
            }
        }, 3000, 3000);//第二个参数：延时，第三个间隔

总结

以上代码基本上就可以实现一个简单的轮播图（无限循环）。如果有什么问题，可以在下面评论留言，不足之处多多指教。