VP2原理及实践(下):实践篇，基于ViewPager2的Banner轮播库实现

Android

2024-02-14 08:50:31

VP2原理及实践（下）：实践篇——基于ViewPager2的Banner轮播库实现
上一篇里我们讨论了VP2的使用，以及一些疑难解答。本篇作为下篇，将带大家一起动手实践，基于VP2实现一个Banner轮播库。我们先看下效果图：

效果图

功能

库功能清单如下 ：

默认支持无限轮播、自动轮播、指示器、默认首次展示第几张图片
提供API设置是否开启无限轮播、是否开启自动轮播、指示器正常态/选中态图片、自动轮播间隔时间、滚动速度
提供API获取当前选中项

示例

基本使用

    //获取需要展示图片集合
    List<String> list = new ArrayList<>();
    list.add(String.valueOf(R.drawable.banner_1));
    list.add(String.valueOf(R.drawable.banner_2));
    list.add(String.valueOf(R.drawable.banner_3));
    list.add(String.valueOf(R.drawable.banner_4));
    list.add(String.valueOf(R.drawable.banner_5));
    list.add(String.valueOf(R.drawable.banner_6));
    //实例化自定义的轮播图
    ViewPager2Banner banner = new ViewPager2Banner(this);
    //添加要展示的图片
    banner.setImageList(list);
    //banner库默认会自动轮播，设置 setAutoPlay(boolean autoPlay)来决定是否自动轮播
    banner.setAutoPlay(true);
    //设置切换页面时长 setDuration(long duration)
    banner.setDuration(1000);
    //banner库默认支持无限轮播，设置 setInfiniteLoop(boolean infiniteLoop)来决定是否开启无限轮播
    banner.setInfiniteLoop(true);
    //设置页面指示器指示器选中态和普通态图片，banner库默认使用ImageView来展示指示器
    banner.setIndicatorSelectorRes(R.drawable.banner_dot_select, R.drawable.banner_dot_unselect);
    //添加广告位点击事件
    banner.setOnBannerItemClickListener(new OnBannerItemClickListener() {
        @Override
        public void onItemClick(int position) {
            Toast.makeText(BannerActivity.this, "点击了第"+position+"张图片", Toast.LENGTH_SHORT).show();
        }
    });
    //banner库提供一些设置图片的API，如 setImageList(List<String> imageList)、setImageLoader(ImageLoader imageLoader)、setBannerPageTransformer(ViewPager2.PageTransformer transformer)
    //轮播库默认提供样式，使用者也可以自定义样式
    setContentView(banner);

仿淘宝搜索栏上下轮播

    //获取需要展示图片集合
    List<String> list = new ArrayList<>();
    list.add(String.valueOf(R.drawable.banner_1));
    list.add(String.valueOf(R.drawable.banner_2));
    list.add(String.valueOf(R.drawable.banner_3));
    list.add(String.valueOf(R.drawable.banner_4));
    list.add(String.valueOf(R.drawable.banner_5));
    list.add(String.valueOf(R.drawable.banner_6));
    //实例化自定义的轮播图
    ViewPager2Banner banner = new ViewPager2Banner(this);
    //添加要展示的图片
    banner.setImageList(list);
    //banner库默认会自动轮播，设置 setAutoPlay(boolean autoPlay)来决定是否自动轮播
    banner.setAutoPlay(true);
    //设置切换页面时长 setDuration(long duration)
    banner.setDuration(1000);
    //banner库默认支持无限轮播，设置 setInfiniteLoop(boolean infiniteLoop)来决定是否开启无限轮播
    banner.setInfiniteLoop(true);
    //设置页面指示器指示器选中态和普通态图片，banner库默认使用ImageView来展示指示器
    banner.setIndicatorSelectorRes(R.drawable.banner_dot_select, R.drawable.banner_dot_unselect);
    //设置自定义指示器及指示器的父布局，自定义指示器需要实现 IBannerIndicator接口，banner库会自动处理指示器的选中切换
    banner.setIndicator(new MyIndicator(this), (ViewGroup) findViewById(R.id.indicator_view));
    //设置banner库的页面切换动画
    banner.setBannerPageTransformer(new ViewPager2.PageTransformer() {
        @Override
        public void transformPage(@NonNull View page, float position) {
            if (position < -1) {
                page.setAlpha(0);
            } else if (position <= 1) {
                float scaleFactor = Math.max(0.8f, 1 - Math.abs(position));
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setAlpha(scaleFactor);
            } else {
                page.setAlpha(0);
            }
        }
    });
    //添加广告位点击事件
    banner.setOnBannerItemClickListener(new OnBannerItemClickListener() {
        @Override
        public void onItemClick(int position) {
            Toast.makeText(BannerActivity.this, "点击了第"+position+"张图片", Toast.LENGTH_SHORT).show();
        }
    });
    //banner库提供一些设置图片的API，如 setImageList(List<String> imageList)、setImageLoader(ImageLoader imageLoader)、setBannerPageTransformer(ViewPager2.PageTransformer transformer)
    //轮播库默认提供样式，使用者也可以自定义样式
    setContentView(banner);