Git傳送門
Android Kotlin基于ViewPage2和ViewBinding的輕量級(jí)BannerView晓锻,功能全面,易定制擴(kuò)展
具體使用如下所示:
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. 布局文件中聲明(更多屬性說(shuō)明詳見(jiàn) #自定義屬性說(shuō)明)
<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是兩個(gè)字符串的實(shí)體類)
// 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 = "")
)
//加載網(wǎng)絡(luò)圖片
bannerView1.setData(dataList, dataList.map { it.displayText }) { itemBinding, data ->
Glide.with(this).load(data.imageUrl).into(itemBinding.root)
itemBinding.root.setOnClickListener {
// 點(diǎn)擊輪播圖事件
}
}
好了,嘗試運(yùn)行代碼,即可呈現(xiàn)輪播圖惊来,簡(jiǎn)單明了,具體的API方法和屬性放在下面??
//設(shè)置Banner數(shù)據(jù)躁锁,可完全自定義Banner Item布局,默認(rèn)使用ItemBannerImageBinding绪钥,
fun <VB: ViewBinding, M> setData(dataList: List<M>, displayTextList: List<String>? = null,
itemBinding: KClass<VB>, bind: (VB, M) -> Unit)
//設(shè)置自動(dòng)播放開(kāi)關(guān)
fun setAutoplay(autoplay: Boolean)
//設(shè)置跳轉(zhuǎn)指定Item
fun setCurrentItem(item: Int)}
//設(shè)置是否允許用戶滑動(dòng)
fun setAllowUserScrollable(scrollable: Boolean) }
//設(shè)置ViewPage2的overScrollMode
fun setPageOverScrollMode(overScrollMode: Int)
//添加ViewPage2的OnPageChangeCallback
fun addOnPageChangeCallback(@NonNull callback: ViewPager2.OnPageChangeCallback)
//移除ViewPage2的OnPageChangeCallback
fun removeOnPageChangeCallback(@NonNull callback: ViewPager2.OnPageChangeCallback)
//設(shè)置自定義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>
<!-- 指示器左內(nèi)邊距 -->
<attr name="indicatorPaddingStart" format="dimension" />
<!-- 指示器右內(nèi)邊距 -->
<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" />
<!-- 是否是數(shù)字指示器 -->
<attr name="isNumberIndicator" format="boolean" />
<!-- 數(shù)字指示器文字顏色 -->
<attr name="numberIndicatorTextColor" format="reference|color" />
<!-- 數(shù)字指示器文字大小 -->
<attr name="numberIndicatorTextSize" format="dimension" />
<!-- 是否開(kāi)啟自動(dòng)輪播 -->
<attr name="autoplay" format="boolean" />
<!-- 是否開(kāi)啟循環(huán)播放 -->
<attr name="loopPlay" format="boolean" />
<!-- 自動(dòng)輪播的時(shí)間間隔 -->
<attr name="autoplayInterval" format="integer" />
<!-- 頁(yè)碼切換過(guò)程的時(shí)間長(zhǎng)度 -->
<attr name="pageChangeDuration" format="integer" />
<attr name="pageLimit" format="integer" />
<!-- 頁(yè)面區(qū)域距離 BannerView 頂部的距離 -->
<attr name="pagePaddingTop" format="dimension" />
<!-- 頁(yè)面區(qū)域距離 BannerView 底部的距離 -->
<attr name="pagePaddingBottom" format="dimension" />
<!-- 頁(yè)面區(qū)域距離 BannerView 左邊的距離 -->
<attr name="pagePaddingStart" format="dimension" />
<!-- 頁(yè)面區(qū)域距離 BannerView 右邊 的距離 -->
<attr name="pagePaddingEnd" format="dimension" />
<!-- 是否顯示文本 -->
<attr name="showDisplayText" format="boolean" />
<!-- 文本顏色 -->
<attr name="displayTextColor" format="reference|color" />
<!-- 文本大小 -->
<attr name="displayTextSize" format="dimension" />
<!-- 文本最多顯示行數(shù) -->
<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" />
<!-- 文本相對(duì)于父布局的位置 -->
<attr name="displayTextLayoutGravity" format="integer">
<flag name="top" value="0x30" />
<flag name="bottom" value="0x50" />
<flag name="center_vertical" value="0x10" />
</attr>
<!-- 文本內(nèi)部的位置 -->
<attr name="displayTextGravity" format="integer">
<flag name="left" value="0x03" />
<flag name="right" value="0x05" />
<flag name="center_horizontal" value="0x01" />
</attr>
</declare-styleable>