Android 快速制作一个YouTube 拖动进度同步展示时段用户关注度图表

youtube_style.gif
上一期我们制作了类似YouTube 的视频预览功能,这期我们来继续添加时段关注度图表展示功能,YouTube上我们在拖动进度条时可以看到进度条上有一个曲线图,来表示不同时段的流量大小,来告诉用户大部分用户对那个时段的内容最感兴趣,如下图

在这里插入图片描述

下面我们还是基于nifty-slider来快速实现以上效果

一、先看下最终效果

在这里插入图片描述

二、添加依赖

dependencies {
    //基础库 - 实现视频拖动的基础功能 
    implementation 'io.github.litao0621:nifty-slider:(latest version)'
    //可选的效果库 - 来实现touch down、touch up后滑动的放大缩小效果
    implementation 'io.github.litao0621:nifty-slider-effect:(latest version)'

}

三、功能实现

  1. 添加基础控件
    <com.litao.slider.NiftySlider
        android:id="@+id/nifty_slider"
        android:layout_width="0dp"
        android:layout_height="64dp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"
        android:valueFrom="0"
        android:valueTo="100"
        android:value="0"
        app:tipViewVisible="false"
        app:enableDrawHalo="false"
        app:trackHeight="3dp"
        app:trackColor="@color/youtube_theme_color"
        app:trackColorInactive="#44FFFFFF"
        app:thumbColor="@color/youtube_theme_color"
        app:thumbShadowColor="@android:color/transparent"
        app:thumbRadius="6dp"
        app:thumbWithinTrackBounds="true"
        app:trackCornersRadius="0dp"
        />
  1. 定义我们自己的交互效果,来完成图表的绘制与显隐动画, 首先继承BaseEffect,我们主要实现以下几个方法。
    • onStartTacking(): 用于用户开始拖动进度时展示图表
    • onStopTacking(): 用于用户结束拖动进度时隐藏图表
    • onDrawBefore(): 用户图表的具体绘制逻辑
  2. 添加图表绘制逻辑

	// 曲线图的关键点位置信息
	//x: 与slider 的进度相对应,slider.valueFrom < x < slider.valueTo
	//y: 一般传递具体时间段段热度值,流量值等
	private val keyPoints = mutableListOf<PointF>()

    override fun onDrawBefore(canvas: Canvas, trackRect: RectF, yCenter: Float) {
    	//转化为真实的x绘制坐标,将关节点对应的进度信息换算为具体坐标
    	//(当前进度/总进度)* 滑动条宽度 + 滑动条起始x坐标
        fun getRealX(x: Float): Float {
            return (x - slider.valueFrom) / (slider.valueTo - slider.valueFrom) * trackRect.width() + trackRect.left
        }
        //转化为真实的y绘制坐标,y坐标会根据当前定义的最大高度进行比例压缩
        fun getRealY(y: Float): Float {
            return yCenter - y * heightFraction - slider.trackHeight / 2f
        }


        chartPath.reset()
        var lastX = getRealX(0f)
        var lastY = getRealY(0f)
		//移动到其实位置
        chartPath.moveTo(lastX, lastY)

        keyPoints.forEachIndexed { index, pointF ->
            val realX = getRealX(pointF.x)
            val realY = getRealY(pointF.y * progress)

            //贝塞尔曲线控制点,让曲线关键点过渡更为平滑
            val x1 = (realX - lastX) / 2f + lastX
            val y1 = lastY
            val x2 = (realX - lastX) / 2f + lastX
            val y2 = realY

            chartPath.cubicTo(x1, y1, x2, y2, realX, realY)
            lastX = realX
            lastY = realY
        }
        chartPath.close()
    
    }

查看效果的完整代码

  1. 使用我们创建好的交互效果
//创建图表交互效果
val chartEffect = ChartEffect(sliderView).apply {
	//设置图标颜色
    chartColor = Color.parseColor("#33FFFFFF")
    //设置图标最大高度
    chartMaxHeight = 28f.dp
    //设置图标关点
    updateKeyPoint(mutableListOf(
        PointF(0f,10f),
        PointF(5f,50f),
        PointF(10f,70f),
        PointF(15f,130f),
        PointF(20f,170f),
        PointF(25f,70f),
        PointF(30f,110f),
        PointF(35f,20f),
        PointF(40f,10f),
        PointF(45f,110f),
        PointF(50f,20f),
        PointF(55f,100f),
        PointF(60f,170f),
        PointF(65f,120f),
        PointF(70f,30f),
        PointF(75f,80f),
        PointF(80f,80f),
        PointF(85f,180f),
        PointF(90f,10f),
        PointF(95f,180f),
        PointF(100f,10f),
    ))
}
sliderView.apply {
    effect = chartEffect
}
  1. 到目前我们就已经添加完成,可以看到我们开始时的效果了,nifty-slider 已经提供能丰富的自定义功能与自定义交互效果,如果大家觉得有不满足需求的都可以提出来,下期我们会提供类似YouTube 视频分章节的功能。

四、结束

YouTube视频关注度的完整Demo可以到这里查看

详细的属性文档可以到这里查看

Github 项目源码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值