加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    Android轮播控件

    Download

    全新升级,基于ViewPager2实现无限轮播功能。可以自定义indicator,需自定义实现 Indicator 接口,内置了的IndicatorView,支持五种动画切换。支持传入RecyclerView.Adapter 即可实现无限轮播,支持任何ReyclerView.Apdater框架,集成使用请参考Demo。

    logo

    • 支持自动轮播
    • 支持一屏三页
    • 支持自定义Indicator
    • 支持自定义view
    • 支持垂直滚动
    • 支持任意RecyclerView.adapter
    • 目前就4个类,良好的代码封装,更多请参考代码实现。

    ViewPager2是androidx中的 还在使用support请使用ViewPager版本(持续维护...)banner请点击

    效果图

    点击下载 banner.apk 体验


    基本使用的功能,请下载apk体验更流畅
    tu1
    描述 普通样式 两边缩放
    一屏三页 img6 img7
    IndicatorView IndicatorStyle
    INDICATOR_CIRCLE INDICATOR_CIRCLE_RECT
    img1 img2
    INDICATOR_BEZIER INDICATOR_DASH
    img3 img4
    INDICATOR_BIG_CIRCLE
    img5

    注意:0.0.5版本开始,IndicatorView更新

    • INDICATOR_DASH:不再提供默认的长度,默认是没有长度的,一定要设置setIndicatorSelectedRatio属性,将圆点进行拉伸为矩形。

    • INDICATOR_BIG_CIRCLE:不再提供默认的Max圆,默认是一样大的,所以看起来没有效果,一定要设置indicatorSelectedRadius属性,控制选中的大小。

    效果图 1 2
    收集更多的效果 img12 img13
    Indicator查看simple代码 img14 img15
    img12 img12 img12
    img12 img12 ...

    版本更新内容点击查看

    使用步骤

    Step 1.依赖banner

    Gradle

        repositories {
            mavenCentral()
        }
    	
    dependencies{
        //已迁移至mavenCentral
        implementation 'io.github.zguop:pager2Banner:1.0.5'
    }

    或者引用本地lib

    compile project(':pager2banner')

    Step 2.xml

         <com.to.aboomy.pager2banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="150dp"/>

    Step 3.自定义RecyclerView.Adapter

    //自定义adapter
    public class ImageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> 
     
    //或者使用其他三方框架,都是支持的,如:BRVAH
    public class ImageAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
        public ImageAdapter() {
            super(R.layout.item_image);
        }
        @Override
        protected void convert(@NonNull BaseViewHolder helper, String item) {
            Glide.with(mContext)
                    .load(item)
                    .into((ImageView) helper.getView(R.id.img));
        }
    }

    Step 4.在页面中使用Banner

    
     @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            banner = findViewById(R.id.banner);
            
            //使用内置Indicator
            IndicatorView indicator = new IndicatorView(this)
                  .setIndicatorColor(Color.DKGRAY)
                  .setIndicatorSelectorColor(Color.WHITE);
            
            //创建adapter
         	 ImageAdapter adapter = new ImageAdapter();
         	 
         	 //传入RecyclerView.Adapter 即可实现无限轮播
             banner.setIndicator(indicator)
                  .setAdapter(adapter);
        }

    简单设置一屏三页效果

    
    //设置左右页面露出来的宽度及item与item之间的宽度
    .setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
    //内置ScaleInTransformer,设置切换缩放动画
    .setPageTransformer(true, new ScaleInTransformer())
        
    支持访魅族样式
    //单独设置OverlapSliderTransformer,项目里有,可以拷贝到项目中使用 kotlin实现的-。-
     .addPageTransformer(new OverlapSliderTransformer(banner.getViewPager2().getOrientation(), 0.25f, 0, 1,0))
    

    关于ViewPager切换动画

    pager2banner 只内置了 ScaleInTransformer ,这个比较常用。 demo里集成了以下两个ViewPager切换动画,请运行Sample查看动画效果,需要哪个拷贝到项目中用好了。

    ViewPagerTransforms

    MagicViewPager

    介绍一下 IndicatorView

    内置的indicator很强大,可以做到很多效果了,很灵活,可以运行demo尝试改变一下参数:

        .setIndicatorRatio(1f) //ratio,默认值是1 ,也就是说默认是圆点,根据这个值,值越大,拉伸越长,就成了矩形,小于1,就变扁了呗
        .setIndicatorRadius(2f) // radius 点的大小
        .setIndicatorSelectedRatio(3) 
        .setIndicatorSelectedRadius(2f)
        .setIndicatorStyle(IndicatorView.IndicatorStyle.INDICATOR_BIG_CIRCLE)       
    

    如何自定义Indicator

    /**
     * 可以实现该接口,自定义Indicator 可参考内置的{@link IndicatorView}
     */
    public interface Indicator {
    
        /**
         * 当数据初始化完成时调用
         *
         * @param pagerCount pager数量
         */
        void initIndicatorCount(int pagerCount);
    
        /**
         * 返回一个View,添加到banner中
         */
        View getView();
    
        /**
         * banner是一个RelativeLayout,设置banner在RelativeLayout中的位置,可以是任何地方
         */
        RelativeLayout.LayoutParams getParams();
        
        void onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels);
        
        void onPageSelected(int position);
        
        void onPageScrollStateChanged(int state);
    }
    
    //举个栗子
    public class IndicatorView extends View implements Indicator{
           
            @Override
            public void initIndicatorCount(int pagerCount) {
                this.pagerCount = pagerCount;
                setVisibility(pagerCount > 1 ? VISIBLE : GONE);
                requestLayout();
            }
        
            @Override
            public View getView() {
                return this;
            }
             /**
              * 控制Indicator在Banner中的位置,开发者自行实现
              */
            @Override
            public RelativeLayout.LayoutParams getParams() {
                if (params == null) {
                    params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                    params.addRule(RelativeLayout.CENTER_HORIZONTAL);
                    params.bottomMargin = dip2px(10);
                }
                return params;
            }
            /**
              * banner切换时同步回调的三个方法
              */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                selectedPage = position;
                offset = positionOffset;
                invalidate();
            }
            
            @Override
            public void onPageSelected(int position) {
            }
            
            @Override
            public void onPageScrollStateChanged(int state) {
            }
    }
    

    Banner提供的方法介绍,banner未提供任何自定义属性

    方法名 描述
    addPageTransformer(ViewPager2.PageTransformer transformer) 设置viewpager2的自定义动画,支持多个添加
    setOuterPageChangeListener(ViewPager2.OnPageChangeCallback listener) 设置viewpager2的滑动监听
    setAutoTurningTime(long autoTurningTime) 设置自动轮播时长
    setAutoPlay(boolean autoPlay) 设置是否自动轮播,大于1页可以轮播
    setIndicator(Indicator indicator) 设置indicator
    setIndicator(Indicator indicator, boolean attachToRoot) 设置indicator
    setAdapter(@Nullable RecyclerView.Adapter adapter) 加载数据,此方法时开始轮播的方法,请再最后调用
    setAdapter(@Nullable RecyclerView.Adapter adapter, int startPosition) 重载方法,设置轮播的起始位置
    isAutoPlay() 是否无限轮播
    getCurrentPager() 获取viewPager2当前位置
    startTurning() 开始轮播
    stopTurning() 停止轮播
    setPageMargin(int multiWidth, int pageMargin) 设置一屏多页
    setPageMargin(int leftWidth, int rightWidth, int pageMargin) 设置一屏多页,方法重载
    setOffscreenPageLimit(int limit) 同viewPager2用法
    setOrientation(@ViewPager2.Orientation int orientation) 设置viewpager2滑动方向
    ViewPager2 getViewPager2() 获取viewpager2
    RecyclerView.Adapter getAdapter() 获取apdater
    setPagerScrollDuration(long pagerScrollDuration) 设置viewpager2的切换时长

    内置IndicatorView使用方法介绍,没有提供任何自定义属性

    方法名 描述
    setIndicatorRadius(float indicatorRadius) 设置圆点半径
    setIndicatorSpacing(float indicatorSpacing) 设置圆点间距
    setIndicatorStyle(@IndicatorStyle int indicatorStyle) 设置圆点切换动画,内置五种切换动画,请参考Sample
    setIndicatorColor(@ColorInt int indicatorColor) 设置默认的圆点颜色
    setIndicatorSelectorColor(@ColorInt int indicatorSelectorColor) 设置选中的圆点颜色
    setParams(RelativeLayout.LayoutParams params) 设置IndicatorView在banner中的位置,默认底部居中,距离底部10dp,请参考Sample
    setIndicatorRatio(float indicatorRatio) 设置indicator比例,拉伸圆为矩形,设置越大,拉伸越长,默认1.0
    setIndicatorSelectedRadius(float indicatorSelectedRadius) 设置选中的圆角,默认和indicatorRadius值一致,可单独设置选中的点大小
    setIndicatorSelectedRatio(float indicatorSelectedRatio) 设置选中圆比例,拉伸圆为矩形,控制该比例,默认比例和indicatorRatio一致,默认值1.0

    总结

    xiexie ni de guāng gù ! 喜欢的朋友轻轻右上角赏个star,您的鼓励会给我持续更新的动力。

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/zguop/banner

    发行版本 16

    pager2bannerV1.0.5

    全部发行版

    贡献者 2

    开发语言

    • Java 100.0 %