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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容