Android - ViewPager进阶篇之无限滑动

在Android开发中,我们常常用ViewPager来为自己的应用创建广告条幅,并且常常会遇到这样的需求 —— ViewPager无限滑动

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

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

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

1.无限滑动效果(左右无限滑动)

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

png_image1.png

运行效果图(左右无限循环):

  • 为了显示更加直观,小编仅用了2张图片。
gif_my_viewpage.gif

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

gif_my_erroe.gif

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

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

解决办法:减少ViewPager页面的数量(小编使用的Short代替Integer减少了页面数量)。

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

  • 800万以内:基本无滑动Bug;

  • 1000万左右:开始出现当前页面定位不准确的Bug,但还未出现反向回弹Bug。(小编到这就已经忍不了了.../(ㄒoㄒ)/~~,已经不打算再往下测了...)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容