Android 自定义视图复刻 Apple 心率图表实现

2.1 基础结构与坐标系统

2.1.1 框架设计

为确保页面规整，需满足以下等式：

(lineWidth + lineSpace) * n = chartWidth

其中 n 为最大可视数据条数量（如 24）。此设计保证了左右侧空白宽度均为 0.5 * lineSpace，使视觉居中。

2.1.2 数据模型

定义 Kotlin 数据类存储单条心率记录：

data class HeartRateChartEntry(
    val time: Date = Date(), 
    val minValue: Int = 66, 
    val maxValue: Int = 88
)

使用 ArrayList 批量存储数据，便于索引访问。

2.1.3 静态元素绘制

横向背景线与 Y 轴刻度全程静态，可直接计算起讫点坐标绘制。

• 起始 X 坐标：(getWidth() - chartWidth) / 2
• 终止 X 坐标：startX + chartWidth
• 垂直间距：unitDistance = chartHeight / (k - 1)

绘制循环示例：

(0..mHorizontalLineSliceAmount).forEach { i ->
    val currentLabel = getLabel(i)
    val currentY = startY - i * mVerticalUnitDistance
    canvas.drawLine(startX, currentY, endX, currentY, mAxisPaint)
    canvas?.drawText("$currentLabel", endX + mTextSize / 3, currentY + mTextSize / 3, mLabePaint)
}
canvas.drawLine(startX, startY, startX, startY - mChartHeight, mAxisPaint)

2.1.4 动态数据条与窗口机制

为解决滑动闪烁问题，采用'窗口'机制而非直接修改数据索引。

• 原理：将 Chart 视为窗口，数据条视为风景。通过移动数据条相对于窗口的偏移量来实现滑动视觉效果。
• 优化：为避免全量重绘导致性能下降，仅计算当前窗口展示的最左和最右索引（leftRangeIndex, rightRangeIndex），并在遍历绘制时限制范围（如 leftRangeIndex - 3 到 rightRangeIndex + 3）。
• 裁剪：使用 canvas.saveLayer() 和 canvas.restoreToCount() 截取窗口区域，确保数据条不溢出 Chart 容器。

核心绘制逻辑：

val windowLayer = canvas?.saveLayer(
    left = chartLeftMargin,
    top = 0F,
    right = chartRightBorner,
    bottom = widthBottom
)

(0 until mValueArray.size).forEach { index ->
    if (index > drawRangeRight || index < drawRangeLeft) return@forEach
    
    // 计算横坐标：从右向左绘制
    val currentX = mViewStartX - index * (mLineWidth + mLineSpace) - chartRightMargin
    val startY = baseY - mChartHeight / mYAxisRange.second * mValueArray[index].maxValue
    val endY = baseY - mChartHeight / mYAxisRange.second * mValueArray[index].minValue

    if (mValueArray[index].maxValue != 0) {
        canvas?.drawLine(currentX, startY, currentX, endY, mLinePaint)
    }
}
canvas?.restoreToCount(windowLayer!!)

2.1.5 数据标注绘制

通过 boolean isShowIndicator 控制显示模式。维护 indexOnClicked 变量记录当前被点击的数据条索引，在 onTouchEvent 中动态更新并触发重绘。

2.2 触摸事件与状态机

2.2.1 手势识别策略

我们需要区分两种主要状态：

1. 正在数据条滑动 (isScrolling)：用户快速滑动切换数据条，改变 viewStartX。
2. 正在长触摸 (isLongTouch)：用户手指停留查看数据标注，此时切换标注下标但不移动数据条。

2.2.2 快速滑动判定

利用时间差与距离阈值判断：

• 记录 ACTION_DOWN 时刻时间戳。
• 在 ACTION_MOVE 中计算时间间隔与位移。
• 若 时间间隔 < 阈值 且 位移 > 阈值，判定为快速滑动。
• 设置 isScrolling = true，后续连续 MOVE 事件均执行滑动逻辑。

2.2.3 长按检测机制

使用协程延迟任务实现：

• ACTION_DOWN 后启动延时任务（如 500ms）。
• 若在延时期间发生显著移动或抬起，取消任务。
• 若延时完成未取消，则判定为长触摸，开启标注模式。

核心事件处理：

override fun onTouchEvent(event: MotionEvent?): Boolean {
    when (event?.action) {
        MotionEvent.ACTION_DOWN -> {
            mLastX = event.x
            currentMS = System.currentTimeMillis()
            startIndicatorTimer() // 启动长按计时器
        }
        MotionEvent.ACTION_MOVE -> {
            val moveX = mLastX - event.x
            mLastX = event.x
            
            // 快速滑动逻辑
            if (((System.currentTimeMillis() - currentMS) < TOUCHMOVEDURATION && abs(moveX) > mLineWidth) || isScrolling) {
                isScrolling = true
                turnOffIndicatorTimer() // 取消长按
                mViewStartX -= moveX
                updateCurrentDrawRange()
            } else if (isLongTouch) {
                // 长按模式下切换标注
                isShowIndicator = true
            }
        }
        MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
            turnOffIndicatorTimer()
            drawBackToBorder() // 触发回滚动画
        }
    }
    return true
}

2.2.4 自动回滚动画

滑动结束后，需确保视窗对齐网格。使用 ObjectAnimator 实现平滑过渡：

fun drawBackToBorder() {
    var endValue: Float = 0F
    val step = mLineWidth + mLineSpace
    
    if (mViewStartX < mInitialStartX) {
        endValue = mInitialStartX
    } else if (mViewStartX > mInitialStartX + (mValueArray.size - 24) * step) {
        endValue = mInitialStartX + (mValueArray.size - 24) * step
    } else {
        endValue = mViewStartX - (mViewStartX - mInitialStartX).mod(step)
    }

    val anim = ObjectAnimator.ofFloat(this, "mViewStartX", endValue)
    anim.interpolator = DecelerateInterpolator()
    anim.addUpdateListener { mViewStartX = it.animatedValue as Float }
    anim.start()
}

注意：需在 mViewStartX 的 Setter 方法中添加 invalidate() 以触发重绘。

3. 性能优化与注意事项

在实际开发中，除了功能实现，还需关注渲染性能：

1. 离屏缓存：saveLayer 会消耗额外内存，仅在必要时使用。若数据量极大，可考虑预渲染静态部分。
2. 对象复用：避免在 onDraw 中频繁创建 Paint 对象或 Path 对象，应在构造函数中初始化并复用。
3. 硬件加速：确保 View 启用了硬件加速，但需注意某些复杂路径可能受限于 GPU 渲染能力。
4. 内存管理：大数据集可能导致 OOM，建议分页加载或使用稀疏数组存储非连续数据。

总结

本文详细阐述了如何在 Android 平台上通过自定义 View 复刻 Apple 风格的心率统计图表。核心技术点包括：

• 基于 Canvas 的窗口裁剪机制解决滑动闪烁问题。
• 利用协程与时间戳精确区分快速滑动与长按手势。
• 结合 ObjectAnimator 实现符合物理惯性的边界回滚效果。

通过合理的坐标计算与绘制范围优化，可在保证交互流畅度的同时维持良好的性能表现。开发者可根据实际业务需求，进一步扩展支持多系列数据对比或更复杂的动画曲线。