Android 自定义视图全解析：打造一个酷炫的音频可视化控件

继承 View 或 SurfaceView： View 是 Android 中的基本 UI 组件，所有控件都继承自 View 类。通过继承 View，我们可以自定义控件的绘制和交互行为。SurfaceView 适用于需要频繁重绘、性能要求较高的场景，如视频播放或复杂的动画渲染。
继承 ViewGroup 组合控件： ViewGroup 是 View 的容器类，用于容纳和管理多个 View 组件。如果我们需要设计一个包含多个子控件的复合控件，可以通过继承 ViewGroup 来实现。

2. 自定义 View 的生命周期方法解析

onMeasure()：测量 View 大小 onMeasure() 用来计算 View 的大小。通过 setMeasuredDimension() 设置视图的宽高，决定其在父布局中的尺寸。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(400, 300); // 设置视图的宽高
}

onSizeChanged()：View 尺寸变化时的回调当视图的大小发生变化时，onSizeChanged() 会被调用。通常用于视图大小变化时的额外处理。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // 处理大小变化后的逻辑
}

onDraw()：实际绘制内容的方法这是自定义视图最重要的方法，所有的绘制工作都需要在 onDraw() 中进行。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 在此绘制视图的图形
}

onLayout()：ViewGroup 布局处理 onLayout() 方法用于对子视图进行位置布局。这个方法通常由 ViewGroup 实现，而不是 View。

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    // 布局子视图的位置
}

二、Canvas 绘图基础与常用 API

Canvas 简介

Canvas 是 Android 中用于 2D 图形绘制的强大工具，常用于自定义视图和控件开发。通过 Canvas，可以绘制基本图形、路径、文本和图片，甚至创建复杂的自定义图形和动画效果。

Canvas 本质上是一个绘图面板，开发者在其上绘制图形时会影响显示在屏幕上的内容。绘制时结合 Paint 来设置颜色、线条样式等属性。

1. 基本图形绘制

线条（drawLine()）：用于绘制两点之间的直线。
```
canvas.drawLine(x1, y1, x2, y2, paint);
```

矩形（drawRect()）：用于绘制矩形。

canvas.drawRect(left, top, right, bottom, paint);

圆形（drawCircle()）：用于绘制圆形。

canvas.drawCircle(centerX, centerY, radius, paint);

路径与贝塞尔曲线（drawPath()）：用于绘制路径和复杂的曲线。

Path path = new Path(); path.moveTo(x1, y1); path.quadTo(x2, y2, x3, y3); canvas.drawPath(path, paint);

2. 自定义 Paint 属性设置

颜色与透明度：使用 Paint 设置颜色和透明度。

paint.setColor(Color.RED); // 设置颜色 paint.setAlpha(100); // 设置透明度

线条宽度与样式：设置线条宽度和样式。

paint.setStrokeWidth(5); // 设置线宽 paint.setStyle(Paint.Style.STROKE); // 设置线条样式

着色器与渐变效果：设置渐变效果，丰富绘图内容。

LinearGradient gradient = new LinearGradient(0, 0, getWidth(), getHeight(), Color.RED, Color.BLUE, Shader.TileMode.CLAMP); paint.setShader(gradient);

3.canvas使用示例

实现这个波浪，我们首先要用canvas画正弦函数，正弦函数就是一种典型的波浪形是不是？

而代码中画正弦的方法有很多种，找了一种比较简单的，但是时间复杂度较高。接下来就是圆形外表和滚动了。先说滚动，想法就是每隔150毫秒刷新界面，每次刷新起始坐标向右移动一段距离，然后继续画正弦，就会有波动的效果。

代码：

@Override
protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
     path.moveTo(startPoint.x, startPoint.y);
     int j = 1;
     //画正弦
     for (int i = 1; i <= 4; i++) {
         if (i % 2 == 0) {
             path.quadTo(startPoint.x + (cycle * j), startPoint.y + waveHeight, startPoint.x + (cycle * 2) * i, startPoint.y);
          } else {
              path.quadTo(startPoint.x + (cycle * j), startPoint.y - waveHeight, startPoint.x + (cycle * 2) * i, startPoint.y);
           }
          j += 2;
      }
      path.lineTo(width, height);
      path.lineTo(startPoint.x, height);
      path.lineTo(startPoint.x, startPoint.y);
      path.close();
      canvas.drawPath(path, paint);
      //起始坐标改动
      if (startPoint.x + translateX >= 0) {
          startPoint.x = -cycle * 4;
      }
      startPoint.x += translateX;
      path.reset();
      //刷新界面
      postInvalidateDelayed(mNewWaveSpeed); 
  }

效果：

三、项目实战：音频可视化控件的实现

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.media.MediaPlayer;
import android.media.audiofx.Visualizer;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

import static java.lang.Math.log10;
import static java.lang.Math.max;

public class AudioVisualizer extends View {

    private static final float SMOOTHING_FACTOR = 0.2f;
    private static final int BARS_COUNT = 24;
    private static final int FFT_STEP = 2;
    private static final int FFT_OFFSET = 2;
    private static final int FFT_NEEDED_PORTION = 3;

    private final Paint piePaint;
    private float[] magnitudes = new float[0];
    private final List<RectF> data = new ArrayList<>();
    private Visualizer visualizer;

    private final Visualizer.OnDataCaptureListener dataCaptureListener = new Visualizer.OnDataCaptureListener() {
        @Override
        public void onFftDataCapture(Visualizer v, byte[] fft, int sampleRate) {
            if (fft != null) {
                magnitudes = convertFFTtoMagnitudes(fft);
                visualizeData();
            }
        }

        @Override
        public void onWaveFormDataCapture(Visualizer v, byte[] waveform, int sampleRate) {
            // No implementation needed
        }
    };

    public AudioVisualizer(Context context, AttributeSet attrs) {
        super(context, attrs);

        setBackgroundColor(Color.parseColor("#EEEEEE"));  // 设置背景色

        piePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        piePaint.setAntiAlias(true);
        piePaint.setColor(Color.argb(200, 181, 111, 233));
    }

    public void link(MediaPlayer mediaPlayer) {
        if (visualizer != null) return;

        visualizer = new Visualizer(mediaPlayer.getAudioSessionId());
        visualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[1]);
        visualizer.setDataCaptureListener(
                dataCaptureListener,
                Visualizer.getMaxCaptureRate() * 2 / 3,
                false,
                true
        );
        visualizer.setEnabled(true);

        mediaPlayer.setOnCompletionListener(mp -> {
            if (visualizer != null) visualizer.setEnabled(false);
        });
    }

    private void visualizeData() {
        data.clear();
        float barWidth = getWidth() / (BARS_COUNT * 2f); 

        for (int i = 0; i < BARS_COUNT; i++) {
            float segmentSize = magnitudes.length / (float) BARS_COUNT;
            int segmentStart = (int) (i * segmentSize);
            int segmentEnd = (int) (segmentStart + segmentSize);

            float sum = 0f;
            for (int j = segmentStart; j < segmentEnd; j++) {
                sum += magnitudes[j];
            }
            float amp = max(sum / segmentSize * getHeight(), barWidth);

            float startX = barWidth * i * 2;

引言

音频可视化的应用场景

一、自定义 View 的基本原理与生命周期

1. 自定义 View 的基本类型