Android 滑动条、Slider、Seekbar深度自定义

这篇具有很好参考价值的文章主要介绍了Android 滑动条、Slider、Seekbar深度自定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

android滑动条,android,java,kotlin

为了更好的满足日常开发中对Slider控件的各种需要,以下我们来看下基于nifty-slider来定制我们所需的各种功能及交互效果

一、 功能支持

  • 支持滑动条起始值结束值的自定义

  • 支持滑动条指定步长以实现类似刻度的功能

  • 支持对滑块的自定义以添加光环效果、滑块形状,滑块投影、滑块边框、滑块内文本等定义

  • 支持使用任意图像对滑块进行修改

  • 支持对滑轨的起始结束位置添加图标或文本

  • 滑块支持使用Lottie Animation

  • 支持滑动过程对滑块、滑轨的状态颜色高度等属性添加交互动画

  • 支持对控件的各个零部件进行深度的定制

二、 具体效果实现


1. Material Design 3 样式

android滑动条,android,java,kotlin

此样式只需要定义好滑块、滑轨的状态颜色即可

<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)

如果普通的图像满足不了的话我们还可以自己去实现Drawable来完成有着更为丰富的交互和效果的滑块,像下面我们完成了一个哔哩哔哩视频拖动条的效果,和上面相同只需要只需要调用setThumbCustomDrawable(myCustomDrawable)即可,可以看看到滑轨在滑动开始和结束后还有一个动画效果,后面我们再详细说明这部分

可以在 这里查看 BiliBiliDrawable的完整代码

android滑动条,android,java,kotlin


4. 颜色选择器

android滑动条,android,java,kotlin

我们可以使用ColorPickEffect来实现一个颜色选择器,所选择的颜色会在OnColorValueChangeListener回调中返回,然后对所需要的位置直接修改即可,如果默认的色值无法满足也可以调用ColorPickEffect.updateColors方法来修改为我们想要的颜色数组


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. 实现相关方法,开始我们的自定义之旅
    /** 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 是在绘制激活状态的滑轨之前调用,返回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的所有要求,滑动浮窗、区间选择等功能还在开发中,希望后续能够提供更全面的更细致的方法及回调来满足你的定制需求。我也会不断的添加各种交互效果尽量涵盖当前所有主流应用中的效果。

如当前无法满足你的需求可以提交 Issues
如你自定义了一个很棒的效果也可以提交PR

如果觉得有帮助就送上一个Star吧,为作者提供更多动力文章来源地址https://www.toymoban.com/news/detail-521689.html

完整项目文档:查看
完整项目地址:查看

到了这里,关于Android 滑动条、Slider、Seekbar深度自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Kotlin Java 自定义日历控件 CalendarView ,支持单选,多选,按星期选,跨月份日期范围选择,样式设置,设置不可选日期,设置只可选日期

    https://github.com/hdev0225/CalendarView CalendarView 使用kotlin语言开发,支持单选,多选,按星期选,跨月份日期范围选择,样式设置,设置不可选日期,设置只可选日期 设置不可选择日期,设置只可选择某些日期 AS 版本: Android Studio Dolphin | 2021.3.1 Android Gradle Plugin Version: 7.3.0 Gradle

    2024年02月09日
    浏览(50)
  • Android SeekBar 进度条圆角

    先看下效果图: 之前: 优化后: 之前的不是圆角是clip切割导致的 全代码: bg_ps_seek_bar.xml bg_ps_progress_bar.xml 参考文章:android ProgressBar 进度条的进度两端是圆角的方法 - 蓼蓝的梦想 - 博客园 (cnblogs.com)

    2024年01月25日
    浏览(41)
  • Android 之 SeekBar (拖动条)

    本节我们继续来学习Android的基本UI控件中的拖动条——SeekBar,相信大家对他并不陌生,最常见的 地方就是音乐播放器或者视频播放器了,音量控制或者播放进度控制,都用到了这个SeekBar,我们 先来看看SeekBar的类结构,来到官方文档:SeekBar 嘿嘿,这玩意是ProgressBar的子类耶

    2024年02月15日
    浏览(40)
  • Android SeekBar使用避坑指南

    SeekBar是Android原生UI组件,可以用来调节进度,广泛应用于音乐、视频进度展示调控、音量、亮度调节等功能里。 SeekBar的使用很简单,这里就不再介绍了,本文着重介绍一下作者最近在使用SeekBar遇到的几个坑,希望大家以后可以避免。 如图,如何去实现这样一个可拖动进度

    2024年02月07日
    浏览(62)
  • Android进阶之SeekBar动态显示进度

    SeekBar 在开发中并不陌生,默认的SeekBar是不显示进度的,当然用吐司或者文案在旁边实时显示也是可以的,那能不能移动的时候才显示,默认不显示呢,当然网上花哨的三方类太多了,但是我只是单纯的想在SeekBar的基础上去添加一个可以跟随移动显示的气泡而已~ 先看一下效果:

    2024年02月13日
    浏览(40)
  • Android 基础知识4-3.8 SeekBar(拖动条)详解

    一、简介          拖动条类似进度条,不同的是用户可以控制,比如,应用程序中用户可以对音效进行控制,这就可以使用拖动条来实现。由于拖动条可以被用户控制,所以需要对其进行事件监听,这就需要实现SeekBar.onSeekBarChangeListener接口。在SeekBar中共需要监听3个事件,

    2024年02月08日
    浏览(67)
  • Android初学之android studio运行java/kotlin程序

    第一步骤: File — New — New Module ,然后弹出一个框,(左边)选择 Java or Kotlin Library ,(右边)编辑自己的图书馆名、包名、类名,选择 Java 一个语言,然后 Finish 如下图: 然后,就可以看见我新建的 java Library 了,如下图: 第二步骤:马上写个测试程序 看看能不能运行

    2024年02月11日
    浏览(55)
  • Android实战基础 - Java、Kotlin 代码互转

    在Android现阶段,Kotlin已经成为普遍性使用的语言,而在其使用阶段中Java和Kotlin的混用很常见,为了便于开发,我们需要掌握Java、Kotlin文件的转换 这应该是我以前刚学Kotlin时就想记录的一篇blog,没想到隔了这么久才进行记录(嗯… 主要这俩年好像有点忙…) 个人建议:正常

    2024年02月11日
    浏览(57)
  • 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就会触发使用。           Android图

    2024年02月13日
    浏览(45)
  • Android Glide自定义AppCompatImageView切分成若干小格子,每个小格子onDraw绘制Bitmap,Kotlin(1)

      垂直方向的RecyclerView,每行一个AppCompatImageView,每个AppCompatImageView被均匀切割成n个小格子, 每个小格子通过Glide加载出来Bitmap,然后onDraw绘制整行。             上面每一行加载16个bitmap绘图,速度很快,因为是canvas直接绘图。但是,如果使用下文的方式: Android LinearLa

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包