ViewPager实现无限循环

引言

这两天在项目里实用到ViewPager来做广告运营位展示。看到如今非常多APP的广告运营位都是无限循环的，所以就研究了一下这个功能的实现。

先看看效果

从一个方向上一直滑动。么有滑到尽头的感觉。详细是怎么实现的呢？看以下的思路。

实现思路

此处画了一幅图来表达实现无限循环的思路，即在数据起始位置前插入最后一项数据。在最后一项数据后插入第一项数据，当滑动到此处时。更新页面的索引位置就ok了 。

代码实现

这种方法用于数据处理，当中mediaList是原始数据，newMediaList是处理完的数据，mMediaList是用于页面显示的数据。

public void initItemList(List<MediaIntro> mediaList){
            List<MediaIntro> newMediaList = new ArrayList<MediaIntro>();
            newMediaList.addAll(mediaList);
            if(newMediaList.size() > 1){
                //第0个位最后一个，向左拉动时。能够实现直接滑动到最后一个。最后一个是第0个。能够实现向右滑动的时直接跳到第0个
                newMediaList.add(0,mediaList.get(mediaList.size() -1));
                newMediaList.add(mediaList.get(0));
            }
            mMediaList = newMediaList;
        }

完整的adapter的代码：

public class AdImagePagerAdapter extends RecyclingPagerAdapter{
        private LayoutInflater mInflater;
        private List<MediaIntro> mMediaList = new ArrayList<MediaIntro>();

        private boolean isInfiniteLoop; //是否无限循环
        int size;

        public AdImagePagerAdapter (LayoutInflater inflater ,List<MediaIntro> mediaList){
            mInflater = inflater;
            isInfiniteLoop = false;
            initItemList(mediaList);
            size = mMediaList.size();
        }

        public void initItemList(List<MediaIntro> mediaList){
            List<MediaIntro> newMediaList = new ArrayList<MediaIntro>();
            newMediaList.addAll(mediaList);
            if(newMediaList.size() > 1){
                //第0个位最后一个，向左拉动时。能够实现直接滑动到最后一个。最后一个是第0个，能够实现向右滑动的时直接跳到第0个
                newMediaList.add(0,mediaList.get(mediaList.size() -1));
                newMediaList.add(mediaList.get(0));
            }
            mMediaList = newMediaList;
        }

        public MediaIntro getItem(int position){
            return mMediaList.get(position);
        }
        public int getPosition(int position){
            return isInfiniteLoop?
 position%size:position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            final ViewHolder holder;
            final MediaIntro media = getItem(position);
            if(convertView == null){
                holder = new ViewHolder();
                convertView = mInflater.inflate(R.layout.home_ad_item, parent,false);
                holder.mImageView = (ImageView)convertView.findViewById(R.id.homeAdItemImg);
                holder.mTextView = (TextView)convertView.findViewById(R.id.homeAdItemTxt);
                convertView.setTag(holder);
            }else{
                holder=(ViewHolder)convertView.getTag();
            }
            if(media.source.equals(MagicSource.SOURCE_OUT_AD)){
                imageLoader.displayImage(adImageUrl,holder.mImageView,adImageOptions,null,null);
                holder.mTextView.setText("");
                holder.mImageView.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // TODO Auto-generated method stub
                        //广告点击事件
                    }
                });
            }else {
                imageLoader.displayImage(media.imgUrl, holder.mImageView,adImageOptions,null,null);
                holder.mTextView.setText(media.desc+"");
                holder.mImageView.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        // TODO Auto-generated method stub
                        startMediaDetail(media);
                    }
                });
            }
            return convertView;
        }
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return isInfiniteLoop ? Integer.MAX_VALUE : mMediaList.size();
        }
        private class ViewHolder{
            ImageView mImageView = null;
            TextView mTextView = null;
        }
        public boolean isInfiniteLoop(){
            return isInfiniteLoop;
        }
        public AdImagePagerAdapter setInfiniteLoop(boolean isInfiniteLoop){
            this.isInfiniteLoop =isInfiniteLoop;
            return this;
        }
    }

更新页面索引的代码：

@Override
        public void onPageSelected(int position) {
            // TODO Auto-generated method stub

            if(adImageAdapter.getCount()>1){ 
                if(position<1){
                    position=adImageAdapter.getCount()-2;
                    adViewPager.setCurrentItem(adImageAdapter.getCount()-2,false);
                }else if(position > adImageAdapter.getCount()-2){
                    position = 1;
                    adViewPager.setCurrentItem(1, false);
                }
                setAdPagePointSelected(position-1);
            }
        }

完整的滑动监听器代码

public class OnAdPageChangeListener implements OnPageChangeListener{

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageSelected(int position) {
            // TODO Auto-generated method stub

            if(adImageAdapter.getCount()>1){ 
                if(position<1){
                    position=adImageAdapter.getCount()-2;
                    adViewPager.setCurrentItem(adImageAdapter.getCount()-2,false);
                }else if(position > adImageAdapter.getCount()-2){
                    position = 1;
                    adViewPager.setCurrentItem(1, false);
                }
                setAdPagePointSelected(position-1);
            }
        }

    }

详细效果

哈哈，看上去效果还能够。

总结

当然肯定还有别的办法来实现，这是我近期用到的实现方式。就把它记录下来。

每天写点代码，挺快乐的，分享出来和大家一起快乐。晚安。