欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解

 更新時(shí)間:2022年10月26日 09:20:35   作者:Nicholas_hzf  
這篇文章主要介紹了Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

一、三方庫(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è)置圓角半徑為 30dp
  • app: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)文章

  • App中如何獲取gradle的配置信息

    App中如何獲取gradle的配置信息

    這篇文章主要給大家介紹了關(guān)于App中如何獲取gradle的配置信息的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • Android使用Notification實(shí)現(xiàn)通知功能

    Android使用Notification實(shí)現(xiàn)通知功能

    這篇文章主要為大家詳細(xì)介紹了Android使用Notification實(shí)現(xiàn)通知功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • Android 更新RecyclerView的好方法

    Android 更新RecyclerView的好方法

    在使用RecyclerView的時(shí)候不免要修改RecyclerView的數(shù)據(jù),使用notifyDataSetChanged()來(lái)刷新界面,但是當(dāng)數(shù)據(jù)多,而只是修改了一點(diǎn)的數(shù)據(jù),或者刷新比較頻繁,這樣就會(huì)導(dǎo)致界面卡頓,用戶(hù)交互特別不好,這時(shí)可以使用RecyclerView方法解決,具體實(shí)現(xiàn)代碼大家參考下本文吧
    2017-06-06
  • Android?MaterialAlertDialogBuilder修改按鈕屬性

    Android?MaterialAlertDialogBuilder修改按鈕屬性

    這篇文章主要介紹了Android?MaterialAlertDialogBuilder修改按鈕屬性實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • Android遞歸方式刪除某文件夾下的所有文件(.mp3文件等等)

    Android遞歸方式刪除某文件夾下的所有文件(.mp3文件等等)

    以刪除為例,當(dāng)然,對(duì)于遍歷某文件夾下的所有文件均可用這個(gè)方法。如搜索.mp3文件等,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈
    2013-06-06
  • Android 動(dòng)態(tài)添加view或item并獲取數(shù)據(jù)的實(shí)例

    Android 動(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-10
  • Kotlin原理詳析之拓展函數(shù)

    Kotlin原理詳析之拓展函數(shù)

    kotlin中的擴(kuò)展函數(shù),實(shí)際上是在自己的類(lèi)中添加了一個(gè)static final方法,將需要擴(kuò)展的類(lèi),在使用的時(shí)候作為第一個(gè)參數(shù)傳入方法中,然后使用,這篇文章主要給大家介紹了關(guān)于Kotlin原理詳析之拓展函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • Android RecyclerView的卡頓問(wèn)題的解決方法

    Android RecyclerView的卡頓問(wèn)題的解決方法

    本篇文章主要介紹了Android RecyclerView的卡頓問(wèn)題的解決方法,具有一定的參考價(jià)值,有興趣的可以了解一下。
    2017-04-04
  • Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫(kù)文件拷貝到安裝目錄的方法

    Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫(kù)文件拷貝到安裝目錄的方法

    這篇文章主要介紹了Android編程實(shí)現(xiàn)將壓縮數(shù)據(jù)庫(kù)文件拷貝到安裝目錄的方法,涉及Android處理壓縮文件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • android sdk安裝及開(kāi)發(fā)環(huán)境部署

    android sdk安裝及開(kāi)發(fā)環(huán)境部署

    本文給大家詳細(xì)講解了android sdk安裝方法以及android開(kāi)發(fā)環(huán)境部署方法,非常的細(xì)致全面,有需要的小伙伴務(wù)必詳細(xì)研究下。
    2015-11-11

最新評(píng)論