自定义View之音频条形图

首先自定义view要重写onMeasure方法,在此之前,自定义了一个方法measureWidthAndHeight,代码很简单,也很容易明白

 private int measureWidthAndHeight(int inputMeasureSpec){
        int result = 0;
        int mode = MeasureSpec.getMode(inputMeasureSpec);
        int size = MeasureSpec.getSize(inputMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            result = size;
        }else {
            result = 200;
            if (mode == MeasureSpec.AT_MOST){
                result = Math.min(result,size);
            }
        }
        return result;
    }

然后onMeasure调用上述方法方法:

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = measureWidthAndHeight(widthMeasureSpec);
        int height = measureWidthAndHeight(heightMeasureSpec);
        setMeasuredDimension(width,height);
    }

通过onMeasure设置view的高度和宽度后,使用onSizeChanged方法,实例化画笔所需要的参数:

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mRectCount = 40;   //设置条形图个数
        mWidth = getWidth();
        mRectHeight = getHeight();
        mRectWidth = (int) (mWidth*0.9/mRectCount);//设置每个条形图宽度
        offset = (int) (mWidth*0.1/mRectCount);//设置相邻两个条形图之间的间距
        mLinearGradient = new LinearGradient(0,0,mRectWidth,mRectHeight,Color.YELLOW,Color.BLUE, Shader.TileMode.MIRROR);
        mPaint.setShader(mLinearGradient);
    }

这里简单说一下LinearGradient使用,如图

自定义View之音频条形图_第1张图片


整个图类似于一个view,并通过LinearGradient的最后一个参数实现重复渐变,延伸渐变,镜像渐变等效果,但是需要通过Paint来设置并画出

最后实现onDraw方法:

 @Override
    protected void onDraw(Canvas canvas) {

        for (int i = 0; i

效果图如下所示:

自定义View之音频条形图_第2张图片

你可能感兴趣的:(自定义View之音频条形图)