Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解
一、三方庫介紹
- 地址:https://github.com/youth5201314/banner
- 介紹:從學(xué)習(xí) Android 開始到現(xiàn)在工作兩年多一直在使用的 Android Banner 庫。個(gè)人認(rèn)為很好使用,不適合的場(chǎng)景也可以通過修改源碼來達(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)
}
(四)垂直指示器
測(cè)量:

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決Android Studio日志太長或滾動(dòng)太快問題
這篇文章主要介紹了解決Android Studio日志太長或滾動(dòng)太快問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Android仿微博個(gè)人詳情頁滾動(dòng)到頂部的實(shí)例代碼
這篇文章主要介紹了Android仿微博個(gè)人詳情頁滾動(dòng)到頂部的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒家,需要的朋友可以參考下2019-05-05
Android?XML數(shù)據(jù)解析要點(diǎn)介紹
這篇文章主要為大家介紹了Android?XML數(shù)據(jù)解析要點(diǎn)介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
Android TouchListener實(shí)現(xiàn)拖拽刪實(shí)例代碼
這篇文章主要介紹了Android TouchListener實(shí)現(xiàn)拖拽刪實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
Android實(shí)現(xiàn)簡易的柱狀圖和曲線圖表實(shí)例代碼
柱狀圖是統(tǒng)計(jì)圖表中經(jīng)常用到的一種圖表,比如降雨量之類的統(tǒng)計(jì)展示。這篇文章主要給大家介紹了關(guān)于利用Android如何實(shí)現(xiàn)簡易的柱狀圖和曲線圖表的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-12-12
Android 6.0動(dòng)態(tài)權(quán)限申請(qǐng)教程
本文主要介紹了Android 6.0動(dòng)態(tài)權(quán)限申請(qǐng)的教程,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Android Shader應(yīng)用開發(fā)之霓虹閃爍文字效果
這篇文章主要為大家詳細(xì)介紹了Android Shader應(yīng)用開發(fā)之霓虹閃爍文字效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07

