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

概述之前用ViewPager做了一个图片切换的推荐栏（就类似与淘宝、头条客户端顶端的推荐信息栏），利用ViewPager很快就能实现，但是一次无意间使用淘宝APP的时候，突然发现它的效果和我做的还不一样，淘宝APP的推荐栏可以左

之前用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,};      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选中。

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

总结

以上是内存溢出为你收集整理的Android ViewPager导航小圆点实现无限循环效果全部内容，希望文章能够帮你解决Android ViewPager导航小圆点实现无限循环效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。