自定义轮播图（Banner）

先上图看效果：

在这里插入图片描述

知识要点：

1. 轮播图是怎么做到无限循环的呢
   让ViewPagerAdapter里面的getCount返回MAX_VALUE，instantiateItem方法中，获取图片的时候，让position % drawableList.size(),来得到真实值

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }
   
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        if (drawableList != null && drawableList.size() > 0) {
            View imageView = null;
            if (mCache.isEmpty()) {
                imageView = new ImageView(mContext);
            }else {
                imageView = mCache.remove(0);
   
            }
            ((ImageView) imageView).setImageDrawable(drawableList.get(position % drawableList.size()));
            container.addView(imageView);
            return imageView;
        }
        return null;
   
    }
   

2. 自动轮播是怎么实现的呢
   通过Handler每隔一段时间发送一次消息，来进行循环的，每循环一次，就切换到下一个ViewPager的位置

    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        if (msg.what == MSG_CHANGE_SELECTION) {
            if (mBannerRef == null || mBannerRef.get() == null) {
                return;
            }
            AutoScrollViewPager banner = mBannerRef.get();
            int current = banner.getCurrentItem();
            banner.setCurrentItem(current + 1);
            sendEmptyMessageDelayed(MSG_CHANGE_SELECTION,AUTO_SCROLL_TIME);
        }
    }
   

3. 指示器是怎么实现的
   首先自定义一个BannerItemView，代表每个小圆点，再自定义个BannerIndicator，把总共的小圆点添加进去，通过伸缩动画和透明度动画来改变小圆点的变化

    //指示器增大同时设置透明度变化
    private void setLarge(int position) {
        if (getChildAt(position) instanceof BannerItemView) {
            AnimatorSet set = new AnimatorSet();
            ValueAnimator animator = getEnlarge((BannerItemView) getChildAt(position));
            ValueAnimator alpha = ObjectAnimator.ofFloat(getChildAt(position), "alpha", 0.4f, 1f);
            set.play(animator).with(alpha);
            set.setDuration(618);
            set.start();
        }
    }
   
        //放大动画
    private ValueAnimator getEnlarge(BannerItemView roundRectView) {
        return ObjectAnimator.ofFloat(roundRectView,
                "rectWidth",
                0, getOffset(roundRectView));
    }
   
    //根据大小变化方向获取指示器大小偏移量
    private int getOffset(BannerItemView bannerItemView) {
        int offsest = 0;
        switch (bannerItemView.getLoaction()) {
            case BannerItemView.CENTER:
                offsest = (slider_width - slider_height)/2;
                break;
            case BannerItemView.LEFT:
                offsest = slider_width - slider_height;
                break;
            case BannerItemView.RIGHT:
                offsest = slider_width - slider_height;
                break;
        }
        return offsest;
    }
   
    //缩小动画
    private ValueAnimator getShrink(BannerItemView roundRectView) {
        return ObjectAnimator.ofFloat(roundRectView,
                "rectWidth",
                getOffset(roundRectView), 0);
    }
   
    //缩小动画同事伴随透明度变化
    public void setSmall(int small) {
        if (getChildAt(small) instanceof BannerItemView) {
            AnimatorSet set = new AnimatorSet();
            ValueAnimator alpha = ObjectAnimator.ofFloat(getChildAt(position), "alpha", 1, 0.4f);
            ValueAnimator animator = getShrink((BannerItemView) getChildAt(small));
            set.play(animator).with(alpha);
            set.setDuration(618);
            set.start();
        }
    }
   

具体实现细节请移步github
https://github.com/xinhuashi/CustomBanner.git
如果感觉有所帮助，请帮忙star一下
参考了这两位大神的文章 https://www.jianshu.com/p/489b77424b63
https://www.jianshu.com/p/ef6ff245ed3e，在这里表示感谢