Android使用ViewPager实现无限滑动效果
前言
其实仔细想一下原理还是挺简单的。无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页。
但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然。
小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果、实现细节以及一些踩过的坑。
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实现无限滑动效果的全部内容,希望这篇文章对大家开发的时候能有所帮助,如果有疑问可以留言交流。
推荐阅读