XBanner使用保姆级教学（AndroidX环境下）

起因

最近在练习使用Kotlin，调用了玩安卓的API，其中一个功能是实现首页的banner效果，开始我准备使用了Banner来完成，但不知道什么情况，我的Banner一直导入不成功，在查找资料的过程中发现了XBanner这一开源项目，研究后发现效果很不错，下面是使用的过程。

一、XBanner介绍

XBanner支持图片无限轮播，支持AndroidX、自定义指示点、显示提示文字、切换动画、自定义布局，一屏多显、视频图片混合轮播等功能，它的GitHub地址如下：点我进入XBanner，但由于GitHub不太稳定，无法进入的小伙伴可以看一下我转载的：XBanner项目详情页转载。

二、XBanner使用

导入和使用的过程其实在上面的文章都有描述，强烈建议在阅读下文时先去看一下上面的详情页，有能力的朋友也可以直接按照上面的文章中的步骤进行，我在下面的步骤会着重介绍一些容易踩得坑和一些使用技巧。

1. 导入依赖

第一步我们需要添加导入依赖的仓库位置：

//低版本Android studio适用，加入到project下的build.gradle文件中
allprojects {
     repositories {
		...
		maven { url 'https://jitpack.io' }
     }
}

第一个坑：上述的添加代码只能在低版本的Android studio中使用，在升级到Arctic Fox（2020.3.1）版本后需要将下面的代码添加到settings.gradle文件中

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        //注意，只加这一句，要看清加入的位置
        maven { url 'https://jitpack.io' }

    }
}

上述步骤完成后，就可以正常的添加依赖了，在module下的build.gradle文件中加入下面的代码

dependencies {

    //普通版本依赖
    implementation 'com.github.xiaohaibin:XBanner:1.8.9'
    //androidX 版本使用下面的依赖
    implementation 'com.github.xiaohaibin:XBanner:androidx_v1.2.6'
}

至此导包完成，可以在layout目录下的xml资源中输入如下代码检验

<com.stx.xhb.androidx.XBanner
        android:id="@+id/xb_home_banner"
        android:layout_width="match_parent"
        android:layout_height="230dp"/>

2.xml中的使用
首先我们需要看一下XBanner都有哪些属性

根据上述的属性，我们很容易自定义一个好看的Banner，代码如下：

<com.stx.xhb.androidx.XBanner
        android:id="@+id/xb_home_banner"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        app:AutoPlayTime="3000"
        app:isAutoPlay="false"
        app:isClipChildrenMode="true"
        app:isClipChildrenModeLessThree="true"
        app:isHandLoop="true"
        app:isShowIndicatorOnlyOne="true"
        app:isShowNumberIndicator="false"
        app:isShowTips="true"
        app:layout_constraintTop_toBottomOf="@id/ll_home_title"
        app:pageChangeDuration="800"
        app:pointsContainerBackground="#44aaaaaa"
        app:pointsPosition="RIGHT"
        app:tipTextSize="12sp" />

借此机会，我们也可以先看一下这个Banner最终的效果

3.代码中使用
首先是常规的两件套，创建对象和赋值

//java版
private XBanner mBanner;

mBanner = findViewById(R.id.xb_home_banner);

//kotlin版
private lateinit var banner: XBanner

banner = findViewById(R.id.xb_home_banner)

接下来如果我们是加载本地图片，可以使用XBanner提供的LocalImageInfo来实现，如下：

	List<LocalImageInfo> data = new ArrayList<>();
    data.add(new LocalImageInfo(R.drawable.banner_placeholder));
    data.add(new LocalImageInfo(R.drawable.banner_placeholder));
    data.add(new LocalImageInfo(R.drawable.banner_placeholder));
    data.add(new LocalImageInfo(R.drawable.banner_placeholder));
       

如果是网络请求需要的实体类的话，我们需要给banner传入轮播图数据，我们需要先创建一个类来继承接口（别问为什么，问就是作者要求的 bushi ）

//这是我按照玩安卓的接口返回的数据写的kotlin版的实体类，
//核心代码是实现BaseBannerInfo接口的getXBannerUrl()和getXBannerTitle()方法，
//把图片地址和标题传入
class BannerDataBean(
    desc: String,
    id: Int,
    imagePath: String,
    isVisible: Int,
    order: Int,
    title: String,
    type: Int,
    url: String
) : BaseBannerInfo {
    val desc = desc
    val id = id
    private val imagePath = imagePath
    val isVisible = isVisible
    val order = order
    private val title = title
    val type = type
    val url = url
    override fun getXBannerUrl(): Any {
        return imagePath
    }

    override fun getXBannerTitle(): String {
        return title
    }

}

//随手写的Java实体类，只保留了最核心的部分，其他网络请求的字段可以根据自己的需要添加
public static class EntryBean implements BaseBannerInfo {
            private String title;
            private String imageUrl;

            @Override
            public String getXBannerUrl() {
                return imageUrl;
            }

            @Override
            public String getXBannerTitle() {
                return title;
            }

           
        }

搞定实体类后，还有最后两步，注意，如果是加载本地图片，可以直接继续进行，如果是网络请求，需要在请求返回的响应中操作

首先要使用XBanner的setBannerData()，把上面准备好的data注入进去如下：

//加载本地的data，Java kotlin一致
mBanner.setBannerData(data);

第二个坑：在网络请求加载数据的时候，需要重新设置XBanner是否自动播放等等，完整的代码应该如下：

//刷新数据之后，需要重新设置是否支持自动轮播
mXBanner.setAutoPlayAble(data.size() > 1);
//设置模式是否为一屏多页（可选）
mXBanner.setIsClipChildrenMode(true);
mXBanner.setBannerData(data);
//设置轮播的动画，默认情况下一屏多页左右的图片不会缩放，更改动画可以改变轮播的效果，
//Transformer还有很多效果，感兴趣的朋友可以自行尝试
mXBanner.setPageTransformer(Transformer.Scale);

到这一步我们已经完成了注入数据，接着是最后一步，加载图片,我们可以选择自己喜欢的框架进行这一步，我这里采用Glide，在module下的build.gradle文件添加依赖：

implementation 'com.github.bumptech.glide:glide:4.13.2'

然后就是在代码中使用XBanner的loadImage()方法来加载准备好的图片

//Java版
banner.loadImage(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
            	//返回的图片路径为Object类型，你只需要强转成你传输的类型就行，切记不要胡乱强转！
            	//这里给的是加载上面的网络请求返回的数据
               EntryBean bean = ((EntryBean)model); 
               //本地请求请把EntryBean 换为 LocalImageInfo
               Glide.with(ListViewActivity.this).load(bean.getXBannerUrl()).placeholder(R.drawable.default_image).error(R.drawable.default_image).into((ImageView) view);
            }
        });

//kotlin版本，_为kotlin的省略参数的写法
banner.loadImage { _, model, view, _ ->
                        val bean = model as BannerDataBean
                        Glide.with(this@HomeActivity).load(bean.xBannerUrl)
                            .into(view as ImageView)
                    }

走到这里，我们就基本实现了自己的XBanner，当然，XBanner的功能远不止这些，除了上述的步骤，XBanner还提供了点击事件监听器setOnItemClickListener，自定义Banner，多布局使用等等实用的方法，值得后续继续研究。

此外，还有一个小技巧是在使用 XBanner 的 activity 或 fragment 的 onResume() 中添加开启轮播的方法，在 onStop() 添加关闭轮播的方法，可以有效提高性能，如下：

//kotlin版本，Java与其类似
	override fun onResume() {
        super.onResume()
        banner.startAutoPlay()
    }

    override fun onStop() {
        super.onStop()
        banner.stopAutoPlay()
    }

总结

对于XBanner的使用介绍就是这些了，有问题的朋友可以直接下载XBanner的demo来继续学习，官方的demo地址如下 点我进入XBanner的Gthub页面下载，如果GitHub连接不稳定，也可以下载我上传的文件 点我下载XBannerdemo