关闭

自定义动态的音频条形图

标签: 音频条形图
505人阅读 评论(0) 收藏 举报
分类:

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文件效果不好,换下方的截图

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

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28774次
    • 积分:806
    • 等级:
    • 排名:千里之外
    • 原创:50篇
    • 转载:13篇
    • 译文:0篇
    • 评论:5条