起因
最近在练习使用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都有哪些属性
属性名 | 属性说明 | 属性值 |
---|---|---|
isAutoPlay | 是否支持自动轮播 | boolean类型,默认为true |
isTipsMarquee | 是否支持提示性文字跑马灯效果 | boolean类型,默认为false |
AutoPlayTime | 图片轮播时间间隔 | int值,默认为5s |
pointNormal | 指示器未选中时状态点 | drawable,不设置的话为默认状态点 |
pointSelect | 指示器选中时状态点 | drawable,不设置的话为默认状态点 |
pointsVisibility | 是否显示指示器 | boolean类型,默认为true |
pointsPosition | 指示器显示位置 | LEFT、CENTER、RIGHT类型,默认为CENTER |
pointsContainerBackground | 指示器背景 | 可自定义设置指示器背景 |
pointContainerPosition | 指示器容器显示位置 | TOP、BOTTOM类型,默认为BOTTOM |
pointContainerLeftRightPadding | 指示点容器左右内间距 | dimension,默认为10dp |
pointTopBottomPadding | 指示点上下内间距 | dimension,默认为6dp |
pointLeftRightPadding | 指示点左右内间距 | dimension,默认为3dp |
tipTextColor | 提示文案的文字颜色 | reference |
tipTextSize | 提示文案的文字大小 | dimension,默认为10dp |
isShowNumberIndicator | 是否显示数字指示器 | boolean,默认为false不显示 |
numberIndicatorBacgroud | 数字指示器背景 | reference |
isShowIndicatorOnlyOne | 当只有一张图片的时候是否显示指示点 | boolean,默认为false,不显示 |
isShowTips | 是否展示文字 | boolean,默认为false,不显示 |
pageChangeDuration | 图片切换速度 | int值,默认为1000ms |
isHandLoop | 是否支持手动无限循环切换图片 | boolean类型,默认为false |
placeholderDrawable | 设置整体轮播框架占位图 | reference |
isClipChildrenMode | 是否开启一屏显示多个模式 | boolean类型,默认为false 默认不开启 |
clipChildrenLeftMargin | 一屏显示多个左间距 | dimension ,默认为30dp |
clipChildrenRightMargin | 一屏显示多个右间距 | dimension ,默认为30dp |
clipChildrenTopBottomMargin | 一屏显示多个上下间距 | dimension ,默认为30dp |
viewpagerMargin | viewpager页面间距 | dimension ,默认为10dp |
isClipChildrenModeLessThree | 少于三张是否支持一屏多显模式 | boolean类型,默认为false 默认不开启 |
bannerBottomMargin | banner轮播区域底部margin,可设置指示器距离轮播图的间距 | dimension ,默认为0dp |
scaleType | 设置占位图缩放类型 | scaleType类型 |
showIndicatorInCenter | 设一屏多显模式下 指示器是否显示在中间图片位置,默认显示中间 | boolean类型 |
isClickSide | 一屏多显模式下 是否支持点击侧边切换图片,默认开启 | boolean类型 |
根据上述的属性,我们很容易自定义一个好看的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