android音乐播放器频谱图控件

最新推荐文章于 2024-05-29 00:18:32 发布

HPCoder

最新推荐文章于 2024-05-29 00:18:32 发布

阅读量5k

点赞数

分类专栏： android 文章标签：音乐 android 频谱图控件绘制

本文链接：https://blog.csdn.net/qq_35484511/article/details/75581988

版权

android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先上效果图：

先通过测量获取view的宽高，然后将宽分为12份，11份为11个条形柱，剩余一份在分为10份作为条形柱之间的间距

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);
        offset = width / 12 / 10;
        danceWidth = width / 12;
    }

首先看如何绘制一个条形柱：

传入一个int代表这是第几个条形柱

条形柱是由每个小节拼接起来的，每次随机获取条形柱的高度，然后除以每节的高度和间距来知道要绘制多少节，每一节根据比例来设置不同的颜色达到渐变效果。每次都记录顶点的位置，如果超出则重汇，如果没有则每次都下降一节的高度，达到缓慢落下的效果

private void drawItem(int k){
        int start=k*(danceWidth+offset);
        double r= Math.random();
        int nodeoffset=danceWidth/4;
        int nodeheight=danceWidth/2;
        int nodewidth=danceWidth;
        int topheight=nodeoffset;
        int max=height/(nodeheight+nodeoffset);
        int count=(int)(height*r)/(nodeheight+nodeoffset);
        for (int i = 0; i < count;i++ ) {
            float percent=(float)i/max;
            if(percent<0.1){
                paint.setColor(Color.parseColor(colors[0]));
            }else if(percent<0.2){
                paint.setColor(Color.parseColor(colors[1]));
            }else if(percent<0.3){
                paint.setColor(Color.parseColor(colors[2]));
            }else if(percent<0.4){
                paint.setColor(Color.parseColor(colors[3]));
            }else if(percent<0.5){
                paint.setColor(Color.parseColor(colors[4]));
            }else if(percent<0.6){
                paint.setColor(Color.parseColor(colors[5]));
            }else if(percent<0.7){
                paint.setColor(Color.parseColor(colors[6]));
            }else if(percent<0.8){
                paint.setColor(Color.parseColor(colors[7]));
            }else if(percent<0.9){
                paint.setColor(Color.parseColor(colors[8]));
            }else{
                paint.setColor(Color.parseColor(colors[9]));
            }
            canvas.drawRect(start,height-(nodeheight+nodeoffset)*i-nodeheight,start+nodewidth,height-(nodeheight+nodeoffset)*i,paint);
        }
        //当前高度超过最大值，则重新绘制顶部
        if(count>=tops[k]){
            tops[k]=count;
        }else{//没有超过，则往下降一格
            tops[k]--;
        }
        paint.setColor(Color.WHITE);
        canvas.drawRect(start,height-(nodeheight+nodeoffset)*tops[k]-topheight,start+nodewidth,height-(nodeheight+nodeoffset)*tops[k],paint);
    }

最后循环绘制11次

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint=new Paint();
        this.canvas=canvas;
        paint.setColor(Color.BLUE);
        drawRect();
        postInvalidateDelayed(300);//刷新时间
    }
    private void drawRect(){
        for (int i = 0; i <= 10;i++ ) {
            drawItem(i);
        }
    }

最后贴上整个类的代码，喜欢的给我点个赞吧！

完整代码：

public class MusicDanceView extends View {
    int width, height, offset, danceWidth;
    Paint paint;Canvas canvas;
    public MusicDanceView(Context context) {
        super(context);
    }

    public MusicDanceView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);
        offset = width / 12 / 10;
        danceWidth = width / 12;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint=new Paint();
        this.canvas=canvas;
        paint.setColor(Color.BLUE);
        drawRect();
        postInvalidateDelayed(300);//刷新时间
    }
    private void drawRect(){
        for (int i = 0; i <= 10;i++ ) {
            drawItem(i);
        }
    }
    int []tops=new int[11];
    String[]colors={"#03FC6C","#02FD27","#1BFE01","#80FD02","#C5FE01","#FCE903","#FDA502","#FD6602","#FD3A02","#FF1300"};
    private void drawItem(int k){
        int start=k*(danceWidth+offset);
        double r= Math.random();
        int nodeoffset=danceWidth/4;
        int nodeheight=danceWidth/2;
        int nodewidth=danceWidth;
        int topheight=nodeoffset;
        int max=height/(nodeheight+nodeoffset);
        int count=(int)(height*r)/(nodeheight+nodeoffset);
        for (int i = 0; i < count;i++ ) {
            float percent=(float)i/max;
            if(percent<0.1){
                paint.setColor(Color.parseColor(colors[0]));
            }else if(percent<0.2){
                paint.setColor(Color.parseColor(colors[1]));
            }else if(percent<0.3){
                paint.setColor(Color.parseColor(colors[2]));
            }else if(percent<0.4){
                paint.setColor(Color.parseColor(colors[3]));
            }else if(percent<0.5){
                paint.setColor(Color.parseColor(colors[4]));
            }else if(percent<0.6){
                paint.setColor(Color.parseColor(colors[5]));
            }else if(percent<0.7){
                paint.setColor(Color.parseColor(colors[6]));
            }else if(percent<0.8){
                paint.setColor(Color.parseColor(colors[7]));
            }else if(percent<0.9){
                paint.setColor(Color.parseColor(colors[8]));
            }else{
                paint.setColor(Color.parseColor(colors[9]));
            }
            canvas.drawRect(start,height-(nodeheight+nodeoffset)*i-nodeheight,start+nodewidth,height-(nodeheight+nodeoffset)*i,paint);
        }
        //当前高度超过最大值，则重新绘制顶部
        if(count>=tops[k]){
            tops[k]=count;
        }else{//没有超过，则往下降一格
            tops[k]--;
        }
        paint.setColor(Color.WHITE);
        canvas.drawRect(start,height-(nodeheight+nodeoffset)*tops[k]-topheight,start+nodewidth,height-(nodeheight+nodeoffset)*tops[k],paint);
    }
}