自定義循環滑動的viewpager

摘要

今天和大家分享一下如何定制一個可以循環滑動的viewpager。其實今天更重要的提供一種組件化思想，當然你可以理解為面向對象思想。

吐槽一下網上流行的實現方式吧(為了方便說明,下文稱之為方式A)，方式A是重寫adapter的getCount方法，返回一個很大的數（值為max），adapter中的getView方法中的position重新根據實際數量取模，把viewpager設置在max二分之一的位置。因為這個值很大所以基本不可能滑動到position=0或者position=max的位置，不過確切來說這並不是無限循環，采用腳本之類的應該可以滑動到邊界（沒有試驗過）。

 

我們的需求

快速把之前viewpager相關的代碼改成無限循環。

這個需求很簡單就是在已有的代碼上完成無限循環。當然你可以根據方式A來完成，它是通過適配器來完成無限循環的，不過這種方式你需要改的代碼並不少，畢竟你得改適配器。

本文需要提供的方式B就登場了，好處在於不用改你的adapter，只需要把你的viewpager改成本文中的組件CycleViewPager就可以了，其他的都不用改。

 

原理

CycleViewPager繼承ViewPager。當向右翻頁（文中指的向右翻頁是指手指由右向左滑，向左翻頁反之），數據滑動到最后一條數據時調用setCurrentItem（0）返回第一條，當向左翻頁，數據滑動到第一條數據時setCurrentItem（getCount()-1）返回到最后一條數據。在設置數據的時候需要多生成兩條數據，比如原始數據是[a,b,c,d,e]，那么生成的數據為[e,a,b,c,d,e,a],原始數據第一條前面加了最后一條數據e，原始數據的最后一條的后面加了原始數據的第一條數據a。從a滑到e時，繼續向右翻頁那么就到了數據a（最右邊的那個a），停止滑動時調用setCurrentItem（1）返回第一條數據a（最左邊的那個a）；從e滑動到a時，繼續向左翻頁那么就到了數據e（做左邊的那個e），停止滑動時調用setCurrentItem（5）。

 

直接上代碼

package com.vane.widget.cycleviewpager;

import android.content.Context;
import android.database.DataSetObserver;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class CycleViewPager extends ViewPager {

    private InnerPagerAdapter mAdapter;

    public CycleViewPager(Context context) {
        super( context);
        setOnPageChangeListener( null);
    }

    public CycleViewPager(Context context, AttributeSet attrs) {
        super( context, attrs);
        setOnPageChangeListener( null);
    }

    @Override
    public void setAdapter(PagerAdapter arg0) {
        mAdapter = new InnerPagerAdapter( arg0);
        super.setAdapter( mAdapter);
        setCurrentItem( 1);
    }

    @Override
    public void setOnPageChangeListener(OnPageChangeListener listener) {
        super.setOnPageChangeListener( new InnerOnPageChangeListener( listener));
    }

    private class InnerOnPageChangeListener implements OnPageChangeListener {

        private OnPageChangeListener listener;
        private int position;

        public InnerOnPageChangeListener(OnPageChangeListener listener) {
            this.listener = listener;
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
            if(null != listener) {
                listener.onPageScrollStateChanged( arg0);
            }
            if(arg0 == ViewPager.SCROLL_STATE_IDLE) {
                if(position == mAdapter.getCount() - 1) {
                    setCurrentItem( 1, false);
                }
                else if(position == 0) {
                    setCurrentItem( mAdapter.getCount() - 2, false);
                }
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            if(null != listener) {
                listener.onPageScrolled( arg0, arg1, arg2);
            }
        }

        @Override
        public void onPageSelected(int arg0) {
            position = arg0;
            if(null != listener) {
                listener.onPageSelected( arg0);
            }
        }
    }

    private class InnerPagerAdapter extends PagerAdapter {

        private PagerAdapter adapter;

        public InnerPagerAdapter(PagerAdapter adapter) {
            this.adapter = adapter;
            adapter.registerDataSetObserver( new DataSetObserver() {

                @Override
                public void onChanged() {
                    notifyDataSetChanged();
                }

                @Override
                public void onInvalidated() {
                    notifyDataSetChanged();
                }

            });
        }

        @Override
        public int getCount() {
            return adapter.getCount() + 2;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return adapter.isViewFromObject( arg0, arg1);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            if(position == 0) {
                position = adapter.getCount() - 1;
            }
            else if(position == adapter.getCount() + 1) {
                position = 0;
            }
            else {
                position -= 1;
            }
            return adapter.instantiateItem( container, position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            adapter.destroyItem( container, position, object);
        }

    }
}

 

如何使用

使用方法和viewPager是一樣一樣的，你就認為是viewpager來使用就可以了。源碼你可以在github上取https://github.com/vanezkw/cycleviewpager.git

 

總結

源碼中大家也都看到了沒有什么特別的其實就是平時講的設計模式。之前提到的方式A個人認為並不完全是面向對象的方式，這個當然也看大家如何理解。

如果文中有任何疑問或者不妥之處歡迎留言交流。在此也留下QQ群311536202,歡迎交流。