自定义VIEW之SeekBar

先放效果

 实现代码

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Rect
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import androidx.core.graphics.toRectF
import com.calendar.master.gp.listener.ISelectTextSizeListener
import com.calendar.master.gp.utils.dp
import com.calendar.master.gp.utils.sp


class CustomSeekBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr){

    private var curWidth : Int = 1
    private var curHeight : Int = 1
    // 定义背景画笔
    private val mBgPaint by lazy {
        Paint().apply {
            isDither = true
            isAntiAlias = true
            style = Paint.Style.FILL
            color = Color.parseColor("#FFF4F4F5")
        }
    }

    // 定义Thumb背景
    private val mCirclePaint by lazy {
        Paint().apply {
            isDither = true
            isAntiAlias = true
            style = Paint.Style.FILL
            color = Color.WHITE
        }
    }

    // 定义文本画笔
    private val mTextPaint by lazy {
        Paint().apply {
            isDither = true
            isAntiAlias = true
            color = Color.parseColor("#FF020202")
            textSize = 12f.sp
        }
    }

    var iListener : ISelectTextSizeListener? = null

    private val mBgRect = Rect()

    private val mLeftRect = Rect()
    private val mRightRect = Rect()

    private var baseLine : Float = 1f
    private var textInputWidth : Float = 1f

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        curWidth = width
        curHeight = height
        mBgRect.set(0, 0, width, height)
        mLeftRect.set(0,0, height, height)
        mRightRect.set(width - height, 0, width, height)
        maxX = width - minX

        val fontMetrics = mTextPaint.fontMetrics
        baseLine = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
        textInputWidth = mTextPaint.measureText("10")
    }

    private var minX = 15f.dp
    private var maxX = 15f.dp

    private var radius = 13f.dp

    private var curProgressX = minX

    private var curTextSize = 10

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        mTextPaint.color = Color.parseColor("#FF020202")
        // 绘制带圆角的背景
        canvas?.drawRoundRect(mBgRect.toRectF(), 15f.dp, 15f.dp, mBgPaint)
        // 绘制左边起点的文本
        canvas?.drawText("10", mLeftRect.width()/2f - textInputWidth/2f, mLeftRect.height()/2 + baseLine, mTextPaint)
        // 绘制右边终点的文本
        canvas?.drawText("48", mRightRect.left.toFloat() + mRightRect.width()/2f - textInputWidth/2f, mLeftRect.height()/2 + baseLine, mTextPaint)
        mTextPaint.color = Color.parseColor("#FFF28989")
        // 绘制Thumb的背景
        canvas?.drawCircle(curProgressX, 15f.dp, radius, mCirclePaint)
        // 绘制Thumb的文字
        canvas?.drawText("$curTextSize", curProgressX - textInputWidth/2f, mLeftRect.height()/2 + baseLine, mTextPaint)
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when(event?.action) {
            MotionEvent.ACTION_DOWN -> {

            }
            MotionEvent.ACTION_MOVE -> {
                if(event.x in minX..maxX) {
                    curProgressX = event.x
                    curTextSize = if(event.x == maxX) {
                        48
                    }else {
                        (((curProgressX - 15f.dp) / (curWidth - 30f.dp)) * 39).toInt() + 10
                    }
                }
            }
            MotionEvent.ACTION_UP -> {

            }
        }
        iListener?.textSize(curTextSize)
        invalidate()
        return true
    }

}