先放效果
![](https://i-blog.csdnimg.cn/blog_migrate/742e401fce4cd72ccfc752dd6b138185.png)
实现代码
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
}
}