Android开发之自定义SurfaceView绘制动效音波图 | 动效音阶图 | Android自定义View

xiayiye5

已于 2022-07-23 15:57:27 修改

阅读量1.6k

点赞数

分类专栏：自定义view 文章标签：自定义SurfaceView 自定义音波图自定义音阶图 SurfaceView音波图 SurfaceView音阶图

于 2022-07-16 19:24:01 首次发布

本文链接：https://blog.csdn.net/xiayiye5/article/details/125823819

版权

老套路献上图：

第一张是通过播放歌曲拿到歌曲播放的数据进行动态展示的

第二张是通过定时器随机生成的数据动态展示的

先说下这个自定义view也不难很简单，就是绘制矩形，唯一的难点在于计算矩形的坐标

说下矩形的计算思路:

第一步先判断是不是第一个矩形，如果是第一个，那么第一个矩形的左边距就等于=0或者你需要设置的左边距即可，右边距就等于=左边距+矩形的宽度+2个矩形的间距

      rect = new Rect();
      if (newData.size() == 0) {
      rect.left = 35;
        } else {
            rect.left = newData.get(newData.size() - 1).right + rectSpace;
}
        rect.right = rect.left + rectWidth + rectSpace;

第二步判断非0个矩形，那么左边距就等于上一一个的右边距+2个矩形之间的间距代码如上

高度好说动态设置就好，top直接设置动态，bottom直接是固定的值

         rect.top = 720 - datum * 3;
         rect.bottom = 720;

拿到矩形数据后添加到集合中然后开始绘制矩形即可

 private void drawRectContent(List<Rect> newData) {
        Canvas canvas = surfaceHolder.lockCanvas();
        if (null != canvas) {
            for (int i = 0; i < newData.size(); i++) {
                if (i == 0) {
                    //每次绘制第一个的时候需要清空下画布
                    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                }
                canvas.drawRect(newData.get(i), paint);
            }
            surfaceHolder.unlockCanvasAndPost(canvas);
        }
    }

看下SurfaceView完整代码吧

package cn.yhsh.surfaceviewmodel.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics