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选中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。