Android Kotlin 古今中外最简单的轮播图Banner，几行代码实现随心变样式

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方法和属性放在下面👇

- 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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容