Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解
一、三方庫介紹
- 地址:https://github.com/youth5201314/banner
- 介紹:從學(xué)習(xí) Android 開始到現(xiàn)在工作兩年多一直在使用的 Android Banner 庫。個(gè)人認(rèn)為很好使用,不適合的場景也可以通過修改源碼來達(dá)到目的
- 引入:
implementation 'io.github.youth5201314:banner:2.2.2'
二、效果展示

三、實(shí)現(xiàn)方案
(一)總體效果
Banner 垂直切換和圓角效果就依靠三方庫來實(shí)現(xiàn),垂直指示器 Banner 庫沒有現(xiàn)成的,所以就在它默認(rèn)的圓角指示器的基礎(chǔ)上改造了一下
(二)垂直切換與圓角效果
圓角效果:左上和右上為30度的圓角半徑,左下和右下為直角
app:banner_radius="30dp"
app:banner_round_top_left="true"
app:banner_round_top_right="true"
垂直切換
app:banner_orientation="vertical"
(三)垂直指示器
Banner 庫提供的默認(rèn)圓角指示器是橫向排列的,需要學(xué)習(xí)它的寫法,自定義一個(gè),詳情看下方的詳細(xì)實(shí)現(xiàn)講解中第四節(jié)垂直指示器
四、詳細(xì)實(shí)現(xiàn)講解
(一)布局文件
重點(diǎn)在于以下四行:
app:banner_radius="30dp"設(shè)置圓角半徑為 30dpapp:banner_round_top_left="true"開啟左上角圓角app:banner_round_top_right="true"開啟右上角圓角app:banner_orientation="vertical"垂直切換
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="300dp"
android:layout_height="400dp"
android:layout_marginTop="10dp"
app:banner_radius="30dp"
app:banner_round_top_left="true"
app:banner_round_top_right="true"
app:banner_orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.hzf.banner.CircleVerticalIndicator
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintTop_toTopOf="@id/banner"
app:layout_constraintBottom_toBottomOf="@id/banner"
app:layout_constraintStart_toEndOf="@id/banner" />(二)首頁 Banner 相關(guān)代碼
- 主要作用是: 給 Banner 指定適配器
- 綁定 Banner 和垂直指示器
- 為 Banner 和指示器設(shè)置一些基本參數(shù)
// 要輪播的圖片地址
val urls = mutableListOf(
R.mipmap.img1,
R.mipmap.img2,
R.mipmap.img3
)
// 垂直指示器
val indicator = findViewById<CircleVerticalIndicator>(R.id.indicator)
// Banner 基本設(shè)置
findViewById<Banner<Int,RoundedBannerAdapter>>(R.id.banner).apply {
setAdapter(RoundedBannerAdapter(urls)) // 設(shè)置圖片的適配器
addBannerLifecycleObserver(this@MainActivity) // 添加生命周期監(jiān)聽
setIndicator(indicator,false) // 設(shè)置指示器,false 表示指示器不放在 Banner 內(nèi)
setLoopTime(1500) // 輪播間隔時(shí)間
setIndicatorSpace(20) // 指示器圓圈之間的間隔
setIndicatorNormalWidth(12) // 未選中狀態(tài)下,指示器圓圈的直徑大小
setIndicatorSelectedWidth(12) // 選中狀態(tài)下,指示器圓圈的直徑大小
setIndicatorNormalColor(ContextCompat.getColor(this@MainActivity, R.color.black)) // 未選中狀態(tài)下,指示器圓圈的顏色
setIndicatorSelectedColor(ContextCompat.getColor(this@MainActivity, R.color.red)) // 選中狀態(tài)下,指示器圓圈的顏色
}
(三)Banner 適配器
class RoundedBannerAdapter(urls: MutableList<Int>) : BannerAdapter<Int, RoundedBannerAdapter.BannerViewHolder>(urls) {
override fun onCreateHolder(parent: ViewGroup?, viewType: Int): BannerViewHolder {
val imageView = ImageView(parent!!.context).apply {
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
scaleType = ImageView.ScaleType.CENTER_CROP
}
return BannerViewHolder(imageView)
}
override fun onBindView(holder: BannerViewHolder?, data: Int?, position: Int, size: Int) {
data?.let {
holder?.imageView?.setImageResource(it)
}
}
class BannerViewHolder(var imageView: ImageView) :
RecyclerView.ViewHolder(imageView)
}
(四)垂直指示器
測量:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val count = config.indicatorSize
if (count <= 1) {
return
}
mNormalRadius = config.normalWidth / 2
mSelectedRadius = config.selectedWidth / 2
// 考慮當(dāng)選中和默認(rèn)的大小不一樣的情況
maxRadius = mSelectedRadius.coerceAtLeast(mNormalRadius)
// 高度 = 間距 *(總數(shù)-1)+ 選中直徑 + 默認(rèn)直徑 *(總數(shù)-1)
val height =
(count - 1) * config.indicatorSpace + config.selectedWidth + config.normalWidth * (count - 1)
setMeasuredDimension(maxRadius * 2, height)
}繪制:

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val count = config.indicatorSize
if (count <= 1) {
return
}
var circleY = 0f
for (i in 0 until count) {
// 畫筆顏色
mPaint.color =
if (config.currentPosition == i) config.selectedColor else config.normalColor
// 圓的直徑
val circleDiameter =
if (config.currentPosition == i) config.selectedWidth else config.normalWidth
// 指示器圓圈半徑
val radius = if (config.currentPosition == i) mSelectedRadius else mNormalRadius
// 繪制圓
canvas.drawCircle(maxRadius.toFloat(),circleY + radius , radius.toFloat(), mPaint)
// 更新最小的 y 值:當(dāng)前的 y 加上當(dāng)前圓的直徑,加上間距
circleY += (circleDiameter + config.indicatorSpace).toFloat()
}
}五、代碼倉庫
GitHub 倉庫地址:https://github.com/NicholasHzf/RCBannerAndVerticalIndicator
借助成熟的三方庫,加以簡單的小改造,就滿足了需求,哈哈!
到此這篇關(guān)于Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解的文章就介紹到這了,更多相關(guān)Android Banner與垂直指示器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android使用Notification實(shí)現(xiàn)通知功能
這篇文章主要為大家詳細(xì)介紹了Android使用Notification實(shí)現(xiàn)通知功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
Android?MaterialAlertDialogBuilder修改按鈕屬性
這篇文章主要介紹了Android?MaterialAlertDialogBuilder修改按鈕屬性實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
Android遞歸方式刪除某文件夾下的所有文件(.mp3文件等等)
以刪除為例,當(dāng)然,對于遍歷某文件夾下的所有文件均可用這個(gè)方法。如搜索.mp3文件等,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
Android 動(dòng)態(tài)添加view或item并獲取數(shù)據(jù)的實(shí)例
下面小編就為大家?guī)硪黄狝ndroid 動(dòng)態(tài)添加view或item并獲取數(shù)據(jù)的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Android RecyclerView的卡頓問題的解決方法
本篇文章主要介紹了Android RecyclerView的卡頓問題的解決方法,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04
Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫文件拷貝到安裝目錄的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫文件拷貝到安裝目錄的方法,涉及Android處理壓縮文件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
android sdk安裝及開發(fā)環(huán)境部署
本文給大家詳細(xì)講解了android sdk安裝方法以及android開發(fā)環(huán)境部署方法,非常的細(xì)致全面,有需要的小伙伴務(wù)必詳細(xì)研究下。2015-11-11

