Android自定义View实战：从零实现FM频率刻度尺

在Android开发中，自定义View是解决复杂UI需求的利器。本文将以实现一个模拟FM收音机频率的刻度尺组件为例，从基础绘制到高级交互，系统讲解自定义View的核心技术要点。

一、需求分析与设计目标

典型的FM刻度尺需要实现以下功能：

频率范围显示（如87.5MHz-108.0MHz）
主刻度（1MHz间隔）与次刻度（0.1MHz间隔）
当前频率指示器
触摸滑动选择频率
频率变化时的动画反馈

设计时需考虑：

刻度线的层级关系（主刻度突出显示）
手指滑动时的惯性效果
不同屏幕密度的适配方案
性能优化（避免过度绘制）

二、核心绘制实现

1. 基础坐标系建立

public class FMScaleView extends View {
    private Paint mainScalePaint;
    private Paint subScalePaint;
    private Paint indicatorPaint;
    private float currentFrequency = 98.0f; // 当前频率
    private float minFrequency = 87.5f;    // 最小频率
    private float maxFrequency = 108.0f;   // 最大频率
    public FMScaleView(Context context) {
        super(context);
        initPaints();
    }
    private void initPaints() {
        mainScalePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mainScalePaint.setColor(Color.WHITE);
        mainScalePaint.setStrokeWidth(4);
        subScalePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        subScalePaint.setColor(Color.LTGRAY);
        subScalePaint.setStrokeWidth(2);
        indicatorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        indicatorPaint.setColor(Color.RED);
        indicatorPaint.setStrokeWidth(6);
    }
}

2. 刻度计算逻辑

关键计算方法：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth();
    int height = getHeight();
    // 计算频率范围对应的像素距离
    float pixelPerMhz = width / (maxFrequency - minFrequency);
    // 绘制主刻度（1MHz间隔）
    for (float freq = minFrequency; freq <= maxFrequency; freq += 1.0f) {
        float x = (freq - minFrequency) * pixelPerMhz;
        canvas.drawLine(x, height * 0.7f, x, height * 0.9f, mainScalePaint);
        // 绘制频率标签（居中显示）
        if (freq % 2 == 0) { // 每2MHz显示一次标签
            String label = String.format("%.1f", freq);
            float textWidth = mainScalePaint.measureText(label);
            canvas.drawText(label, x - textWidth/2, height * 0.6f, mainScalePaint);
        }
    }
    // 绘制次刻度（0.1MHz间隔）
    for (float freq = minFrequency; freq <= maxFrequency; freq += 0.1f) {
        if (freq % 1 != 0) { // 排除主刻度点
            float x = (freq - minFrequency) * pixelPerMhz;
            canvas.drawLine(x, height * 0.75f, x, height * 0.85f, subScalePaint);
        }
    }
    // 绘制当前频率指示器
    float indicatorX = (currentFrequency - minFrequency) * pixelPerMhz;
    canvas.drawLine(indicatorX, 0, indicatorX, height * 0.7f, indicatorPaint);
    canvas.drawCircle(indicatorX, height * 0.35f, 10, indicatorPaint);
}

三、交互系统实现

1. 触摸事件处理

private float lastX;
private VelocityTracker velocityTracker;
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (velocityTracker == null) {
        velocityTracker = VelocityTracker.obtain();
    }
    velocityTracker.addMovement(event);
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            lastX = event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            float deltaX = event.getX() - lastX;
            lastX = event.getX();
            // 计算频率变化（反向计算，因为x增加对应频率减小）
            float pixelPerMhz = getWidth() / (maxFrequency - minFrequency);
            float frequencyDelta = -deltaX / pixelPerMhz;
            currentFrequency += frequencyDelta;
            // 边界检查
            currentFrequency = Math.max(minFrequency, Math.min(maxFrequency, currentFrequency));
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            // 计算惯性滑动
            velocityTracker.computeCurrentVelocity(1000);
            float xVelocity = velocityTracker.getXVelocity();
            if (Math.abs(xVelocity) > 500) { // 最小触发速度
                float velocityMhz = -xVelocity / (getWidth() / (maxFrequency - minFrequency));
                // 这里可以添加惯性动画逻辑
            }
            velocityTracker.recycle();
            velocityTracker = null;
            break;
    }
    return true;
}

2. 惯性动画优化

使用ValueAnimator实现平滑停止：

private void flingAnimation(float velocity) {
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
    animator.setDuration(500);
    final float startFrequency = currentFrequency;
    final float velocityMhz = velocity / (getWidth() / (maxFrequency - minFrequency)) * 0.8f; // 衰减系数
    animator.addUpdateListener(animation -> {
        float fraction = animation.getAnimatedFraction();
        float delta = velocityMhz * (1 - fraction); // 减速效果
        currentFrequency = startFrequency + delta;
        // 边界修正
        currentFrequency = Math.max(minFrequency, Math.min(maxFrequency, currentFrequency));
        invalidate();
    });
    animator.start();
}

四、性能优化策略

硬件加速：确保在AndroidManifest.xml中为Activity开启硬件加速
```
<application android:hardwareAccelerated="true" ...>
```

减少绘制范围：使用canvas.clipRect()限制重绘区域

@Override
protected void onDraw(Canvas canvas) {
    // 只重绘变化部分
    canvas.save();
    canvas.clipRect(0, 0, getWidth(), getHeight());
    // ...绘制逻辑
    canvas.restore();
}

避免对象创建：在onDraw中避免创建新对象，复用已有Paint实例
适当降低精度：对于次刻度，可以每隔几个像素绘制一次而非每个像素都计算

五、扩展功能实现

1. 频率锁定效果

添加接近主刻度时的自动吸附：

private boolean shouldSnapToScale(float freq) {
    float remainder = freq % 1;
    return remainder < 0.1 || remainder > 0.9;
}
private float snapFrequency(float freq) {
    if (shouldSnapToScale(freq)) {
        return Math.round(freq);
    }
    return freq;
}

2. 主题定制支持

通过自定义属性实现样式定制：

<resources>
    <declare-styleable name="FMScaleView">
        <attr name="mainScaleColor" format="color" />
        <attr name="subScaleColor" format="color" />
        <attr name="indicatorColor" format="color" />
        <attr name="minFrequency" format="float" />
        <attr name="maxFrequency" format="float" />
    </declare-styleable>
</resources>

六、最佳实践总结

分离计算与绘制：将频率到像素的转换逻辑提取为独立方法
使用DP单位：确保刻度线宽度在不同设备上显示一致
添加边界检查：防止频率超出有效范围
考虑无障碍：为视图添加内容描述
提供回调接口：允许外部监听频率变化

完整实现示例已展示核心逻辑，实际开发中可根据需求添加更多功能如：

频率保存与恢复
预设频率快捷按钮
立体声/单声道指示器
信号强度可视化

通过这种自定义View的实现方式，开发者可以获得完全可控的UI表现，同时保持高效的运行性能。这种技术方案在音频处理类应用、仪器仪表界面开发中具有广泛的应用价值。