Android实时绘制录音采样振幅的移动折线图实现求助

我之前做过类似的实时音频波形需求，用MPChart的LineChart完全可以实现那种随时间向左滚动的效果，你没达到预期可能是没配置对几个关键属性，或者数据更新的逻辑没处理好。下面给你一步步拆解实现方案：

1. 基础LineChart配置 #

首先要把LineChart的多余元素去掉，让它专注于显示实时波形，同时配置坐标轴支持动态滚动：

// 获取你的LineChart实例
val lineChart = findViewById<LineChart>(R.id.lineChart)

// 禁用不必要的组件
lineChart.description.isEnabled = false
lineChart.legend.isEnabled = false
lineChart.setTouchEnabled(false) // 如果不需要用户交互可以关掉
lineChart.setScaleEnabled(false)

// 配置X轴（时间轴）
val xAxis = lineChart.xAxis
xAxis.position = XAxis.XAxisPosition.BOTTOM
xAxis.setDrawGridLines(false)
xAxis.setDrawAxisLine(false)
xAxis.setDrawLabels(false) // 不需要显示X轴标签的话可以关掉
xAxis.axisMinimum = 0f
xAxis.axisMaximum = 100f // 先设置一个初始的显示范围，比如显示最近100个采样点

// 配置Y轴（振幅轴）
val leftYAxis = lineChart.axisLeft
leftYAxis.setDrawGridLines(false)
leftYAxis.setDrawAxisLine(true)
leftYAxis.axisMinimum = 0f
leftYAxis.axisMaximum = 255f // 音频振幅一般范围是0-255，根据你的实际采样调整
leftYAxis.setDrawLabels(true)

lineChart.axisRight.isEnabled = false // 禁用右侧Y轴

2. 初始化数据集与数据集合 #

需要创建一个LineDataSet和LineData来存储实时的振幅数据，同时控制数据的最大数量，保证图表只显示最近的N个点：

// 创建空的数据集
val entries = mutableListOf<Entry>()
val dataSet = LineDataSet(entries, "Amplitude")
dataSet.color = Color.BLUE
dataSet.lineWidth = 2f
dataSet.setDrawCircles(false) // 不需要显示每个点的圆圈
dataSet.setDrawValues(false) // 不需要显示数值

val lineData = LineData(dataSet)
lineChart.data = lineData

3. 实时更新数据并实现左滚动逻辑 #

在你的录音回调（比如AudioRecord的读取线程）里，每次获取到振幅值后，更新数据集，同时处理数据滚动：

// 假设这是你获取振幅的地方，比如每隔固定时间读取一次
fun updateAmplitude(amplitude: Int) {
    // 获取当前数据集
    val dataSet = lineChart.data.getDataSetByIndex(0) as LineDataSet
    val currentCount = dataSet.entryCount

    // 添加新的采样点，X轴用当前的点数量作为索引
    dataSet.addEntry(Entry(currentCount.toFloat(), amplitude.toFloat()))

    // 控制最大显示的点数量，比如只保留最近100个
    if (currentCount >= 100) {
        dataSet.removeEntryAt(0) // 移除最旧的点
        // 更新X轴的范围，让图表向左滚动
        lineChart.xAxis.axisMinimum = (currentCount - 99).toFloat()
        lineChart.xAxis.axisMaximum = currentCount.toFloat()
    }

    // 通知图表更新
    lineChart.data.notifyDataChanged()
    lineChart.notifyDataSetChanged()
    lineChart.invalidate() // 刷新视图
}

4. 关键优化点 #

• 如果觉得更新时的动画太卡，可以关掉默认动画：lineChart.setNoAnimation()，或者用lineChart.animateX(0)来禁用动画
• 调整axisMaximum和保留的点数量，可以控制图表的滚动速度和显示的时间长度
• 如果需要更平滑的滚动，可以把X轴的范围调整得更精细，或者使用ViewPortHandler来控制视图的移动
• 想要波形更顺滑的话，可以给LineDataSet设置mode = LineDataSet.Mode.CUBIC_BEZIER

这样配置后，你的LineChart应该就能实现类似官网截图里的实时左滚动波形效果了。

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