Android实现带节点的拖动条

什么都不用说，直接上代码:

package com.base.baseui.widget.others

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.widget.SeekBar

class SeekBarWithDots : androidx.appcompat.widget.AppCompatSeekBar {
    private val dotPaint: Paint = Paint()
    private val innerDotPaint: Paint = Paint()
    private val trackPaint: Paint = Paint()
    private var innerDotColor: Int = Color.WHITE
    private var numOfDots: Int = 5
    private var dotColor: IntArray = IntArray(5) { Color.parseColor("#ebebeb") }
    private val dotRadius: Float = dpToPx(6f)
    private val innerDotRadius: Float = dpToPx(4f)


    constructor(context: Context) : super(context) {
        init()
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init()
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        init()
    }

    private fun init() {
        dotPaint.style = Paint.Style.FILL
        innerDotPaint.style = Paint.Style.FILL
        trackPaint.style = Paint.Style.FILL
        trackPaint.color = Color.GRAY
    }

    private fun dpToPx(dp: Float): Float {
        val density = resources.displayMetrics.density
        return dp * density
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (numOfDots <= 0) return

        // 计算刻度点之间的间距
        val interval: Float = (width - paddingLeft - paddingRight).toFloat() / (numOfDots - 1)

        // 绘制刻度点
        for (i in 0 until numOfDots) {
            val dotX: Float = paddingLeft + i * interval
            val dotY: Float = height / 2.0f
            dotPaint.color = dotColor[i]
            dotColor[0] = Color.parseColor("#000000")
            innerDotPaint.color = innerDotColor
            canvas.drawCircle(dotX, dotY, dotRadius, dotPaint)
            canvas.drawCircle(dotX, dotY, innerDotRadius, innerDotPaint)
        }
    }

    fun setDotColor(index:Int , color: Int) {
        dotColor[index] = color
        invalidate()
    }

    fun setNumOfDots(num: Int) {
        numOfDots = num
        invalidate()
    }

    override fun setOnSeekBarChangeListener(listener: OnSeekBarChangeListener) {
        super.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                listener.onProgressChanged(seekBar, progress, fromUser)
            }

            override fun onStartTrackingTouch(seekBar: SeekBar) {
                listener.onStartTrackingTouch(seekBar)
            }

            override fun onStopTrackingTouch(seekBar: SeekBar) {
                listener.onStopTrackingTouch(seekBar)
            }
        })
    }


}

引用也很简单：

<com.base.baseui.widget.others.SeekBarWithDots
                        android:id="@+id/progressBar"
                        android:thumb="@drawable/shape_seekbar_thumb"
                        android:layout_width="match_parent"
                        android:background="@color/white"
                        android:progressBackgroundTint="@color/color_969799"
                        android:progressTint="@color/black"
                        android:layout_marginTop="@dimen/dp_24"
                        android:max="100"
                        android:layout_gravity="center_vertical"
                        android:layout_height="wrap_content"/>

最后要实现什么样的拖动效果，自己加上去就行了，重写onProgressChanged()方法，拖动弹出框popwindow那里根据progress去设置，我这里只是写了一个基础的模子，便于大家拓展，有不清楚的地方可以留言问我噢。

binding.progressBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                when (progress) {
                    in 0..24 -> {
                        binding.progressBar.setDotColor(0,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(1,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(2,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(3,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(4,Color.parseColor("#ebebeb"))
                    }
                    in 25..49 -> {
                        binding.progressBar.setDotColor(0,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(1,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(2,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(3,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(4,Color.parseColor("#ebebeb"))
                    }
                    in 50..74 -> {
                        binding.progressBar.setDotColor(0,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(1,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(2,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(3,Color.parseColor("#ebebeb"))
                        binding.progressBar.setDotColor(4,Color.parseColor("#ebebeb"))
                    }
                    in 75..99 -> {
                        binding.progressBar.setDotColor(0,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(1,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(2,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(3,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(4,Color.parseColor("#ebebeb"))
                    }
                    else -> {
                        binding.progressBar.setDotColor(0,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(1,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(2,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(3,Color.parseColor("#000000"))
                        binding.progressBar.setDotColor(4,Color.parseColor("#000000"))
                    }
                }
            }

            override fun onStartTrackingTouch(seekBar: SeekBar) {}

            override fun onStopTrackingTouch(seekBar: SeekBar) {
            }
        })

新人报到，请多关照，觉得有用的话麻烦给个关注吧