Android 麦克风录音带音量大小动态显示的圆形自定义View

1、所谓无图无真相，先上效果图。我们要实现的就是中间那个录音的按钮，周边会显示一圈音量大小的波形

2、VolumCircleBar继承自View，我们进行了自定义，代码如下

package com.rdinfo.ccenglish.ui.ccprofile.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.panshi.xuexiao.R;
/**
 * 麦克风音量圆形按钮
 * @author hiphonezhu@gmail.com
 * @version [CCEnglish, 2014-7-25]
 */
public class VolumCircleBar extends View
{
    private double volumRate; // 音量百分比
    private boolean isRecording; // 录音标志
    private Object lock = new Object();
    private Thread uiThread;
    private Paint mPaint;
    private RectF arcRect;
    private Matrix matrix = new Matrix();
    private final int VOLUM_INDICATE_LENGTH = 5; // 音量大小线长度
    private final int CIRCLE_INNER_DISTANCE_TO_OUTSIDE = 5; // 内切圆距离外圆的距离
    public VolumCircleBar(Context context)
    {
        this(context, null);
    }
    
    public VolumCircleBar(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }
    
    public VolumCircleBar(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.VolumCircleBar, defStyle, 0); 
        init(typedArray);
    }
    
    private int recordingColor; // 录音背景色
    private int stoppedColor; // 停止背景色
    private Bitmap centerRes; // 中间麦克风图片
    private int totalBlockCount; // 块数量
    private int spliteAngle; // 块之间的间隔角度大小
    private int circleWidth; // 直径
    /**
     * 初始化
     */
    private void init(TypedArray typedArray)
    {
        for (int i = 0; i < typedArray.length(); i++)  
        {  
            int attr = typedArray.getIndex(i);  
            switch (attr)
            {
                case R.styleable.VolumCircleBar_recordingColor:
                    recordingColor = typedArray.getColor(i, Color.GREEN);
                    break;
                case R.styleable.VolumCircleBar_stoppedColor:
                    stoppedColor = typedArray.getColor(i, Color.GRAY);
                    break;
                case R.styleable.VolumCircleBar_centerRes:
                    centerRes = BitmapFactory.decodeResource(getContext().getResources(), typedArray.getResourceId(i, R.drawable.ic_launcher));
                    break;
                case R.styleable.VolumCircleBar_blockCount:
                    totalBlockCount = typedArray.getInt(i, 50);
                    break;
                case R.styleable.VolumCircleBar_splitAngle:
                    spliteAngle = typedArray.getInt(i, 2);
                    break;
            }
        }  
        typedArray.recycle();  
        uiThread = Thread.currentThread();
        mPaint = new Paint();
        if (spliteAngle * totalBlockCount > 360)
        {
            throw new IllegalArgumentException("spliteAngle * blockCount > 360, while the result should be less than 360.");
        }
        
        // debug for test
        isRecording = true;
        volumRate = 0.5;
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        // 直径
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        circleWidth = width > height? width : height;
        if (arcRect == null)
        {
            arcRect = new RectF(CIRCLE_INNER_DISTANCE_TO_OUTSIDE, CIRCLE_INNER_DISTANCE_TO_OUTSIDE, 
                    circleWidth - CIRCLE_INNER_DISTANCE_TO_OUTSIDE, circleWidth - CIRCLE_INNER_DISTANCE_TO_OUTSIDE); // 音量显示区域, 内偏移几个像素
            // 图片处理矩阵
            initBitmapMatrix();
        }
        // 强制设置view大小
        setMeasuredDimension(circleWidth, circleWidth);
    }
    
    /**
     * 中间图片压缩处理
     */
    private void initBitmapMatrix()
    {
        float innerCircleRadius = (circleWidth - 2 * (VOLUM_INDICATE_LENGTH + CIRCLE_INNER_DISTANCE_TO_OUTSIDE)) / 2f; // 内圆的半径
        float innerRectangleWidth = (float)Math.cos((Math.PI / 180) * 45) * innerCircleRadius * 2; // 内圆的内切正方形的边长
        float translateOffset = VOLUM_INDICATE_LENGTH + CIRCLE_INNER_DISTANCE_TO_OUTSIDE + innerCircleRadius - innerRectangleWidth / 2; // 偏移的offset
        if (centerRes.getWidth() > (innerRectangleWidth) || centerRes.getHeight() > (innerRectangleWidth))
        {
            // 图片宽度或高度大于(直径-内偏移), 等比压缩
            if (centerRes.getWidth() > centerRes.getHeight())
            {
                // 按照宽度压缩
                float ratio = innerRectangleWidth / centerRes.getWidth();
                matrix.postScale(ratio, ratio);
                float translateY = (innerRectangleWidth - (centerRes.getHeight() * ratio)) / 2f;
                // 在纵坐标方向上进行偏移，以保证图片居中显示
                matrix.postTranslate(translateOffset, translateY + translateOffset);
            }
            else
            {
                // 按照高度压缩
                float ratio = innerRectangleWidth / (centerRes.getHeight() * 1.0f);
                matrix.postScale(ratio, ratio);
                float translateX = (innerRectangleWidth - (centerRes.getWidth() * ratio)) / 2f;
                // 在横坐标方向上进行偏移，以保证图片居中显示
                matrix.postTranslate(translateX + translateOffset, translateOffset);
            }
        }
        else
        {
            // 当图片的宽高都小于屏幕宽高时，直接让图片居中显示
            float translateX = (innerRectangleWidth - centerRes.getWidth()) / 2f;
            float translateY = (innerRectangleWidth - centerRes.getHeight()) / 2f;
            matrix.postTranslate(translateX + translateOffset, translateY + translateOffset);
        }
    }
    
    /**
     * 设置音量百分比
     * @param rate
     */
    public void updateVolumRate(double rate)
    {
        synchronized (lock)
        {
            this.volumRate = rate;
            if (Thread.currentThread() != uiThread)
            {
                postInvalidate();
            }
            else
            {
                invalidate();
            }
        }
    }
    
    /**
     * 开始、停止录音
     */
    public void toggleRecord()
    {
        synchronized (lock)
        {
            isRecording = !isRecording;
            if (Thread.currentThread() != uiThread)
            {
                postInvalidate();
            }
            else
            {
                invalidate();
            }
        }
    }
    
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        canvas.drawColor(Color.TRANSPARENT); 
        synchronized (lock)
        {
            if (isRecording) // 正在录音
            {
                //1.绘制绿色圆圈
                mPaint.setAntiAlias(true); //消除锯齿   
                mPaint.setColor(recordingColor);
                mPaint.setStrokeWidth(1);
                mPaint.setStyle(Paint.Style.FILL); // 填充
                canvas.drawCircle(circleWidth / 2f, circleWidth / 2f, circleWidth / 2f, mPaint);
                //2.根据音量百分比、块数量、块间隔大小计算角度动态绘制音量大小
                // 计算块的角度
                float blockAngle = (360 * 1.0f - spliteAngle * totalBlockCount) / totalBlockCount;
                int drawBlockCount = (int)(totalBlockCount * volumRate); // 绘制的block数量
                mPaint.setStrokeWidth(VOLUM_INDICATE_LENGTH);
                mPaint.setColor(stoppedColor);
                mPaint.setStyle(Paint.Style.STROKE); // 空心
                for (int i = 0; i < drawBlockCount; i++)
                {
                    canvas.drawArc(arcRect, i * (blockAngle + spliteAngle) - 90, blockAngle, false, mPaint);
                }
            } 
            else // 录音停止
            {
                //1.绘制灰色圆圈
                mPaint.setColor(stoppedColor);
                mPaint.setStrokeWidth(1);
                mPaint.setStyle(Paint.Style.FILL); // 填充
                canvas.drawCircle(circleWidth / 2f, circleWidth / 2f, circleWidth / 2f, mPaint);
            }
        }
        // 绘制中间话筒
        canvas.drawBitmap(centerRes, matrix, null);
    }
}