Android三方框架banner实现轮播图

最新推荐文章于 2025-04-02 09:04:00 发布

原创

最新推荐文章于 2025-04-02 09:04:00 发布 · 5.7k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#android #轮播图

Android三方框架banner实现轮播图

关于

关于

本篇使用的是基于viewpager2的一个开源banner，性能、生命周期都有保障，就是有一点小的功能需要我们自己去修改。本篇也是作为简易音乐博客系列之一。

效果图

在这里插入图片描述

第一步，添加引用

在工程build下添加仓库maven：

allprojects {
   
    repositories {
   
        google()
        jcenter()
        maven {
    url "https://s01.oss.sonatype.org/content/groups/public" }
    }
}

在项目build下添加banner和viewpager2的引用：

    implementation 'io.github.youth5201314:banner:2.2.2'
    implementation "androidx.viewpager2:viewpager2:1.0.0"

第二步，新增实体类及测试数据

public class DataBean implements Serializable {
   
    public String imageUrl;
    public String title;
    public String url;


    public DataBean(String imageUrl, String title) {
   
        this.imageUrl = imageUrl;
        this.title = title;

    }

    public void setImageUrl(String imageUrl) {
   
        this.imageUrl = imageUrl;
    }

    public String getUrl() {
   
        return url;
    }

    public void setUrl(String url) {
   
        this.url = url;
    }

    public void setTitle(String title) {
   
        this.title = title;
    }


    public String getImageUrl() {
   
        return imageUrl;
    }

    public String getTitle() {
   
        return title;
    }


    public static List<DataBean> getTestData() {
   
        List<DataBean> list = new ArrayList<>();
        list.add(new DataBean("https://dfzximg02.dftoutiao.com/news/20210401/20210401222253_acbd3f414dc150c4cf25d91dcac0cf36_1_mwpm_03201609.jpeg", "标题0" ));
        list.add(new DataBean("https://dfzximg02.dftoutiao.com/news/20210401/20210401222253_acbd3f414dc150c4cf25d91dcac0cf36_2_mwpm_03201609.jpeg", "标题1" ));
        list.add(new DataBean("https://dfzximg02.dftoutiao.com/news/20210401/20210401221040_d2957dc25d3878b4fdf0816289cde4fd_1_mwpm_03201609.png", "标题2"));
        list.add(new DataBean("http://cn.bing.com/th?id=OHR.FooledYa_EN-CN7497696381_1920x1080.jpg", "标题3"));
        list.add(new DataBean("https://dfzximg02.dftoutiao.com/news/20210401/20210401222006_3a2f89e1dbaa16f8a7f7754e00d8bf77_1_mwpm_03201609.jpeg", "标题4"));
        return list;
    }

}

第三步，添加banner实例控件，修改主界面代码

修改主界面布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=

最低0.47元/天解锁文章