引言

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

先看看效果

ViewPager实现无限循环_点击事件
从一个方向上一直滑动。么有滑到尽头的感觉。详细是怎么实现的呢?看以下的思路。

实现思路

ViewPager实现无限循环_ide_02
此处画了一幅图来表达实现无限循环的思路,即在数据起始位置前插入最后一项数据。在最后一项数据后插入第一项数据,当滑动到此处时。更新页面的索引位置就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);
            }
        }

    }
详细效果

ViewPager实现无限循环_无限循环_03
哈哈,看上去效果还能够。

总结

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


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