Android 自定义控件-音频可视化

开始正式介绍实现过程之前，先来看下效果图，原点纵向跳动，跳动幅度在上次原点数的基础上随机做增减。

1. 产品需求

编号	需求描述
1	纵向的原点大小从下至上逐级递减
2	纵向原点的跳动幅度在上次圆点数的基础上进行随机增减
3	跳动频率可控
4	原点与原点之间的间隙可控
5	纵向圆点数可控
6	圆点颜色值可控
7	圆点最大半径、最小半径可控

2. 实现思路

实现的思路可以解构成下面的示意图，将控件等分为宽高一致的小方块，最下的方块中绘制最大圆点，最上面的方块绘制最小圆点，圆点的直径小于方块宽度，圆点之间的间隙就可以空出来了。如果以列为绘制单位，从左至右逐列绘制该列上每个方块中的圆点。绘制列上的圆点时，再根据圆点所在方块的位置确定圆点半径，从下至上进行绘制。至此，一幅静态的音频图已经绘制完成，如果想让这些圆点跳动起来，可以增加一个驱动的引擎，每隔一段时间去调用重绘方法即可。

绘制的时候，需要注意一下默认的坐标系。控件的左上角是坐标原点（0，0），原点右边是 X 轴正方向，原点下面是 Y 轴正方向；右侧的边缘是控件的宽度，下侧的边缘是控件的高度。

3. 绘制控件

定义一个控件 RackVew 继承自 ViewGroup 子类，重写 onSizeChanged 和 onDraw 方法。这里为了将代码分层，引入一个 RockViewHelper 帮助类，onSizeChanged 和 onDraw 方法中的复杂操作交由 RockViewHelper 接管，RackVew 对用户开放启动和停止动画的方法。RockViewHelper 在 RackVew 的构造方法中完成初始化。

package com.sunzn.rock.library;

import android.content.Context;
import android.graphics.Canvas;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class RackVew extends LinearLayout {

    private RockViewHelper helper;

    public RackVew(@NonNull Context context) {
        this(context, null);
    }

    public RackVew(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RackVew(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        helper = new RockViewHelper(this, context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        helper.onSizeChanged(w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        helper.onDraw(canvas);
    }

    public void start() {
        helper.start();
    }

    public void stop() {
        helper.stop();
    }

}

RockViewHelper 实现如下，在 RockViewHelper 的构造方法中完成 Paint 和各种参数的初始化，在 onSizeChanged 中完成尺寸和每列上圆点数的计算，在 onDraw 中逐列进行绘制。

package com.sunzn.rock.library;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;

public class RockViewHelper {

    private static final int DEFAULT_SQUARE_CIRCLE_GAP = 2;
    private static final int DEFAULT_MIN_CIRCLE_RADIUS = 5;
    private static final int DEFAULT_MAX_CIRCLE_RADIUS = 15;
    private static final int DEFAULT_VER_CIRCLE_NUMBER = 12;
    private static final int DEFAULT_PER_CIRCLE_UPDATE = 150;
    private static final int DEFAULT_CIRCLE_FILL_COLOR = 0XFFFF0000;

    private Handler handler = new Handler();
    private Runnable runnable = new Runnable() {
        public void run() {
            this.update();
            handler.postDelayed(this, circleUpdatePer);
        }

        void update() {
            view.postInvalidate();
        }
    };

    private Context context;
    private RackVew view;

    // RackVew 宽度
    private int viewWidth;

    // RackVew 高度
    private int viewHeight;

    // 圆的颜色
    private int circleFillColor;

    // 圆的最小半径
    private int circleMinRadius;

    // 圆的最大半径
    private int circleMaxRadius;

    // 圆和虚拟矩形的间距
    private int circleSquareGap;

    // 圆的虚拟容器宽高
    private int squareSize;

    // 圆的列数
    private int columnNums;

    // 垂直方向最多圆的数量
    private int circleNumberVer;

    // 界面刷新时间间隔
    private int circleUpdatePer;

    // RackVew 边距
    private int viewMargin;

    // 绘制圆的画笔
    private Paint circlePaint;

    private int[] points;

    public RockViewHelper(RackVew view, Context context, AttributeSet attrs, int defStyleAttr) {
        this.context = context;
        this.view = view;
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RackVew, defStyleAttr, 0);
        circleMinRadius = a.getInteger(R.styleable.RackVew_rv_min_circle_radius, DEFAULT_MIN_CIRCLE_RADIUS);
        circleMaxRadius = a.getInteger(R.styleable.RackVew_rv_max_circle_radius, DEFAULT_MAX_CIRCLE_RADIUS);
        circleSquareGap = a.getInteger(R.styleable.RackVew_rv_gap_circle_square, DEFAULT_SQUARE_CIRCLE_GAP);
        circleNumberVer = a.getInteger(R.styleable.RackVew_rv_ver_circle_number, DEFAULT_VER_CIRCLE_NUMBER);
        circleUpdatePer = a.getInteger(R.styleable.RackVew_rv_per_circle_update, DEFAULT_PER_CIRCLE_UPDATE);
        circleFillColor = a.getInteger(R.styleable.RackVew_rv_circle_fill_color, DEFAULT_CIRCLE_FILL_COLOR);
        a.recycle();
        init();
    }

    private void init() {
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setDither(true);
        circlePaint.setColor(circleFillColor);
        circlePaint.setStyle(Paint.Style.FILL);
    }

    public void onSizeChanged(int w, int h) {
        viewWidth = w;
        viewHeight = h;
        squareSize = (circleMaxRadius + circleSquareGap) * 2;
        columnNums = viewWidth / squareSize;
        viewMargin = viewWidth % squareSize;
        points = new int[columnNums];
        initPoints(points);
    }

    private void initPoints(int[] points) {
        for (int i = 0; i < points.length; i++) {
            points[i] = RackViewRandom.randInt(1, circleNumberVer);
        }
    }

    public void onDraw(Canvas canvas) {
        for (int c = 1; c <= columnNums; c++) {

            int rows = -1;
            int n = c - 1;

            rows = points[n] + RackViewRandom.randDot();

            if (rows > 0 && rows <= circleNumberVer) {
                points[n] = rows;
            }

            for (int r = 1; r <= points[n]; r++) {
                canvas.drawCircle(getX(c), getY(r), getD(r), circlePaint);
            }
        }
    }

    private int getX(int c) {
        return (int) (viewMargin / 2 + (c - 0.5) * squareSize);
    }

    private int getY(int r) {
        return (int) (viewHeight - (r - 0.5) * squareSize);
    }

    private int getD(int r) {
        return circleMaxRadius - (circleMaxRadius - circleMinRadius) * (r - 1) / circleNumberVer;
    }

    public void start() {
        handler.removeCallbacks(runnable);
        handler.postDelayed(runnable, circleUpdatePer);
    }

    public void stop() {
        handler.removeCallbacks(runnable);
    }

}

4. 项目地址

项目地址：RockView @ Github

赏

谢谢你请我吃糖果