Android 自定义 RangeSlider 视图

Question

我正在尝试在下图中创建此视图

这就是我现在创造的

我为我的自定义视图创建了一个类并扩展了 RangeSlider，这就是我扩展 rangeSlider

的方式

    class CustomSeekbarTest @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet?,
    defStyleAttr: Int = 0
) : RangeSlider(context, attrs, defStyleAttr)

之后，我从提供的视频中获取缩略图，然后在 onDraw 函数中绘制它们，但感觉就像 2 个不同的视图在彼此之上

这是我的 onDraw 函数：

override fun onDraw(canvas: Canvas) {
    if (mBitmapList != null) {
        canvas.save()
        var x = 0
        for (i in 0 until mBitmapList!!.size()) {
            val bitmap = mBitmapList!![i.toLong()]
            if (bitmap != null) {
                canvas.drawBitmap(bitmap, x.toFloat(), 0f, null)
                x += bitmap.width
            }
        }
    }
    super.onDraw(canvas)
}

我知道我应该在函数的开头调用

super.onDraw(canvas)

但我最后调用它来显示我现在得到的东西

我做错了什么？以及如何制作第一个图像视图？