Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解
一、三方庫(kù)介紹
- 地址:https://github.com/youth5201314/banner
- 介紹:從學(xué)習(xí) Android 開(kāi)始到現(xiàn)在工作兩年多一直在使用的 Android Banner 庫(kù)。個(gè)人認(rèn)為很好使用,不適合的場(chǎng)景也可以通過(guò)修改源碼來(lái)達(dá)到目的
- 引入:
implementation 'io.github.youth5201314:banner:2.2.2'
二、效果展示
三、實(shí)現(xiàn)方案
(一)總體效果
Banner 垂直切換和圓角效果就依靠三方庫(kù)來(lái)實(shí)現(xiàn),垂直指示器 Banner 庫(kù)沒(méi)有現(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 庫(kù)提供的默認(rèn)圓角指示器是橫向排列的,需要學(xué)習(xí)它的寫(xiě)法,自定義一個(gè),詳情看下方的詳細(xì)實(shí)現(xiàn)講解中第四節(jié)垂直指示器
四、詳細(xì)實(shí)現(xiàn)講解
(一)布局文件
重點(diǎn)在于以下四行:
app:banner_radius="30dp"
設(shè)置圓角半徑為 30dpapp:banner_round_top_left="true"
開(kāi)啟左上角圓角app:banner_round_top_right="true"
開(kāi)啟右上角圓角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" />
(二)首頁(yè) 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)聽(tīng) 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) { // 畫(huà)筆顏色 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() } }
五、代碼倉(cāng)庫(kù)
GitHub 倉(cāng)庫(kù)地址:https://github.com/NicholasHzf/RCBannerAndVerticalIndicator
借助成熟的三方庫(kù),加以簡(jiǎn)單的小改造,就滿(mǎn)足了需求,哈哈!
到此這篇關(guān)于Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解的文章就介紹到這了,更多相關(guān)Android Banner與垂直指示器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android使用Notification實(shí)現(xiàn)通知功能
這篇文章主要為大家詳細(xì)介紹了Android使用Notification實(shí)現(xiàn)通知功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11Android?MaterialAlertDialogBuilder修改按鈕屬性
這篇文章主要介紹了Android?MaterialAlertDialogBuilder修改按鈕屬性實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android遞歸方式刪除某文件夾下的所有文件(.mp3文件等等)
以刪除為例,當(dāng)然,對(duì)于遍歷某文件夾下的所有文件均可用這個(gè)方法。如搜索.mp3文件等,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06Android 動(dòng)態(tài)添加view或item并獲取數(shù)據(jù)的實(shí)例
下面小編就為大家?guī)?lái)一篇Android 動(dòng)態(tài)添加view或item并獲取數(shù)據(jù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Android RecyclerView的卡頓問(wèn)題的解決方法
本篇文章主要介紹了Android RecyclerView的卡頓問(wèn)題的解決方法,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫(kù)文件拷貝到安裝目錄的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫(kù)文件拷貝到安裝目錄的方法,涉及Android處理壓縮文件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10android sdk安裝及開(kāi)發(fā)環(huán)境部署
本文給大家詳細(xì)講解了android sdk安裝方法以及android開(kāi)發(fā)環(huán)境部署方法,非常的細(xì)致全面,有需要的小伙伴務(wù)必詳細(xì)研究下。2015-11-11