foreword

This issue introduces an easy-to-use carousel image for Android. This is an excellent open source library on github. Today I will take you to learn the basic usage of this open source library.

First on the demo video:

QQ video 20230618211556

1. How to introduce

First, let's import the dependency of this carousel into our project:

implementation 'com.youth.banner:banner:1.4.10'

2. Use steps

1. We first introduce the layout in the xml file, set the style and size we like, and I will give an example below:

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        custom:cardCornerRadius="10dp"
        >

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        custom:indicator_height="5dp"
        custom:indicator_margin="5dp"
        custom:indicator_width="5dp"
        custom:title_height="20dp"
        custom:title_textcolor="@color/white"
        custom:title_textsize="16sp"/>
    </com.google.android.material.card.MaterialCardView>

A brief explanation: I use MaterialCardView as the outer layout of the banner, because it is more convenient to set the rounded corners of the card, so I adopted this layout.

2. Then we need to set the image resource and style of banner in actvity or fragment.

    private void initPlayer() {
        //初始化图片数据
        List images = new ArrayList();
        images.add(R.drawable.b1);
        images.add(R.drawable.b2);
        images.add(R.drawable.b3);

        //初始化标题数据
        List titles = new ArrayList();
        titles.add("线下");
        titles.add("线上");
        titles.add("签到");


        //设置图片加载器
        banner.setImageLoader(new MyImageLoader());
        //设置图片集合
        banner.setImages(images);
        //设置标题集合（当banner样式有显示title时）
        banner.setBannerTitles(titles);
        //设置轮播的动画效果 ZoomOutSlide
        banner.setBannerAnimation(Transformer.DepthPage);
        //设置自动轮播，默认为true
        banner.isAutoPlay(true);
        //设置轮播时间（设置2.5秒切换下一张图片）
        banner.setDelayTime(2000);
        //设置banner显示样式（带标题的样式）
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置指示器位置（当banner模式中有指示器时）
        banner.setIndicatorGravity(BannerConfig.RIGHT);
        //增加监听事件
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {

            }
        });
        //banner设置方法全部调用完毕时最后调用
        banner.start();
    }

You can clearly see that the comments for each step in the code are written in more detail and are some basic usages. I hope you can learn something.

Summarize

What I share this time is an implementation method of the Android carousel map, I hope everyone can gain something.

Android: Get started quickly with a beautiful and simple carousel