先放效果
实现代码
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.spclass CustomSeekBar @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr){private var curWidth : Int = 1private var curHeight : Int = 1// 定义背景画笔private val mBgPaint by lazy {Paint().apply {isDither = trueisAntiAlias = truestyle = Paint.Style.FILLcolor = Color.parseColor("#FFF4F4F5")}}// 定义Thumb背景private val mCirclePaint by lazy {Paint().apply {isDither = trueisAntiAlias = truestyle = Paint.Style.FILLcolor = Color.WHITE}}// 定义文本画笔private val mTextPaint by lazy {Paint().apply {isDither = trueisAntiAlias = truecolor = Color.parseColor("#FF020202")textSize = 12f.sp}}var iListener : ISelectTextSizeListener? = nullprivate val mBgRect = Rect()private val mLeftRect = Rect()private val mRightRect = Rect()private var baseLine : Float = 1fprivate var textInputWidth : Float = 1foverride fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {super.onLayout(changed, left, top, right, bottom)curWidth = widthcurHeight = heightmBgRect.set(0, 0, width, height)mLeftRect.set(0,0, height, height)mRightRect.set(width - height, 0, width, height)maxX = width - minXval fontMetrics = mTextPaint.fontMetricsbaseLine = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottomtextInputWidth = mTextPaint.measureText("10")}private var minX = 15f.dpprivate var maxX = 15f.dpprivate var radius = 13f.dpprivate var curProgressX = minXprivate var curTextSize = 10override 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.xcurTextSize = if(event.x == maxX) {48}else {(((curProgressX - 15f.dp) / (curWidth - 30f.dp)) * 39).toInt() + 10}}}MotionEvent.ACTION_UP -> {}}iListener?.textSize(curTextSize)invalidate()return true}}