Git传送门
Android Kotlin基于ViewPage2和ViewBinding的轻量级BannerView,功能全面,易定制扩展
具体使用如下所示:
1. 添加gradle依赖(version=1.0.3)
//Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
//Add it in your app build.gradle
dependencies {
implementation 'com.github.zicheng2019:banner-android:1.0.3'
}
2. 布局文件中声明(更多属性说明详见 #自定义属性说明)
<com.github.zicheng.banner.BannerView
android:id="@+id/bannerView1"
android:layout_width="match_parent"
android:layout_height="133dp"
app:autoplay="true"
app:loopPlay="true"
app:showIndicator="false"
app:showDisplayText="false"
app:indicatorGravity="bottom|right"
app:layout_constraintTop_toTopOf="parent" />
3. 主要逻辑代码(BannerInfo是两个字符串的实体类)
// imageUrl:轮播图地址
// displayText:轮播图底部的信息描述
val dataList = listOf(
BannerInfo(imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-aafc3b1feac3366b9dac301a85754cc1_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642820619&t=5b633c96c6ce01dc2a9c1ddd82ed3508",
displayText = ""),
BannerInfo(imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpaiwei3.com%2Fhtml%2Fgrjzkj%2Fupload%2Fimages%2F2019%2F01%2F17%2F80fcbe93fdbc4a9bb53ae1e9c36b5b5d.jpg&refer=http%3A%2F%2Fpaiwei3.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642820442&t=1762d734c4e30d0570b9da71ba300bc6",
displayText = "")
)
//加载网络图片
bannerView1.setData(dataList, dataList.map { it.displayText }) { itemBinding, data ->
Glide.with(this).load(data.imageUrl).into(itemBinding.root)
itemBinding.root.setOnClickListener {
// 点击轮播图事件
}
}
好了,尝试运行代码,即可呈现轮播图,简单明了,具体的API方法和属性放在下面👇
//设置Banner数据,可完全自定义Banner Item布局,默认使用ItemBannerImageBinding,
fun <VB: ViewBinding, M> setData(dataList: List<M>, displayTextList: List<String>? = null,
itemBinding: KClass<VB>, bind: (VB, M) -> Unit)
//设置自动播放开关
fun setAutoplay(autoplay: Boolean)
//设置跳转指定Item
fun setCurrentItem(item: Int)}
//设置是否允许用户滑动
fun setAllowUserScrollable(scrollable: Boolean) }
//设置ViewPage2的overScrollMode
fun setPageOverScrollMode(overScrollMode: Int)
//添加ViewPage2的OnPageChangeCallback
fun addOnPageChangeCallback(@NonNull callback: ViewPager2.OnPageChangeCallback)
//移除ViewPage2的OnPageChangeCallback
fun removeOnPageChangeCallback(@NonNull callback: ViewPager2.OnPageChangeCallback)
//设置自定义PageTransformer
fun setPageTransformer(@Nullable transformer: ViewPager2.PageTransformer)
<declare-styleable name="BannerView">
<!-- 是否显示指示器 -->
<attr name="showIndicator" format="boolean" />
<!-- 指示器背景 -->
<attr name="indicatorBackground" format="reference|color" />
<!-- 指示器 -->
<attr name="indicatorDrawable" format="reference" />
<!-- 指示器高度 -->
<attr name="indicatorHeight" format="dimension" />
<!-- 指示器间距 -->
<attr name="indicatorSpacing" format="dimension" />
<!-- 指示器的位置 -->
<attr name="indicatorGravity" format="integer">
<flag name="top" value="0x30" />
<flag name="bottom" value="0x50" />
<flag name="left" value="0x03" />
<flag name="right" value="0x05" />
<flag name="center_horizontal" value="0x01" />
</attr>
<!-- 指示器左内边距 -->
<attr name="indicatorPaddingStart" format="dimension" />
<!-- 指示器右内边距 -->
<attr name="indicatorPaddingEnd" format="dimension" />
<!-- 指示器左外边距 -->
<attr name="indicatorMarginStart" format="dimension" />
<!-- 指示器右外边距 -->
<attr name="indicatorMarginEnd" format="dimension" />
<!-- 指示器上外边距 -->
<attr name="indicatorMarginTop" format="dimension" />
<!-- 指示器下外边距 -->
<attr name="indicatorMarginBottom" format="dimension" />
<!-- 是否是数字指示器 -->
<attr name="isNumberIndicator" format="boolean" />
<!-- 数字指示器文字颜色 -->
<attr name="numberIndicatorTextColor" format="reference|color" />
<!-- 数字指示器文字大小 -->
<attr name="numberIndicatorTextSize" format="dimension" />
<!-- 是否开启自动轮播 -->
<attr name="autoplay" format="boolean" />
<!-- 是否开启循环播放 -->
<attr name="loopPlay" format="boolean" />
<!-- 自动轮播的时间间隔 -->
<attr name="autoplayInterval" format="integer" />
<!-- 页码切换过程的时间长度 -->
<attr name="pageChangeDuration" format="integer" />
<attr name="pageLimit" format="integer" />
<!-- 页面区域距离 BannerView 顶部的距离 -->
<attr name="pagePaddingTop" format="dimension" />
<!-- 页面区域距离 BannerView 底部的距离 -->
<attr name="pagePaddingBottom" format="dimension" />
<!-- 页面区域距离 BannerView 左边的距离 -->
<attr name="pagePaddingStart" format="dimension" />
<!-- 页面区域距离 BannerView 右边 的距离 -->
<attr name="pagePaddingEnd" format="dimension" />
<!-- 是否显示文本 -->
<attr name="showDisplayText" format="boolean" />
<!-- 文本颜色 -->
<attr name="displayTextColor" format="reference|color" />
<!-- 文本大小 -->
<attr name="displayTextSize" format="dimension" />
<!-- 文本最多显示行数 -->
<attr name="displayTextLines" format="integer" />
<!-- 文本style Default text typeface style. -->
<attr name="displayTextStyle" format="integer">
<flag name="normal" value="0" />
<flag name="bold" value="1" />
<flag name="italic" value="2" />
</attr>
<!-- 文本背景 -->
<attr name="displayTextBackground" format="reference|color" />
<!-- 文本背景高度 -->
<attr name="displayTextBgHeight" format="dimension" />
<attr name="displayTextMarginTop" format="dimension" />
<attr name="displayTextMarginBottom" format="dimension" />
<attr name="displayTextPaddingStart" format="dimension" />
<attr name="displayTextPaddingEnd" format="dimension" />
<!-- 文本相对于父布局的位置 -->
<attr name="displayTextLayoutGravity" format="integer">
<flag name="top" value="0x30" />
<flag name="bottom" value="0x50" />
<flag name="center_vertical" value="0x10" />
</attr>
<!-- 文本内部的位置 -->
<attr name="displayTextGravity" format="integer">
<flag name="left" value="0x03" />
<flag name="right" value="0x05" />
<flag name="center_horizontal" value="0x01" />
</attr>
</declare-styleable>