国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Android 滑動條、Slider、Seekbar深度自定義

這篇具有很好參考價值的文章主要介紹了Android 滑動條、Slider、Seekbar深度自定義。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

android滑動條,android,java,kotlin

為了更好的滿足日常開發(fā)中對Slider控件的各種需要,以下我們來看下基于nifty-slider來定制我們所需的各種功能及交互效果

一、 功能支持

  • 支持滑動條起始值結束值的自定義

  • 支持滑動條指定步長以實現(xiàn)類似刻度的功能

  • 支持對滑塊的自定義以添加光環(huán)效果、滑塊形狀,滑塊投影、滑塊邊框、滑塊內文本等定義

  • 支持使用任意圖像對滑塊進行修改

  • 支持對滑軌的起始結束位置添加圖標或文本

  • 滑塊支持使用Lottie Animation

  • 支持滑動過程對滑塊、滑軌的狀態(tài)顏色高度等屬性添加交互動畫

  • 支持對控件的各個零部件進行深度的定制

二、 具體效果實現(xiàn)


1. Material Design 3 樣式

android滑動條,android,java,kotlin

此樣式只需要定義好滑塊、滑軌的狀態(tài)顏色即可

<com.litao.slider.NiftySlider
        android:id="@+id/nifty_slider"
        android:layout_width="match_parent"
        android:layout_height="148dp"
        android:padding="16dp"
        android:value="50"
        android:valueFrom="0"
        android:valueTo="100"
        app:trackColor="@color/m3_demo_track_color"
        app:trackColorInactive="@color/m3_demo_track_inactive_color"
        app:thumbColor="@color/m3_demo_thumb_color"
        app:thumbShadowColor="@color/white"
        app:haloColor="@color/m3_demo_halo_color"/>

2. 微信閱讀中使用的Slider樣式

android滑動條,android,java,kotlin

此樣式我們需要使用到一個自定義效果ITEffect,定義好相關屬性后,然后給我們的Slider添加此效果即可

val customEffect = ITEffect(this).apply {
    startText = "大"
    endText = "小"
    startTextSize = 12f.dp
    endTextSize = 12f.dp
    startTintList = ColorStateList.valueOf(iconTintColor)
    endTintList = ColorStateList.valueOf(iconTintColor)
    startPadding = 12.dp
    endPadding = 12.dp
}


niftySlider3.apply {
    effect = customEffect
    setTrackTintList(ColorStateList.valueOf(activeTrackColor))
    setTrackInactiveTintList(ColorStateList.valueOf(inactiveTrackColor))
}

要記得添加thumbWithinTrackBounds=ture屬性,以保證我們的滑塊在滑軌內部,默認情況是以滑塊中心為基準點,滑動到起始和結束位置時滑塊會超出滑軌

<com.litao.slider.NiftySlider
        ...
        android:value="22"
        android:valueFrom="16"
        android:valueTo="28"
        app:trackHeight="36dp"
        app:thumbRadius="18dp"
        app:thumbTextSize="12sp"
        app:thumbText="邊距"
        android:hapticFeedbackEnabled="true"
        app:thumbTextColor="@color/we_read_theme_color"
        app:thumbColor="@color/we_read_thumb_color"
        android:stepSize="1"
        app:thumbWithinTrackBounds="true"
        app:enableDrawHalo="false" />

3. 自定義滑塊樣式

android滑動條,android,java,kotlin

這個只需要直接指定我們想要的圖像Res ID即可,像下面這樣,比較容易吧。

setThumbCustomDrawable(R.drawable.custom_thumb)

如果普通的圖像滿足不了的話我們還可以自己去實現(xiàn)Drawable來完成有著更為豐富的交互和效果的滑塊,像下面我們完成了一個嗶哩嗶哩視頻拖動條的效果,和上面相同只需要只需要調用setThumbCustomDrawable(myCustomDrawable)即可,可以看看到滑軌在滑動開始和結束后還有一個動畫效果,后面我們再詳細說明這部分

可以在 這里查看 BiliBiliDrawable的完整代碼

android滑動條,android,java,kotlin


4. 顏色選擇器

android滑動條,android,java,kotlin

我們可以使用ColorPickEffect來實現(xiàn)一個顏色選擇器,所選擇的顏色會在OnColorValueChangeListener回調中返回,然后對所需要的位置直接修改即可,如果默認的色值無法滿足也可以調用ColorPickEffect.updateColors方法來修改為我們想要的顏色數(shù)組


val colorEffect = ColorPickEffect(niftySlider)

colorEffect.colorValueChangeListener =
    ColorPickEffect.OnColorValueChangeListener { slider, color, fromUser ->
        //color changed
        colorText.setBackgroundColor(color)
        colorText.text = Utils.toHexColorString(color)

        niftySlider.setThumbShadowColor(color)
        niftySlider.setThumbStrokeColor(ColorStateList.valueOf(color))
    }

5. 抖音視頻滑動條樣式

android滑動條,android,java,kotlin

可以看到抖音的滑動條中是在滑動開始和結束有一個很自然的動畫的過度,這個效果我們也可以借助AnimationEffect來完成,定義好我們自己的動畫對象,添加開始與結束的相關屬性配置即可。在上面提到的嗶哩嗶哩的效果中我們也同時結合使用了該效果。

val animEffect = AnimationEffect(niftySlider).apply {
    srcTrackHeight = 3.dp
    srcThumbHeight = 6.dp
    srcThumbWidth = 6.dp
    srcThumbRadius = 3.dp
    srcThumbColor = thumbColor
    srcTrackColor = thumbTrackColor
    srcInactiveTrackColor = thumbInactiveColor

    targetTrackHeight = 12.dp
    targetThumbHeight = 16.dp
    targetThumbWidth = 8.dp
    targetThumbRadius = 5.dp
    targetThumbColor = Color.WHITE
    targetTrackColor = ColorUtils.setAlphaComponent(Color.WHITE, 0xDD)
    targetInactiveTrackColor = ColorUtils.setAlphaComponent(Color.WHITE, 0x33)

    animationListener = object : AnimationEffect.OnAnimationChangeListener {
        override fun onEnd(slider: NiftySlider) {
            //do something on animation end
        }
    }

    setInterpolator(FastOutLinearInInterpolator())
}

三、 定義我們自己的交互效果

從項目中可以看到包含了兩個模塊

  • nifty-slider : 滑動條的基礎功能
  • nifty-slider-effect : 用于深度定制滑動條、增強交互效果
  1. 使用nifty-slider-effect lib 繼承 BaseEffect
  2. 實現(xiàn)相關方法,開始我們的自定義之旅
    /** Called when a slider's touch event is being started */
    fun onStartTacking(slider: T)

    /** Called when a slider's touch event is being stopped */
    fun onStopTacking(slider: T)

    /** Called when the value of the slider changes  */
    fun onValueChanged(slider: T, value: Float, fromUser: Boolean)

    /** Called before draw inactive track . Return true if the interrupt default draw*/
    fun dispatchDrawInactiveTrackBefore(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float): Boolean
    /** Called after draw inactive track */
    fun drawInactiveTrackAfter(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float)

    /** Called before draw active track . Return true if the interrupt default draw*/
    fun dispatchDrawTrackBefore(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float): Boolean
    /** Called after draw active track */
    fun drawTrackAfter(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float)

    /** Called before draw thumb drawable . Return true if the interrupt default draw*/
    fun dispatchDrawThumbBefore(slider: T, canvas: Canvas, cx: Float, cy: Float): Boolean
    /** Called after draw thumb drawable */
    fun drawThumbAfter(slider: T, canvas: Canvas, cx: Float, cy: Float)
  1. 挑選合適的方法,例如dispatchDrawTrackBefore 是在繪制激活狀態(tài)的滑軌之前調用,返回true表示由我們來接管繪制,需要控件再進行此部件的繪制
  2. 下面我們結合Lottie Animation來定制一個有動畫效果的滑塊,首先引入lottie最新版本,下面我們需要用到其中的LottieDrawable
 implementation 'com.airbnb.android:lottie:6.0.0'

5.完整的效果代碼

class LottieAnimationEffect(private val slider: NiftySlider) : BaseEffect() {

    var animDrawable: LottieDrawable

    private var isAutoLoopMode = false


    init {
        slider.valueFrom = 0f
        slider.valueTo = 1f


        animDrawable = LottieDrawable().apply {
            enableMergePathsForKitKatAndAbove(true)
            callback = slider
            repeatCount = LottieDrawable.INFINITE
            setMinAndMaxProgress(0f,1f)
            addAnimatorUpdateListener {
                slider.invalidate()
            }
            progress = slider.value
        }

        slider.setThumbCustomDrawable(animDrawable)
    }


    override fun onValueChanged(slider: NiftySlider, value: Float, fromUser: Boolean) {
        super.onValueChanged(slider, value, fromUser)
        if (!isAutoLoopMode) {
            animDrawable.progress = value
        }
    }


    fun setAnimation(assetName: String) {
        val result: LottieResult<LottieComposition> =
            LottieCompositionFactory.fromAssetSync(slider.context.applicationContext, assetName)
        animDrawable.composition = result.value
    }


    fun setAutoLoopMode(isLoop: Boolean){
        if (isLoop == isAutoLoopMode){
            return
        }

        this.isAutoLoopMode = isLoop

        if (isLoop){
            animDrawable.start()
        }else{
            animDrawable.stop()
            animDrawable.progress = slider.value
        }
    }
}

6.這樣就完成了一個簡單的自定義效果,我們來看下效果。
android滑動條,android,java,kotlin

四、 Demo 下載

Demo APK 下載

五、 結束

希望使用這一個控件能夠滿足你項目中對slider的所有要求,滑動浮窗、區(qū)間選擇等功能還在開發(fā)中,希望后續(xù)能夠提供更全面的更細致的方法及回調來滿足你的定制需求。我也會不斷的添加各種交互效果盡量涵蓋當前所有主流應用中的效果。

如當前無法滿足你的需求可以提交 Issues
如你自定義了一個很棒的效果也可以提交PR

如果覺得有幫助就送上一個Star吧,為作者提供更多動力文章來源地址http://www.zghlxwxcb.cn/news/detail-521689.html

完整項目文檔:查看
完整項目地址:查看

到了這里,關于Android 滑動條、Slider、Seekbar深度自定義的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • Android Kotlin Java 自定義日歷控件 CalendarView ,支持單選,多選,按星期選,跨月份日期范圍選擇,樣式設置,設置不可選日期,設置只可選日期

    Android Kotlin Java 自定義日歷控件 CalendarView ,支持單選,多選,按星期選,跨月份日期范圍選擇,樣式設置,設置不可選日期,設置只可選日期

    https://github.com/hdev0225/CalendarView CalendarView 使用kotlin語言開發(fā),支持單選,多選,按星期選,跨月份日期范圍選擇,樣式設置,設置不可選日期,設置只可選日期 設置不可選擇日期,設置只可選擇某些日期 AS 版本: Android Studio Dolphin | 2021.3.1 Android Gradle Plugin Version: 7.3.0 Gradle

    2024年02月09日
    瀏覽(92)
  • Android SeekBar 進度條圓角

    Android SeekBar 進度條圓角

    先看下效果圖: 之前: 優(yōu)化后: 之前的不是圓角是clip切割導致的 全代碼: bg_ps_seek_bar.xml bg_ps_progress_bar.xml 參考文章:android ProgressBar 進度條的進度兩端是圓角的方法 - 蓼藍的夢想 - 博客園 (cnblogs.com)

    2024年01月25日
    瀏覽(18)
  • Android 之 SeekBar (拖動條)

    Android 之 SeekBar (拖動條)

    本節(jié)我們繼續(xù)來學習Android的基本UI控件中的拖動條——SeekBar,相信大家對他并不陌生,最常見的 地方就是音樂播放器或者視頻播放器了,音量控制或者播放進度控制,都用到了這個SeekBar,我們 先來看看SeekBar的類結構,來到官方文檔:SeekBar 嘿嘿,這玩意是ProgressBar的子類耶

    2024年02月15日
    瀏覽(18)
  • Android SeekBar使用避坑指南

    Android SeekBar使用避坑指南

    SeekBar是Android原生UI組件,可以用來調節(jié)進度,廣泛應用于音樂、視頻進度展示調控、音量、亮度調節(jié)等功能里。 SeekBar的使用很簡單,這里就不再介紹了,本文著重介紹一下作者最近在使用SeekBar遇到的幾個坑,希望大家以后可以避免。 如圖,如何去實現(xiàn)這樣一個可拖動進度

    2024年02月07日
    瀏覽(89)
  • Android進階之SeekBar動態(tài)顯示進度

    Android進階之SeekBar動態(tài)顯示進度

    SeekBar 在開發(fā)中并不陌生,默認的SeekBar是不顯示進度的,當然用吐司或者文案在旁邊實時顯示也是可以的,那能不能移動的時候才顯示,默認不顯示呢,當然網(wǎng)上花哨的三方類太多了,但是我只是單純的想在SeekBar的基礎上去添加一個可以跟隨移動顯示的氣泡而已~ 先看一下效果:

    2024年02月13日
    瀏覽(18)
  • Android 基礎知識4-3.8 SeekBar(拖動條)詳解

    Android 基礎知識4-3.8 SeekBar(拖動條)詳解

    一、簡介 ? ? ? ? ?拖動條類似進度條,不同的是用戶可以控制,比如,應用程序中用戶可以對音效進行控制,這就可以使用拖動條來實現(xiàn)。由于拖動條可以被用戶控制,所以需要對其進行事件監(jiān)聽,這就需要實現(xiàn)SeekBar.onSeekBarChangeListener接口。在SeekBar中共需要監(jiān)聽3個事件,

    2024年02月08日
    瀏覽(44)
  • Android初學之android studio運行java/kotlin程序

    Android初學之android studio運行java/kotlin程序

    第一步驟: File — New — New Module ,然后彈出一個框,(左邊)選擇 Java or Kotlin Library ,(右邊)編輯自己的圖書館名、包名、類名,選擇 Java 一個語言,然后 Finish 如下圖: 然后,就可以看見我新建的 java Library 了,如下圖: 第二步驟:馬上寫個測試程序 看看能不能運行

    2024年02月11日
    瀏覽(19)
  • Android實戰(zhàn)基礎 - Java、Kotlin 代碼互轉

    Android實戰(zhàn)基礎 - Java、Kotlin 代碼互轉

    在Android現(xiàn)階段,Kotlin已經成為普遍性使用的語言,而在其使用階段中Java和Kotlin的混用很常見,為了便于開發(fā),我們需要掌握Java、Kotlin文件的轉換 這應該是我以前剛學Kotlin時就想記錄的一篇blog,沒想到隔了這么久才進行記錄(嗯… 主要這倆年好像有點忙…) 個人建議:正常

    2024年02月11日
    瀏覽(22)
  • Android Glide自定義AppCompatImageView切分成若干小格子,每個小格子onDraw繪制Bitmap,Kotlin(1)

    ? 垂直方向的RecyclerView,每行一個AppCompatImageView,每個AppCompatImageView被均勻切割成n個小格子, 每個小格子通過Glide加載出來Bitmap,然后onDraw繪制整行。 ? ? ? ? ? ? 上面每一行加載16個bitmap繪圖,速度很快,因為是canvas直接繪圖。但是,如果使用下文的方式: Android LinearLa

    2024年02月04日
    瀏覽(26)
  • Android Glide自定義AppGlideModule,讓Glide在app啟動后基于定制化GlideModule加載,kotlin

    Android Glide自定義AppGlideModule,讓Glide在app啟動后基于定制化GlideModule加載,kotlin ? project的build.gradle: ? ? app的build.gradle: ? ? ? 注解定義GlideModule ? 重新build項目。此后在項目代碼中使用:GlideApp.? 替代? Glide.? 加載load圖即可,自定義module就會觸發(fā)使用。 ? ? ? ? ? Android圖

    2024年02月13日
    瀏覽(25)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包