Android ViewPager导航小圆点实现无限循环效果

之前用View Pager做了一个图片切换的推荐栏（就类似与淘宝、头条客户端顶端的推荐信息栏），利用View Pager很快就能实现，但是一次无意间使用淘宝APP的时候，突然发现它的效果和我做的还不一样，淘宝APP的推荐栏可以左右无限循环切换，而ViewPager自身其实并没有支持这个功能。

其实实现这个无限循环不难，只需要在数据源的首尾各添加一张多余的图片，在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是，这里的数据源+2，而导航小圆点却比数据源少2，这样在无限循环的时候，小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件，总感觉挺麻烦的，有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个，并设置为invisible不就好了？

我的代码实现如下：

xml布局：

<?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">

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

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

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:visibility="invisible"
     android:src="@drawable/dots"/>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:src="@drawable/dots"/>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:src="@drawable/dots"/>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:src="@drawable/dots"/>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:src="@drawable/dots"/>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:clickable="true"
     android:padding="5dp"
     android:visibility="invisible"
     android:src="@drawable/dots"/>
 </LinearLayout>

</RelativeLayout>

界面实现：

public class HomePageFragment extends BaseFragment {

private View view;
 private ViewPager mViewPager;//顶部信息推荐栏
 private MyViewPagerAdapter mViewPagerAdapter;
 private LinearLayout ll_dots_homepage_top;//顶部信息推荐栏导航点
 private int GUIDE_NUMBER = 4; //顶部信息推荐栏的数量
 private ImageView[] dotImages; //顶部信息推荐栏引导小圆点
 private int dotCurrentIndex; //顶部信息推荐栏小圆点偏移量
 private MyOnPageChangeListener mOnPageChangeListener;

private List<View> mListDataViewPage;
 private Context context;

@Override
 public void onAttach(Context context) {
   super.onAttach(context);
   this.context = context;
 }

@Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable
     Bundle savedInstanceState) {
   view = inflater.inflate(R.layout.frament_homepage, container, false);

initData();
   initView();

return view;
 }

/**
  * 初始化一些基础数据
  */
 private void initData() {
   if (mListDataViewPage != null) {
     mListDataViewPage.clear();
     mListDataViewPage = null;
   } else {
     mListDataViewPage = new ArrayList<>();
     // 为了实现无限循环，首位两张图片都是重复的
     int[] resource = new int[]{
         R.drawable.test_viewpager_homepage_4, R.drawable.test_viewpager_homepage_1, R.drawable.test_viewpager_homepage_2, R
         .drawable.test_viewpager_homepage_3, R.drawable.test_viewpager_homepage_4,R.drawable.test_viewpager_homepage_1,};

for (int i = 0; i < 6; i++) {
       WeakReference<Bitmap> bitmao = new WeakReference<Bitmap>(BitmapFactory
           .decodeResource(getResources(), resource[i]));
       ImageView imageView = new ImageView(context);
       imageView.setImageBitmap(bitmao.get());
       imageView.setScaleType(ImageView.ScaleType.FIT_XY);
       mListDataViewPage.add(imageView);
     }

}

}

/**
  * 初始化底部推信息推荐栏引导小圆点View
  */
 private void initDots() {
   dotImages = new ImageView[mListDataViewPage.size()];
   for (int i = 0; i < mListDataViewPage.size(); i++) {
     dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
     dotImages[i].setEnabled(false);
   }
   **//将第一个小圆点设置为高亮，这里的第一个偏移量是1，不是0
   dotImages[1].setEnabled(true);
   dotCurrentIndex = 1;**
 }

/**
  * initView
  */
 private void initView() {
   findLayout();
   findView();
 }

/**
  * findLayout
  */
 private void findLayout() {
   ll_dots_homepage_top = (LinearLayout) view.findViewById(R.id.ll_dots_homepage_top);
   initDots();

}

/**
  * 初始化控件
  */
 private void findView() {
   mViewPager = (ViewPager) view.findViewById(R.id.vp_homepage)；

mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
   mOnPageChangeListener = new MyOnPageChangeListener();
   mViewPager.setAdapter(mViewPagerAdapter);
   mViewPager.setOnPageChangeListener(mOnPageChangeListener);
   **mViewPager.setCurrentItem(1,false); //默认选中第二张图片**
 }

private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

@Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
   public void onPageSelected(int position) {
     if (position < 0 || position > mListDataViewPage.size() || position == dotCurrentIndex) {
       return;
     }

if ( mListDataViewPage.size() > 1) { //多于1，才会循环跳转
       if ( position < 1) { //首位之前，跳转到末尾（N）
         position = 4;
         mViewPager.setCurrentItem(position,false);
       } else if ( position > 4) { //末位之后，跳转到首位（1）
         position = 1;
         mViewPager.setCurrentItem(position,false); //false:不显示跳转过程的动画

}else {
         dotImages[dotCurrentIndex].setEnabled(false);
         dotImages[position].setEnabled(true);
         dotCurrentIndex = position;
       }
     }

}

@Override
   public void onPageScrollStateChanged(int state) {

}
 }
}

注意代码中加粗的代码。初始的小圆点选中和ViewPager的position选中。

来源：http://blog.csdn.net/flowerff/article/details/77429618