自定义动态的音频条形图

原创 2016年05月30日 21:55:08

1.思路:

1.制作静态的条形图就是绘制一个个的矩形,每一个矩形之间进行一定量的偏移即可;
2.制作动态的需要对矩形进行一个重新绘制。

2.具体实现

1.在ondraw()方法中进行矩形坐标的计算。制定一定的矩形的个数,通过循环创建小矩形。利用随机数,生成随机的矩形的高度即rectItemHeight ,通过横坐标的不断平移绘制出静态的小矩形。

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

        for (int i = 0; i < rectCount; i++) {
            mRandom = Math.random();     // 生成0到1的随机数
            float rectItemHeight = (float) (height * mRandom);  // 随机生成每一个item的高度
            // 画矩形,设置上下左右坐标
            canvas.drawRect((float)(width * 0.3 / 2 + rectItemWidth * i + offset),rectItemHeight,
                    (float)(width * 0.3 / 2 + rectItemWidth * (i + 1)),height,paint);
        }


    }

2静态绘制完成就要进行动态的,调用

postInvalidateDelayed(200);

进行延迟绘制。

3.最后在给矩形添加一个渐变的效果。设置paint对象的渐变风格

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

        width = getWidth(); // 控件的宽度
        height = getHeight();// 控件的高度
        Log.i("tag", "控件宽:" + String.valueOf(width) + "   控件高:" + String.valueOf(height));
        rectItemWidth = (int) ((width * 0.6) / rectCount);
        Log.i("tag", "每一个宽宽:" + String.valueOf(rectItemWidth));
        // 给paint设置LinearGradient属性
        LinearGradient linearGradient = new LinearGradient(0, 0,
                rectItemWidth, height,
                Color.BLUE, Color.GREEN,
                Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);

    }

3完整代码

package com.best.keke.myvolumview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by keke on 2016/5/30.
 */
public class MyVolumView extends View {

    private Paint paint;
    private int rectCount;  // 矩形条目的数目
    private int width;
    private int height;
    private int rectItemWidth;  //定义每一个条目的宽度
    private double mRandom;
    private int offset = 6; // 每个item的偏移量

    public MyVolumView(Context context) {
        this(context, null);
    }

    public MyVolumView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyVolumView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        // 初始化画笔
        paint = new Paint();
        paint.setColor(Color.GREEN);    // 设置颜色
        paint.setStyle(Paint.Style.FILL);   // 设置风格
        rectCount = 15;

    }

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

        for (int i = 0; i < rectCount; i++) {
            mRandom = Math.random();     // 生成0到1的随机数
            float rectItemHeight = (float) (height * mRandom);  // 随机生成每一个item的高度
            // 画矩形,设置上下左右坐标
            canvas.drawRect((float)(width * 0.3 / 2 + rectItemWidth * i + offset),rectItemHeight,
                    (float)(width * 0.3 / 2 + rectItemWidth * (i + 1)),height,paint);
        }
        postInvalidateDelayed(200);

    }

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

        width = getWidth(); // 控件的宽度
        height = getHeight();// 控件的高度
        Log.i("tag", "控件宽:" + String.valueOf(width) + "   控件高:" + String.valueOf(height));
        rectItemWidth = (int) ((width * 0.6) / rectCount);
        Log.i("tag", "每一个宽宽:" + String.valueOf(rectItemWidth));
        // 给paint设置LinearGradient属性
        LinearGradient linearGradient = new LinearGradient(0, 0,
                rectItemWidth, height,
                Color.BLUE, Color.GREEN,
                Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);

    }
}

4.最终效果如下:

录屏好的gif文件效果不好,换下方的截图

这里写图片描述
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

android实现音乐波动条形图

android实现音乐波动条形图 我们经常听音乐的时候都会有一些柱状图波动,今天我就在android里面来实现这个效果。先看效果图: 分析: 首先可以将这个跳动的条形图看做成一个View...
  • qq272708698
  • qq272708698
  • 2016年03月18日 13:37
  • 1763

html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)

html5 Audio音乐播放器(canvas圆形音乐播放进度条)主要用到的是 audio 和canvas,我们下来介绍下着来年哥哥标签以及它们的api: audio 属性 属性值 注释 ...
  • gongstrong123
  • gongstrong123
  • 2015年12月17日 11:25
  • 10394

android音乐柱状频谱实现

注意android2.3以后才可用,主要用到这个类Visualizer,这个源码其实是apiDemos中一个例子,但例子中实现的是两种中的波形显示,而不是频谱显示, 原文博主实现了另一种频谱显示...
  • mirkerson
  • mirkerson
  • 2015年01月28日 22:07
  • 7294

《Android 群英传》读书笔记:自定义 View ---- 音频条形图

  • 2016年11月26日 23:09
  • 104KB
  • 下载

自定义时钟简易音频条形图

  • 2016年01月20日 18:04
  • 5.96MB
  • 下载

自定义控件(三)--弧线展示图与音频条形图

  • 2016年04月08日 18:15
  • 243KB
  • 下载

Android自定义View之音频条形图

最近在学习Android自定义View,看到一个自定义音频条形图的例子,遂学习了一下并且在此基础上扩展了一点,在此记录一下,来帮助到需要的人。先放上一张效果图,看着还不错吧,接下来就开始一步步实现这个...
  • bingjianIT
  • bingjianIT
  • 2017年01月25日 13:33
  • 764

自定义View,模仿音乐播放器音频条形图

这次写到的是自定义view的实现音乐滚动音频条的过程,笔者在这里有两点启发,记下来,以便以后复习。 其中用到了postInvalidateDelayed(long mil)方法来刷新view视图,其...
  • qq_24295537
  • qq_24295537
  • 2016年03月17日 11:55
  • 528

《Android 群英传》读书笔记:自定义 View -- 音频条形图

转载请注明出处: http://blog.csdn.net/like_program/article/details/53352899 最终效果图我们先看下最终效果图:分析通过刚才的效果图,我们可以分...
  • like_program
  • like_program
  • 2016年11月26日 16:57
  • 892

自定义控件(三)--弧线展示图与音频条形图

前言: 当Android系统原生的控件无法满足我们的需求时,我们就可以完全创建一个新的自定义View来实现需要的功能。创建一个自定义View,难点在于绘制控件和实现交互,这也是评价一个自定义View优...
  • qq_31307919
  • qq_31307919
  • 2016年04月08日 17:37
  • 471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义动态的音频条形图
举报原因:
原因补充:

(最多只允许输入30个字)