Android使用Banner框架实现轮播图

按照惯例，先看效果：

该banner实现了自动轮播、圆角矩形等小功能，具体看下面代码吧！

1. 添加banner依赖和glide(图片加载)依赖

implementation 'io.github.youth5201314:banner:2.2.2' // banner依赖
implementation 'com.github.bumptech.glide:glide:4.12.0' //glide加载网络图片依赖
1
2

2. 添加网络权限

在AndroidManifest.xml中：

1

3. 在layout中

1
2
3
4
5
6
7
8

4. 在java代码中

/**
     * 初始化轮播图
     */
    private void initBanner(){
        // 加载数据
        List imageList = new ArrayList();
        imageList.add("https://image14.m1905.cn/uploadfile/2018/0907/thumb_1_1380_460_20180907013518839623.jpg");
        imageList.add("https://image14.m1905.cn/uploadfile/2018/0906/thumb_1_1380_460_20180906040153529630.jpg");
        imageList.add("https://image13.m1905.cn/uploadfile/2018/0907/thumb_1_1380_460_20180907114844929630.jpg");

        // 注入数据
        binding.homeBanner.setAdapter(new BannerImageAdapter(imageList) {
            @Override
            public void onBindView(BannerImageHolder holder, String data, int position, int size) {
                Glide.with(holder.itemView)
                        .load(data)
                        .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))
                        .into(holder.imageView);
            }})
            .setIndicator(new RectangleIndicator(getContext()))
            .addBannerLifecycleObserver(this)
            .setOnBannerListener(
                    (OnBannerListener)(data, position) ->
                            Toast.makeText(getContext(), position+" "+data, Toast.LENGTH_SHORT).show()  // 添加点击事件
            );

        // 给banner添加圆角
        binding.homeBanner.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30);
            }
        });
        binding.homeBanner.setClipToOutline(true);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

附Kotlin版

kotlin版本我没有实现，是看的
banner含kotlin
有兴趣的自己调试一下，应该问题不大。

        banner.adapter = object : BannerImageAdapter(advertisements) {
            override fun onBindView(holder: BannerImageHolder, data: Advertising.AdvertisementsBean.AdvertisementListBean, position: Int, size: Int) { //图片加载自己实现
                Glide.with(holder.itemView)
                        .load(data.url)
                        .apply(RequestOptions.bitmapTransform(RoundedCorners(30)))
                        .into(holder.imageView)
            }
        }
        banner
                .setIndicator(RectangleIndicator(context))
                .addBannerLifecycleObserver(this)
                .setOnBannerListener(OnBannerListener { data: Advertising.AdvertisementsBean.AdvertisementListBean?, position: Int ->
                    logd("${data?.jumpUrl}")
                })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15