自定义SurfaceView之音频录制圆形进度条

本篇文章介绍自定义SurfaceView来实现如下的效果

由于对于SurfaceView不是很熟练，这次拿它来练手

SurfaceView用途：

一般View可以满足大部分的绘图需求，但如果需要并发执行复杂耗时的逻辑的时候，就会不断阻塞主线程，导致画面卡顿，为了避免这种问题的发生，我们应该使用SurfaceView来解决这个问题

SurfaceView使用介绍可以参考另外一篇博客：Android绘图机制与处理技巧（一）SurfaceView

总共由以下几个部分组成：

• 按钮按下效果
• 灰色总进度条
• 绿色圆形进度条
• 绿色小圆圈

具体实现过程分析：

创建自定义SurfaceView需要继承自SurfaceView，并实现SurfaceHolder.Callback, Runnable接口

public class CircleRecordSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable {

然后需要重写三个方法：surfaceCreated(),surfaceChanged(),surfaceDestroyed()和run()

定义的成员变量，具体用途可以看注释

//选择按钮图标
    private boolean isChangeCenterBitmap = true;
    //持续画图
    private boolean isSustainedDraw = false;
    private boolean isStart = true;
    //是否画小圆点，默认为true
    private boolean isDrawSmallCircle = true;
    //小圆点颜色
    private int smallCircleColor;
    //是否画圆弧，默认为true
    private boolean isDrawArc = true;
    //圆弧颜色
    private int arcColor;

    private CompleteTimeCallBack completeTimeCallBack;
    private SurfaceHolder holder = null;
    //绘图属性---------
    private Canvas canvas;

    //录音按钮
    private Paint pPaint;
    private int px;//坐标x位置
    private int py;//坐标y位置
    //radius = defaultRadius * dp
    private int radius;//半径
    //defaultRadius 默认值为40
    private int defaultRadius = 40;
    //起始角度
    private float startAngle = 270;
    //进度
    private float sweepAngle;
    //小球起始角度默认等于进度条起始角度
    private float angle, duration = 20;
    private int startBitmap;
    private int stopBitmap;
    //中心图片的范围，默认为10，值越大图片越小
    private int centerBitmap_margin = 10;
    private int dp;
    private Bitmap bitmap;
    private boolean isGetBitmap = false;
    long a, b, calculateTime, sleepTime = 60, correctSleepTime;

然后我们需要对SurfaceHolder以及一些其他的属性初始化

public void init() {

        //获取mSurfaceHolder
        holder = getHolder();
        holder.addCallback(this);
        //背景设为透明
        if (!isInEditMode()) {
            setZOrderOnTop(true);
        }
        holder.setFormat(PixelFormat.TRANSLUCENT);

        //设置进度条
        pPaint = new Paint();
        pPaint.setAntiAlias(true);
        pPaint.setStrokeWidth(4);
        pPaint.setStyle(Paint.Style.STROKE);
        angle = startAngle;
        sweepAngle = 0;

        dp = Resources.getSystem().getDisplayMetrics().densityDpi / 160;

    }

重写SurfaceView的surfaceCreated()方法

@Override
    public void surfaceCreated(SurfaceHolder holder) {
        if (!isStart) {
            reset();
        }
        radius = defaultRadius * dp;
        isChangeCenterBitmap = true;
        px = this.getWidth() / 2;
        py = this.getHeight() / 2;
        new Thread(this).start();
    }

在这里根据子线程标志位做初始化，以及计算半径，中心点坐标等等，并开启线程

由于我们不用改变SurfaceView大小因此无需在surfaceChanged()方法中写逻辑

@Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

重写SurfaceView的surfaceDestroyed()方法，在这里将标志位设为false

@Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        isStart = false;
    }

然后重写run()方法，该方法是一个子线程，在这里通过不停循环才进行绘制界面

@Override
    public void run() {
        while (isStart) {
            if (isSustainedDraw) {
                canvas = holder.lockCanvas(); // 获得画布对象，开始对画布画画
                if (canvas == null) {
                    continue;
                }
                canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                //                canvas.drawColor(canvasColor); // 把画布填充指定颜色
                drawCenterBitmap();
                drawCircle();
                holder.unlockCanvasAndPost(canvas); // 完成画画，把画布显示在屏幕上

                calculateTime = calculateTime + sleepTime;
                try {
                    b = a;
                    a = System.currentTimeMillis();

                    if (b == 0) {
                        correctSleepTime = sleepTime;

                    } else {
                        if ((a - b) >= sleepTime && (a - b) < 2 * sleepTime) {
                            correctSleepTime = sleepTime - (a - b - correctSleepTime);
                        } else if ((a - b) > 2 * sleepTime) {
                            correctSleepTime = 0;
                            //不睡眠
                        } else if ((a - b) < sleepTime) {
                            correctSleepTime = sleepTime - (a - b - correctSleepTime);
                        }
                    }
                    if (correctSleepTime > 0) {
                        Thread.sleep(correctSleepTime);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            } else if (isChangeCenterBitmap) {
                canvas = holder.lockCanvas(); // 获得画布对象，开始对画布画画
                if (canvas == null) {
                    continue;
                }
                canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                //                canvas.drawColor(canvasColor); // 把画布填充指定颜色
                drawCenterBitmap();
                drawCircle();
                holder.unlockCanvasAndPost(canvas); // 完成画画，把画布显示在屏幕上
            }
        }
    }

有几个要注意的地方：

• lockCanvas()用来获取当前canvas绘图对象，绘制完毕后通过holder.unlockCanvasAndPost(canvas)方法来提交画布内容
• 由于每次循环都是通过lockCanvas()来获取的canvas对象，因此会保留上一次的绘图操作，所以我们每次回之前都需要通过drawcolor()来进行清屏操作
• isSustainedDraw标记位来判断手指持续按住屏幕的状态，在按下的状态下才会刷新
• isChangeCenterBitmap标记位用来在手指不触碰屏幕的情况下限制屏幕只刷新一次，节省资源
• 使用Thread.sleep(correctSleepTime)尽可能的节省系统资源

画按钮图形的方法

private void drawCenterBitmap() {
        int area = radius - centerBitmap_margin * dp;
        RectF imageRect = new RectF(px - area, py - area, px + area, py + area);

        if (isChangeCenterBitmap) {
            if (!isGetBitmap) {
                if (isSustainedDraw) {
                    bitmap = BitmapFactory.decodeResource(getResources(), stopBitmap);
                } else {
                    bitmap = BitmapFactory.decodeResource(getResources(), startBitmap);
                }
            }
            isChangeCenterBitmap = false;
        }
        canvas.drawBitmap(bitmap, null, imageRect, pPaint);
    }

通过isSustainedDraw判断后使用canvas.drawBitmap()方法绘制相应的图片

通过这个方法绘制灰色大圆、绿色圆点和圆弧

public void drawCircle() {

        //绘制大圆
        pPaint.setColor(Color.LTGRAY);
        pPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(px, py, radius, pPaint);

        //绘制原点
        if (isDrawSmallCircle) {
            pPaint.setColor(smallCircleColor);
            pPaint.setStyle(Paint.Style.FILL);

            //radians=angle * Math.PI / 180 角度转弧度公式
            //Math.cos(radians) * defaultRadius cos计算x轴偏移量,sin计算y轴偏移量
            float ballX = (float) (px + radius * Math.cos(angle * Math.PI / 180));
            float ballY = (float) (py + radius * Math.sin(angle * Math.PI / 180));
            canvas.drawCircle(ballX, ballY, 4 * dp, pPaint);
        }

        //绘制圆弧
        if (isDrawArc) {
            pPaint.setStyle(Paint.Style.STROKE);
            //            pPaint.setColor(Color.parseColor(arcColor));
            pPaint.setColor(arcColor);
            RectF rect = new RectF(px - radius, py - radius, px + radius, py + radius);
            canvas.drawArc(rect, startAngle, sweepAngle, false, pPaint);//画弧形
        }

        float speed = 360 / (duration * (1000 / sleepTime));
        //        Log.i(TAG, "drawCircle: speed:"+speed);
        angle = angle + speed;
        if (angle > 360) {
            angle = 0;
        }
        sweepAngle = sweepAngle + speed;
        if (sweepAngle > 360) {
            reset();
            if (completeTimeCallBack != null) {
                completeTimeCallBack.stop();
            }
            isSustainedDraw = false;
            isChangeCenterBitmap = true;
        }
    }

画大圆较简单,设置好paint属性后使用drawCircle()方法即可
画圆弧也比较容易,设置好RectF类的坐标和paint属性后,使用drawArc()方法即可
需要注意的是画圆点,重点在于怎么计算圆点围绕中心旋转时的坐标:
我们可以使用Math.cos(radians) * radius来计算X轴偏移量,Math.sin(radians) * radius来计算Y轴偏移量,radians表示弧度,可以通过angle * Math.PI / 180来计算

用到的包装方法，可以设置一些属性

 public void startDraw() {
        isChangeCenterBitmap = true;
        isSustainedDraw = true;
    }

    public void stopDraw() {
        isChangeCenterBitmap = true;
        isSustainedDraw = false;
    }

    public void reset() {
        isStart = true;
        angle = startAngle;
        sweepAngle = 0;
    }

    //设置圆弧颜色，用#RRGGBB 或者 #AARRGGBB
    public void setArcColor(int arcColor) {
        this.arcColor = arcColor;
    }

    //设置小圆点颜色，用#RRGGBB 或者 #AARRGGBB
    public void setSmallCircleColor(int smallCircleColor) {
        this.smallCircleColor = smallCircleColor;
    }

    public void setDefaultRadius(int defaultRadius) {
        this.defaultRadius = defaultRadius;
    }

    public void setStartBitmap(int startBitmap) {
        this.startBitmap = startBitmap;
    }

    public void setStopBitmap(int stopBitmap) {
        this.stopBitmap = stopBitmap;
    }

    public void setDuration(float duration) {
        this.duration = duration;
    }

xml布局

<com.gavinandre.customviewsamples.view.CircleRecordSurfaceView
        android:id="@+id/circle_record_view"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_centerInParent="true"/>

使用方法

mCircleRecordView.setDuration(6);
        mCircleRecordView.setStartBitmap(R.mipmap.audio_record_mic_btn);
        mCircleRecordView.setStopBitmap(R.mipmap.audio_record_mic_btn_press);
        mCircleRecordView.setArcColor(ContextCompat.getColor(this, R.color.record_green));
        mCircleRecordView.setSmallCircleColor(ContextCompat.getColor(this, R.color.record_green));
        mCircleRecordView.setDefaultRadius(50);
        mCircleRecordView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mCircleRecordView.startDraw();
                        break;
                    case MotionEvent.ACTION_UP:
                        mCircleRecordView.reset();
                        mCircleRecordView.stopDraw();
                        break;
                    default:
                        break;
                }
                return true;
            }
        });

如果要写其他逻辑的话在onTouch方法里添加即可

代码示例:
CustomViewSamples