Android BannerView封装学习

BannerView

相信每个Android开发的小伙伴都做过轮播图，ViewPager加ImageView再加上一排指示器点，非常的简单，没有什么可说的。本菜简书关注的大神看到一篇文章
如德芙般丝滑的ViewPager轮播
反省自己，每次做轮播图，虽然都是同样的套路，同样的配方，但是每次都要浪费许多时间，不够完美，也不够优雅。封装一个BannerView是最好的选择。

BannerView

Android仿猫眼电影APP

实现方式

跟随的圆点指示器和ViewPager的滑动时间是封装的重点，其他不在赘述，最后有源码。

跟随的圆点指示器

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) move_point.getLayoutParams();
                position = position % images.length;
                params.leftMargin = (int) (dip2px(pointWidth + point Distance) * position + dip2px(pointWidth + pointDistance) * positionOffset);
                move_point.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int i) {
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });

position：和存放图片的数组长度求余，取值范围（0~数组长度-1）
positionOffset：float类型，取值范围（0一1），表示当前页面滑动到下一个页面的偏移量，本菜以为滑动到上一个页面时positionOffset应该是（0一-1）的取值，测试之后发现并不是，取值范围是（0一1），滑动到上一个或者下一个页面position会跟着改变，所以不需要负数。
pointWidth + pointDistance：pointWidth，指示器小圆点的宽度，pointDistance两个小圆点之间的距离，两数之和表示两个相邻小圆点圆心到圆心的距离，也就是跟随指示器小圆点每切换一次页面需要滑动的距离。
通过动态的设置跟随小圆点距离左边的距离，就实现了跟随小圆点

修改ViewPager的页面切换时间

private void setViewPagerDuration() {
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            field.set(viewPager, new Scroller(context, new AccelerateInterpolator()) {
                @Override
                public void startScroll(int startX, int startY, int dx, int dy, int duration) {
                    super.startScroll(startX, startY, dx, dy, scrollTime);
                }
            });
        } catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }
    }

通过反射改变ViewPager的切换动画时间，让滑动丝滑

超简单使用方式

imageList = new int[]{R.drawable.banner1, R.drawable.banner2, R.drawable.banner3, R.drawable.banner4, R.drawable.banner5, R.drawable.banner6};
        rl_banner = (RelativeLayout) view.findViewById(R.id.rl_banner);
        bannerView = new BannerView(getActivity(), imageList);
        rl_banner.addView(bannerView.getBannerView());
        bannerView.start();
        bannerView.setOnPageClickListener(new BannerView.OnPageClickListener() {
            @Override
            public void onPageClick(int position) {
                Toast.makeText(getActivity(), position + "", Toast.LENGTH_SHORT).show();
            }
        });

onDestroy中调用

bannerView.stop();

以后写轮播图只要这样就可以了，想想就激动。

源码

public class BannerView implements View.OnClickListener {
    private int[] images;
    private Context context;
    private View bannerView;
    private LinearLayout ll_point;
    private ViewPager viewPager;
    private View move_point;
    private int switchTime = 6000;
    private int scrollTime = 600;
    private int pointWidth = 5;
    private int pointDistance = 4;
    private OnPageClickListener onPageClickListener;

    private Handler handler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.what == 101) {
                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                start();
            }
            return false;
        }
    });

    public BannerView(Context context, int[] images) {
        this.context = context;
        this.images = images;
        initView();
    }

    @SuppressLint("InflateParams")
    private void initView() {
        bannerView = LayoutInflater.from(context).inflate(R.layout.bannerview, null);
        ll_point = (LinearLayout) bannerView.findViewById(R.id.ll_point);
        viewPager = (ViewPager) bannerView.findViewById(R.id.viewpager);
        move_point = bannerView.findViewById(R.id.move_point);
        viewPager.setAdapter(new BannerAdapter());
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) move_point.getLayoutParams();
                position = position % images.length;
                params.leftMargin = (int) (UIUtil.dip2px(pointWidth + pointDistance) * position + UIUtil.dip2px(pointWidth + pointDistance) * positionOffset);
                move_point.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int i) {
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
        initPoint();
        setViewPagerDuration();
    }

    private void initPoint() {
        LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(UIUtil.dip2px(pointWidth), UIUtil.dip2px(pointWidth));
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(UIUtil.dip2px(pointWidth), UIUtil.dip2px(pointWidth));
        params1.leftMargin = 0;
        params2.leftMargin = UIUtil.dip2px(pointDistance);
        for (int i = 0; i < images.length; i++) {
            ImageView point = new ImageView(context);
            if (i == 0) {
                point.setBackgroundResource(R.drawable.gray_point);
                point.setLayoutParams(params1);
            } else {
                point.setBackgroundResource(R.drawable.gray_point);
                point.setLayoutParams(params2);
            }
            ll_point.addView(point);
        }
    }

    public void start() {
        handler.sendEmptyMessageDelayed(101, switchTime);
    }

    public void stop() {
        handler.removeCallbacksAndMessages(null);
    }

    public View getBannerView() {
        return bannerView;
    }

    private int getCurrentItem() {
        return viewPager.getCurrentItem() % images.length;
    }

    @Override
    public void onClick(View view) {
        onPageClickListener.onPageClick(getCurrentItem());
    }

    public interface OnPageClickListener {
        void onPageClick(int position);
    }

    public void setOnPageClickListener(OnPageClickListener onPageClickListener) {
        this.onPageClickListener = onPageClickListener;
    }

    private void setViewPagerDuration() {
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            field.set(viewPager, new Scroller(context, new AccelerateInterpolator()) {
                @Override
                public void startScroll(int startX, int startY, int dx, int dy, int duration) {
                    super.startScroll(startX, startY, dx, dy, scrollTime);
                }
            });
        } catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    private class BannerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position % images.length;
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(images[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setOnClickListener(BannerView.this);
            container.addView(imageView);
            return imageView;
        }

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

最后

再次感谢大神的文章
如德芙般丝滑的ViewPager轮播
受益匪浅
如有错误，请各位大神指出。