自定义动态的音频条形图

原创 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实现音频条形图效果

效果图: 通过自定义View和属性动画实现此效果public class BarChartView extends LinearLayout implements Runnable { pr...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

音频条形图,顶部带小矩形

简单实现音频条形图,但是顶部新加了小矩形,不过没有实现小矩形自由下落的动画,如果谁那有实现了的demo,记得发我一份一起学习。 首先自定义View分为这么一下几步: 1.首要绘制出一排长短不一样的...

【Android UI】音频条形图

这次来实现一个类似在PC上某些音乐播放器上根据音频音量大小显示的音频条形图。运行效果如下:其实现原理就是自定义View,这里就不去真实的监听音频输入,只是随模拟一些数字。如上图所示的静态音频条形图,要...

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

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

Android自定义View之音频条形图

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

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

转载请注明出处: http://blog.csdn.net/like_program/article/details/53352899 最终效果图我们先看下最终效果图:分析通过刚才的效果图,我们可以分...

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

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

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