欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义时间刻度尺,时间选择器,模仿萤石云

程序员文章站 2022-07-13 15:36:54
...

最近写了个功能萤石云历史回放。其中有个时间刻度选择器,看如下效果

TimeRuler

自定义时间刻度尺,时间选择器,模仿萤石云

可以缩放平移的时间刻度尺,方便自定义UI需求。仿萤石云历史录像时间轴

效果:

自定义时间刻度尺,时间选择器,模仿萤石云

Add it to your build.gradle with:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

and:

dependencies {
    implementation 'com.github.Liberations:TimeRuler:{latest version}'
}

BaseScaleBar支持的属性设置(Attributes):

name format description
keyTickHeight dimension,reference 关键刻度高度
tickValueOffset dimension,reference 刻度文字偏移
cursorPosition float 游标相对view width的位置 0~ 1
baselinePosition float 刻度尺横线相对view height的位置 0~1
tickColor color,reference 刻度线颜色
showTickLine boolean 是否显示刻度横线
showCursorLine boolean 是否显示游标线
showTickValue boolean 是否显示刻度值
tickDirectionUp boolean 刻度线开口方向
cursorLineColor color,reference 游标线颜色
maxScaleValueSize color,reference 刻度值最大规格(字体大小)

TimeRulerBar支持的额外属性(Attributes):

name format description
tickValueColor color,reference 刻度值颜色
colorScaleBackground color,reference 颜色区域背景色
cursorBackgroundColor color,reference 游标背景色
drawCursorContent boolean 是否绘制游标内容
tickValueSize dimension,reference 刻度值文字大小
videoAreaOffset dimension,reference 绘制颜色区域相对于顶部的偏移量
videoAreaHeight dimension,reference 绘制颜色区域的高度
tickValueColor color,reference 刻度值颜色

基本使用

      val calendar = Calendar.getInstance()

        // 00:00:00 000
        calendar[Calendar.HOUR_OF_DAY] = 0
        calendar[Calendar.MINUTE] = 0
        calendar[Calendar.SECOND] = 0
        calendar[Calendar.MILLISECOND] = 0
        var startTime = calendar.timeInMillis

        // 23:59:59 999
        calendar[Calendar.HOUR_OF_DAY] = 23
        calendar[Calendar.MINUTE] = 59
        calendar[Calendar.SECOND] = 59
        calendar[Calendar.MILLISECOND] = 999
        var endTime = calendar.timeInMillis
        //设置刻度尺时间范围
        timeBar.setRange(startTime, endTime)
        //设置初始化缩放模式
        timeBar.setMode(TimeRulerBar.MODE_UINT_30_MIN)
        //设置当前刻度值
        timeBar.setCursorValue(System.currentTimeMillis())

滑动事件监听

       timeBar.setOnCursorListener(object : BaseScaleBar.OnCursorListener {
            override fun onStartTrackingTouch(cursorValue: Long) {
              //开滑动

            }

            override fun onProgressChanged(cursorValue: Long,fromeUser:Boolean) {
               //刻度发生变化 fromeUser是否触摸事件触发
            }

            override fun onStopTrackingTouch(cursorValue: Long) {
               //结束滑动

            }
        })

更多方法参照Demo