Android常见控件-轮播图

Android常见控件-轮播图

主要通过两种不同的方式实现轮播图控件，都是基于ViewPager实现的：

• 方式一：通过ViewPager的的页数为无限大
• 方式二：通过在图片一头一尾添加额外2张照片，用于图片切换

源码地址：https://github.com/fenggit/Banner
效果图

方式一（不推荐）

1.通过设置PagerAdpater的getCount为Integer的最大值，让用户短时间无法滑动到尽头，其中mNetImage为图片路径集合

        @Override
        public int getCount() {
            // 设置无限循环，只有1张图片不循环
            if (mNetImage.size() > 1) {
              return Integer.MAX_VALUE;
            }

            return mNetImage.size();
        }

2.加载图片的时候，要对图片路径求模，获取正确的index，比如图片有3张，那么循环的index应该是0,1,2

  @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView image = new ImageView(getContext());
            image.setScaleType(ImageView.ScaleType.CENTER_CROP);

            // 加载图片
            Glide.with(getContext()).load(mNetImage.get(position % mNetImage.size())).into(image);

            container.addView(image);

            return image;
        }

3.那么现在可以向右一直滑动循环，那么向左无法循环，主要是index在0的位置，可以通过设置一开始轮播图的位置不要在最左边的第一个图

        // 设置起始位置不要在最左边
        mViewPager.setCurrentItem(1000000 * mNetImage.size());

方式二（推荐）

1.原理

• 通过在原始数据上面，添加一头一尾2张照片，来循环滑动；比如设置3张图片，那么需要5张图片来轮询滑动；
• 设置默认图片在index为1的位置，当滑动图片到index=4的时候，切换viewpager到index=0的位置；
• 当滑动图片到index=0的时候，切换viewpager到index=3的位置

2.实现

1.通LinkedList包装原数据，添加头尾数据

      this.mNetImage.addAll(imageUrl);
        if (imageUrl.size() > 1) {
            // 添加2条数据,一头一尾
            this.mNetImage.addFirst(imageUrl.get(imageUrl.size() - 1));
            this.mNetImage.addLast(imageUrl.get(0));
        }

2.设置默认页面在index=1的位置上面
3.监听ViewPager切换页面，交换页面和设置平滑移动页面

 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                //  * 真实数据：      0       1       2
                //  * 实际数据：2     0       1       2       0
                //  最后一个0切换到前面的0页面位置
                if (position == mNetImage.size() - 1) {
                    currentPosition = FIRST_PAGE;

                } else if (position == 0) {
                    currentPosition = mNetImage.size() - 2;
                } else {
                    currentPosition = position;
                }

                // 指示点只有原数据的数目: 0       1       2
                updateDot(currentPosition - 1);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // 页面滑动静止状态，偷天换日，换位置
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    // smoothScroll: 设置平稳滑动
                    mViewPager.setCurrentItem(currentPosition, false);
                }

            }
        });

4.设置自动轮播的时候会和手动滑动冲突，交互不好可以重写dispatchTouchEvent方法，按下的时候停止轮播，手指离开不操作的时候继续轮播

   @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (isAutoPlay) {
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    stopAutoPlay();
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_OUTSIDE:
                    startAutoPlay();
                    break;
            }
        }
        return super.dispatchTouchEvent(ev);
    }