当前位置： 移动技术网 > 移动技术>移动开发>Android > Android使用ViewPager实现无限滑动效果

Android使用ViewPager实现无限滑动效果

2019年07月24日  | 移动技术网移动技术  | 我要评论

前言

其实仔细想一下原理还是挺简单的。无非是当我们滑动到最后一页，再向后滑动时定位到第一页;当我们滑动到第一页，再向前滑动时定位到最后一页。

但是，相信很多朋友都遇到过这个问题：视图的过度效果不自然。

小编也是通过百度和谷歌查找了很多解决方案，实验了很多方法，总结了一个相对不错的方法，接下来给各位分享下滑动效果、实现细节以及一些踩过的坑。

1.无限滑动效果（左右无限滑动）

事先准备好2张滑动图片（有想试验的小伙伴，自备图片啊，小编就不提供了...）


运行效果图（左右无限循环）：

为了显示更加直观，小编仅用了2张图片。

2.代码实现

（1） activity的xml布局文件(非常简单的布局)

<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/view_pager"
  android:layout_width="match_parent"
  android:layout_height="200dp"/>
</relativelayout>

（2）activity

public class mainactivity extends appcompatactivity {

 private viewpager mviewpager;
 private viewpageradapter madapter;
 private int[] images; // 图片资源数组

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  initview(); // 初始化视图
  initdata(); // 初始化数据
 }

 /**
  * 初始化视图
  */
 private void initview() {
  mviewpager = (viewpager) findviewbyid(r.id.view_pager);
 }

 /**
  * 初始化数据
  */
 private void initdata() {
  images = new int[]{r.mipmap.image1, r.mipmap.image2};
  madapter = new viewpageradapter(this, images);
  mviewpager.setadapter(madapter);

  // 将viewpager定位到中间页（short.max_value/2附近的图片资源数组第1个元素对应的页面）
  // 目的：1.图片个数 >1 才轮播 2.定位到中间页，向左向右都可滑
  if(images.length > 1) {
   mviewpager.setcurrentitem(((short.max_value / 2) / images.length) * images.length, false);
  }
 }
}

（3）viewpageradapter

/**
 * @classname: viewpageradapter
 * @description: viewpager适配器
 * @author wangnan
 * @date 2016/9/1
 */
public class viewpageradapter extends pageradapter{

 private context mcontext;
 private int[] mimages; // 图片资源id数组
 private list<imageview> mimageviews; // imageview集合

 public viewpageradapter(context context, int[] images){
  mcontext = context;
  mimages = images;
  mimageviews = new arraylist<>();
  initimageviews(mimages);
 }

 /**
  * 初始化imageviews集合
  * @param imageids
  */
 private void initimageviews(int[] imageids) {

  // 根据图片资源数组填充imageviews集合
  for(int i = 0 ; i < imageids.length ; i++){
   imageview mimageview = new imageview(mcontext);
   mimageview.setimageresource(imageids[i]);
   mimageview.setscaletype(imageview.scaletype.center_crop);
   mimageviews.add(mimageview);
  }

  // imageviews集合中的图片个数在[2,3]时会存在问题，递归再次填充一遍
  if(mimageviews.size() > 1 && mimageviews.size() < 4){
   initimageviews(imageids);
  }
 }

 @override
 public int getcount() {
  return mimageviews.size() <=1 ? mimageviews.size() : short.max_value;
 }

 @override
 public boolean isviewfromobject(view view, object object) {
  return view == object;
 }

 @override
 public object instantiateitem(viewgroup container, int position) {
  imageview mimageview = mimageviews.get(position % mimageviews.size());
  container.addview(mimageview);
  return mimageview;
 }

 @override
 public void destroyitem(viewgroup container, int position, object object) {
  container.removeview((view)object);
 }
}

具体需要解释的地方，代码中都做了相应的注释，就不再多做解释了，但后面小编还会解释遇到的两个坑点。

3.细节踩坑

相信在看小编的实现方式之前，有人在网上也找到了很多相似的实现。小编接下来要讲的就是 —— 对“这些相似的实现”踩一下坑。

1. 出现异常：java.lang.illegalstateexception: the specified child already has a parent. you must call removeview() on the child's parent first.

原因：图片资源少于4个，对应生成的imageview也少于4个。

众所周知，viewpager一般会维护2~3个页，如果只有3个imageview,很可能出现这种情况，在生成完3个page页后并准备生成第4个页面时，本应该移除的最前面的页面还未被移除，系统就会报异常并且给你这样一个提示：you must call removeview() on the child's parent first（意思是让你先将最前面页的子view从最前面页移除掉，再将该子view添加到第4页中）。

解决办法：在只有1张图片时，不能滑动，暂不处理；如果有2~3张图片时，递归增加至大于等于4个imageview为止(下方为小编解决该问题的代码)。

 /**
  * 初始化imageviews集合
  * @param imageids
  */
 private void initimageviews(int[] imageids) {

  ......

  // imageviews集合中的图片个数在[2,3]时会存在问题，递归再次填充一遍
  if(mimageviews.size() > 1 && mimageviews.size() < 4){
   initimageviews(imageids);
  }
 }

2. 滑动效果出现混乱（后面会附上混乱的效果图）

原因：viewpager源码本身存在问题 - 数据范围越界问题。

小编的获取viewpager页面数量的方法是这样写的：

 @override
 public int getcount() {
  return mimageviews.size() <=1 ? mimageviews.size() : short.max_value;
 }

小于1时，页面没有滑动，不需要扩充页面数量；

大于1时，取short取值范围的最大值32767（我们会有3w多页面，但不会同时存在，因为viewpager最多维持3个页面）

小编这里用的是short，但一开始从网上找的相似实现全是使用的integer（integer.max_value = 2147483647, 也就是我们的viewpager将会有大概21亿个页面），如果使用integer，比较细心的朋友会发现滑动经常出现混乱。

页面反向回弹bug


我们松手时，页面出现反向回弹（1~2页)，这和我们期望的滑动效果不一致。

这是其中一种bug，还有一些不太好说明的滑动bug，小编就用“滑动混乱”这个名词进行解释了...

解决办法：缩小页面数量（小编使用的short代替integer减少了页面）。

具体的无bug的临界值，有兴趣的小伙伴可以去实验,小编的测试结果如下：

800万以内：基本无滑动bug;

1000万左右：开始出现当前页面定位不准确的bug，但还未出现反向回弹bug。

总结

以上就是关于android使用viewpager实现无限滑动效果的全部内容，希望这篇文章对大家开发的时候能有所帮助，如果有疑问可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网