自定义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，并通过LinearGradient的最后一个参数实现重复渐变，延伸渐变，镜像渐变等效果，但是需要通过Paint来设置并画出

最后实现onDraw方法：

 @Override
    protected void onDraw(Canvas canvas) {

        for (int i = 0; i<mRectCount;i++){
            super.onDraw(canvas);
            double random = Math.random();
            float currentHeight = (float) (mRectHeight*random);
            /**
             *
             * 下面是画出每个图，当i=0时，第一个条形图开始的位置为mWidth*0.05+offset
             * 当i=mRectCount-1时，最后一个条形图结束的位置是mWidth*0.05+mWidth*0.9=mWidth*0.95
             * 近似整个图在中心
             *
             */
            canvas.drawRect((float)(mWidth*0.05+mRectWidth*i+offset),
                    currentHeight,
                    (float)(mWidth*0.05+mRectWidth*(i+1)),
                    mRectHeight,
                    mPaint);
        }
        postInvalidateDelayed(300);//每隔3毫秒重新onDraw
    }

效果图如下所示：