Android自定义波形SeekBar实现求助（XML+Kotlin+自定义Adapter）

问题背景 #

需在Android中实现波形样式的SeekBar，要求采用XML布局结合Kotlin开发，且交互逻辑需在自定义Adapter中完成。尝试集成GitHub第三方库但无法正常运行，目前已有ChatGPT生成的自定义SeekBarView基础代码，需调整为目标波形进度样式并完成Adapter集成。

现有代码问题分析 #

当前提供的自定义View存在以下不足：

• 仅绘制完整波形，未根据进度截断显示已完成部分
• 缺少滑块（Thumb）的绘制逻辑
• 触摸事件未同步更新滑块位置
• 无进度变化回调接口，无法在Adapter中响应进度变更

修改后的完整自定义SeekBarView代码 #

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

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

    // 可配置样式参数
    private var waveColor = Color.parseColor("#4CAF50")
    private var bgWaveColor = Color.parseColor("#E0E0E0")
    private var thumbColor = Color.parseColor("#FFFFFF")
    private var thumbStrokeColor = Color.parseColor("#4CAF50")
    private var thumbRadius = 12f.dpToPx()
    private var thumbStrokeWidth = 2f.dpToPx()

    private val progressPath = Path()
    private val bgPath = Path()
    private val thumbPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.FILL
        color = thumbColor
    }
    private val thumbStrokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
        color = thumbStrokeColor
        strokeWidth = thumbStrokeWidth
    }
    private val progressPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.FILL
        color = waveColor
    }
    private val bgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.FILL
        color = bgWaveColor
    }

    private var progress = 0f
    private var maxProgress = 100f
    private var progressChangeListener: OnProgressChangeListener? = null

    // dp转px扩展函数
    private fun Float.dpToPx(): Float {
        return this * context.resources.displayMetrics.density
    }

    init {
        isClickable = true
        isFocusable = true
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val desiredWidth = suggestedMinimumWidth + paddingLeft + paddingRight
        val desiredHeight = 48.dpToPx().toInt() + paddingTop + paddingBottom // 默认高度48dp
        val measuredWidth = measureDimension(desiredWidth, widthMeasureSpec)
        val measuredHeight = measureDimension(desiredHeight, heightMeasureSpec)
        setMeasuredDimension(measuredWidth, measuredHeight)
    }

    private fun measureDimension(desiredSize: Int, measureSpec: Int): Int {
        val mode = MeasureSpec.getMode(measureSpec)
        val size = MeasureSpec.getSize(measureSpec)

        return when (mode) {
            MeasureSpec.EXACTLY -> size
            MeasureSpec.AT_MOST -> desiredSize.coerceAtMost(size)
            MeasureSpec.UNSPECIFIED -> desiredSize
            else -> desiredSize
        }
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val width = width.toFloat() - paddingLeft - paddingRight
        val height = height.toFloat() - paddingTop - paddingBottom
        val startX = paddingLeft.toFloat()
        val centerY = paddingTop + height / 2

        // 绘制背景波形
        bgPath.reset()
        buildWavePath(bgPath, width, height, startX, centerY)
        canvas.drawPath(bgPath, bgPaint)

        // 绘制进度波形（仅显示到当前进度位置）
        val progressWidth = width * (progress / maxProgress)
        progressPath.reset()
        buildWavePath(progressPath, progressWidth, height, startX, centerY)
        progressPath.lineTo(startX + progressWidth, centerY + height/2)
        progressPath.lineTo(startX, centerY + height/2)
        progressPath.close()
        canvas.drawPath(progressPath, progressPaint)

        // 绘制滑块
        val thumbX = startX + progressWidth
        canvas.drawCircle(thumbX, centerY, thumbRadius, thumbPaint)
        canvas.drawCircle(thumbX, centerY, thumbRadius, thumbStrokePaint)
    }

    // 构建波形路径
    private fun buildWavePath(path: Path, totalWidth: Float, height: Float, startX: Float, centerY: Float) {
        val waveHeight = height / 3
        val waveCount = 8 // 波形数量
        val waveSegmentWidth = totalWidth / waveCount

        path.moveTo(startX, centerY)
        for (i in 0..waveCount) {
            val x = startX + i * waveSegmentWidth
            val isEvenSegment = i % 2 == 0
            val y = if (isEvenSegment) centerY - waveHeight else centerY + waveHeight
            if (i == 0) {
                path.moveTo(x, centerY)
            } else {
                val controlX = startX + (i - 0.5f) * waveSegmentWidth
                val controlY = centerY
                path.quadTo(controlX, controlY, x, y)
            }
        }
        path.lineTo(startX + totalWidth, centerY)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x - paddingLeft
        val validWidth = width.toFloat() - paddingLeft - paddingRight

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                updateProgress(x, validWidth)
                return true
            }
            MotionEvent.ACTION_MOVE -> {
                updateProgress(x, validWidth)
                return true
            }
            MotionEvent.ACTION_UP -> {
                progressChangeListener?.onProgressChanged(progress, true)
                return true
            }
        }
        return super.onTouchEvent(event)
    }

    private fun updateProgress(touchX: Float, validWidth: Float) {
        val newProgress = (touchX / validWidth) * maxProgress
        val clampedProgress = newProgress.coerceIn(0f, maxProgress)
        if (clampedProgress != progress) {
            progress = clampedProgress
            invalidate()
            progressChangeListener?.onProgressChanged(progress, false)
        }
    }

    // 对外暴露方法
    fun setProgress(progress: Float) {
        this.progress = progress.coerceIn(0f, maxProgress)
        invalidate()
    }

    fun setMaxProgress(maxProgress: Float) {
        this.maxProgress = maxProgress.coerceAtLeast(1f)
        invalidate()
    }

    fun setOnProgressChangeListener(listener: OnProgressChangeListener) {
        this.progressChangeListener = listener
    }

    // 进度变化回调接口
    interface OnProgressChangeListener {
        fun onProgressChanged(progress: Float, fromUser: Boolean)
    }
}

在自定义Adapter中集成的步骤 #

1. 列表Item布局（示例：item_wave_seekbar.xml） #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">

    <com.yourpackage.WaveSeekBarView
        android:id="@+id/waveSeekBar"
        android:layout_width="match_parent"
        android:layout_height="48dp"/>

    <!-- 其他自定义控件 -->
</LinearLayout>

2. 自定义Adapter实现 #

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class WaveSeekBarAdapter(private val dataList: List<Float>) :
    RecyclerView.Adapter<WaveSeekBarAdapter.ViewHolder>() {

    inner class ViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder(
        LayoutInflater.from(parent.context).inflate(R.layout.item_wave_seekbar, parent, false)
    ) {
        val waveSeekBar: WaveSeekBarView = itemView.findViewById(R.id.waveSeekBar)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(parent)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val initialProgress = dataList[position]
        holder.waveSeekBar.apply {
            setMaxProgress(100f)
            setProgress(initialProgress)
            setOnProgressChangeListener(object : WaveSeekBarView.OnProgressChangeListener {
                override fun onProgressChanged(progress: Float, fromUser: Boolean) {
                    // 处理进度变化逻辑，比如更新数据源、同步到其他组件
                    if (fromUser) {
                        // 用户手动拖动时的业务逻辑
                    }
                }
            })
        }
    }

    override fun getItemCount(): Int = dataList.size
}

关键说明 #

• 样式扩展：可通过在attrs.xml中定义自定义属性，让WaveSeekBarView支持在XML中配置颜色、尺寸等参数，提升复用性
• 性能优化：所有Paint、Path对象均在初始化时创建，避免在onDraw方法中重复创建对象
• 触摸边界：通过padding调整有效交互区域，确保滑块不会超出控件可视范围
• 逻辑解耦：通过OnProgressChangeListener接口实现进度变化监听，将业务逻辑与View组件分离

内容的提问来源于stack exchange，提问作者Tom