Android ViewPager实现无限循环（2.加入小圆点，优化自动和手动滑动冲突）

上一篇内容只是简单的实现了viewpager的页面自动轮播，但有以下两个缺点：

1.还没有小圆点，用户看不出总共有几页，当前在哪一页。

2.固定5秒轮播，比如在第一张图过了4秒后，用户手动滑到第二张图，那么过了一秒后，定时器也会将viewpager进行代码轮播，而滑到第三张，体验不好。

此次将对以上两个问题进行解决。

BannerAdapter类和布局，不需要修改了，只要改MainActivity和他的布局就行了

先看看布局，只是简单了加上了一个LinearLayout用于放置小圆点

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">

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

        <LinearLayout
            android:id="@+id/ll_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:gravity="center"
            android:orientation="horizontal" />
    </RelativeLayout>
</RelativeLayout>

代码中，加上了创建小圆点并add到LinearLayout中。当然，在viewpager的监听器中也要改变小圆点的显示

package com.chenjian.loopviewpager2;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends Activity {

    private int[] imgIds = {
            R.drawable.banner1,
            R.drawable.banner2,
            R.drawable.banner3,
    };

    private ViewPager mViewPager;
    private LinearLayout mCircleLinearLayout;
    private ImageView[] mCircleImageViews;
    private Timer mTimer = new Timer();
    private TimerTask mTimerTask;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findView();
        setView();
        setListener();
        startLoop();
    }

    private void findView() {
        mViewPager = (ViewPager) findViewById(R.id.vp_main);
        mCircleLinearLayout = (LinearLayout) findViewById(R.id.ll_main);
    }

    private void setView() {
        BannerAdapter bannerAdapter = new BannerAdapter(this, imgIds);
        mViewPager.setAdapter(bannerAdapter);
        mViewPager.setCurrentItem(1000 * imgIds.length);

        // 添加小红点
        mCircleLinearLayout.removeAllViews();
        mCircleImageViews = new ImageView[imgIds.length];
        for (int i = 0; i < imgIds.length; i++) {
            View circleView = LayoutInflater.from(this).inflate(R.layout.view_circle_img, null);
            mCircleImageViews[i] = (ImageView) circleView.findViewById(R.id.img_view_circle);
            if (0 == i) {
                mCircleImageViews[i].setImageResource(R.drawable.icon_dot_selected);
            } else {
                mCircleImageViews[i].setImageResource(R.drawable.icon_dot_normal);
            }
            mCircleLinearLayout.addView(circleView);
        }
    }

    private void setListener() {
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                /**
                 * 本监听器只是实现了ViewPager循环时的小红点的跟随变化
                 */
                int curPosition = position % mCircleImageViews.length;
                for (int i = 0; i < mCircleImageViews.length; i++) {
                    if (i == curPosition) {
                        mCircleImageViews[i].setImageResource(R.drawable.icon_dot_selected);
                    } else {
                        mCircleImageViews[i].setImageResource(R.drawable.icon_dot_normal);
                    }
                }

                startLoop();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private Handler mHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            int i = mViewPager.getCurrentItem();
            /**
             * 这里没必要做以下操作，
             * 因为Adapter的长度为Integer.MAX_VALUE，
             * 要跑多少年才能越界？
             */
//                i = i % mViewPager.getAdapter().getCount();
            mViewPager.setCurrentItem(i + 1);
        }
    };

    /**
     * 开启循环
     */
    private void startLoop() {
        synchronized (MainActivity.class) {
            if (mTimerTask != null) {
                mTimerTask.cancel();
            }
            mTimerTask = new TimerTask() {
                @Override
                public void run() {
                    mHandler.sendEmptyMessage(0);
                }
            };
            mTimer.schedule(mTimerTask, 5000);
        }
    }
}

解决第一个问题，添加小圆点，比较简单。第二个问题，我的思路是在程序一进来，和每次页面滑到某一页的时候，都重置一下定时器。

最后看看效果（非动态图）

源码下载点击打开链接