自定义倒计时View的性能优化

在文章之前先放一张效果图， 动画很简单，每倒数一秒，一个指针变亮，中间刷新时间。

在之前UI还没有和我讨论这个效果的时候，就给了我60张图，让我一秒刷新一个bitmap。

第一种方法：直接draw bitmap。

当然，不用想我就是拒绝的。60张图，一张图像素是320*230。60张图总共占用内存是320*320*4*60/1024 = 23MB 内存。为了一个动画占用24MB内存肯定是得不偿失的。虽然代码比较简单，但是我们肯定不会这样来写。

所以这种动画需要canvas来画了。

第二种方法：canvas draw line。

这种方法就是先画一条线，再将canvas旋转一个角度(6度)，重复画60次就完成了一个圆。关键代码如下：

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);
        float startX = getWidth() >> 1;
        float startY = margin;
        float endX = getWidth() >> 1;
        float endY = margin + lineLength;

        final int roundXY = Math.min(getWidth() >> 1, getHeight() >> 1);

        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
        canvas.drawText(countString, getWidth() / 2, getHeight() / 2 + fontMetrics.descent, textPaint);
        canvas.save();
        for (int i = 0; i < count; i++) {
            if (i <= countIndex) {
                paint.setColor(colorHighLight);
            } else {
                paint.setColor(colorNormal);
            }
            canvas.drawLine(startX, startY, endX, endY, paint);
            canvas.rotate(degree, roundXY, roundXY);
        }
        canvas.restore();

    }

功能是完成了。下一步就是检查性能了。于是用GPU呈现模式查看时间，发现耗时太长。在小米2,2G内存上 整个循环修改为6000次，需要400毫秒左右的时间，60次就是4毫秒，虽然节省了内存，但是耗时增加了，性能也不是很好。于是我就想到了第三种方法。

第三种方法：draw bitmap + line

这种方法就是初始化60次画线生成一张背景图，将背景图作为一个我们自己的canvas，然后倒计时一秒画线在bitmap上，系统canvas只画bitmap和时间。相当于一次倒计时只画3次：bitmap，line，text 比第二种方式60 * line + text 要少太多。bitmap占用的内存是320*320*4 = 400K，内存可以接受。具体代码如下：

package sunday.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Region;
import android.os.CountDownTimer;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by sunday on 2017/5/26.
 */

public class CountDownView extends View {

    public static final int DEFAULT_HIGHLIGHT_COLOR = 0xffff8000;
    public static final int DEFAULT_NORMAL_COLOR = 0xffcecece;
    public static final int DEFAULT_TEXT_COLOR = 0xff999999;
    public static final int DEFAULT_TEXT_SIZE = 80;
    public static final int DEFAULT_LINE_WIDTH = 3;
    public static final int DEFAULT_LINE_LENGTH = 25;
    final int count = 60;
    final float degree = 360 / count;
    final int margin = 5;
    CalcTime calcTime = new CalcTime("CountDownView");
    private int colorHighLight;
    private int colorNormal;
    private int colorText;
    private int textSize;
    private int lineWidth;
    private int lineLength;
    private Paint paint;
    private Paint textPaint;
    private Paint bitmapPaint;
    private CountDownTimer mCountDownTimer;
    private int countIndex = 0;
    private String countString = "60s";
    private OnTickListener onTickListener;
    private int timeCount = 60 * 1000;
    private int timeInterval = 1 * 1000;
    private Bitmap bitmap;
    private Canvas bitmapCanvas;
    private int roundX;
    private int roundY;

    public CountDownView(Context context) {
        this(context, null);
    }

    public CountDownView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
        colorNormal = typedArray.getColor(R.styleable.CountDownView_lineColorNormal, DEFAULT_NORMAL_COLOR);
        colorHighLight = typedArray.getColor(R.styleable.CountDownView_lineColorHighLight, DEFAULT_HIGHLIGHT_COLOR);
        colorText = typedArray.getColor(R.styleable.CountDownView_textColor, DEFAULT_TEXT_COLOR);
        textSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_textSize, DEFAULT_TEXT_SIZE);
        lineWidth = typedArray.getDimensionPixelSize(R.styleable.CountDownView_lineWidth, DEFAULT_LINE_WIDTH);
        lineLength = typedArray.getDimensionPixelSize(R.styleable.CountDownView_lineLength, DEFAULT_LINE_LENGTH);
        typedArray.recycle();

        init();
        //for debug
        start();
    }

    public void setOnTickListener(OnTickListener onTickListener) {
        this.onTickListener = onTickListener;
    }

    public void setColorNormal(int color) {
        colorNormal = color;
    }

    public void setColorHighLight(int color) {
        colorHighLight = color;
    }

    public void setLineWidth(int width) {
        lineWidth = width;
    }

    public void setLineLenght(int length) {
        lineLength = length;
    }

    /**
     * @param millisInFuture    The number of millis in the future from the call
     *                          to {@link #start()} until the countdown is done
     *                          is called.
     * @param countDownInterval The interval along the way to receive
     */
    public void setCountTime(int millisInFuture, int countDownInterval) {
        timeCount = millisInFuture;
        timeInterval = countDownInterval;
        countString = timeCount + "s";
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(colorNormal);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(lineWidth);
        paint.setStrokeCap(Paint.Cap.ROUND);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(colorText);
        textPaint.setTextSize(textSize);
        textPaint.setTextAlign(Paint.Align.CENTER);

        bitmapPaint = new Paint();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        initBitmapCanvas(w, h);
    }

    private void initBitmapCanvas(int width, int height) {
        //if(bitmap == null){
        bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        bitmapCanvas = new Canvas(bitmap);
        roundX = width / 2;
        roundY = height / 2;
        initDraw();
        //}

    }

    private void initDraw() {
        bitmapCanvas.save();
        float startX = roundX;
        float startY = margin;
        float endX = roundX;
        float endY = margin + lineLength;
        paint.setColor(colorNormal);
        for (int i = 0; i < count; i++) {
            bitmapCanvas.drawLine(startX, startY, endX, endY, paint);
            bitmapCanvas.rotate(degree, roundX, roundY);
        }
        bitmapCanvas.restore();
    }

    public void drawHighLightLine() {
        float startX = roundX;
        float startY = margin;
        float endX = roundX;
        float endY = margin + lineLength;
        paint.setColor(colorHighLight);
        //bitmapCanvas.clipRect(startX, startY, endX, endY, Region.Op.XOR);
        bitmapCanvas.drawLine(startX, startY, endX, endY, paint);
        bitmapCanvas.rotate(degree, roundX, roundY);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);

        drawHighLightLine();
        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
        canvas.drawText(countString, getWidth() / 2, getHeight() / 2 + fontMetrics.descent, textPaint);

        canvas.drawBitmap(bitmap, 0, 0, bitmapPaint);

    }

    private void reDraw(long millisUntilFinished) {
        int sUntilFinished = (int) (millisUntilFinished / 1000);
        countString = sUntilFinished + "s";
        countIndex = count - sUntilFinished;
        postInvalidate();
    }

    public void start() {
        if (mCountDownTimer == null) {
            mCountDownTimer = new CountDownTimer(timeCount, timeInterval) {
                @Override
                public void onTick(long millisUntilFinished) {
                    reDraw(millisUntilFinished);
                    if (onTickListener != null) {
                        onTickListener.onTick(millisUntilFinished);
                    }
                }

                @Override
                public void onFinish() {
                    reDraw(0);
                    if (onTickListener != null) {
                        onTickListener.Finish();
                    }
                }
            };
        }
        stop();
        mCountDownTimer.start();
    }

    public void stop() {
        if (mCountDownTimer != null) {
            mCountDownTimer.cancel();
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stop();
    }

    public interface OnTickListener {
        void onTick(long millisUntilFinished);

        void Finish();
    }


}

此方法 ondraw的时间一次不超过1ms，完全满足要求，内存占用也接受。不过里面有一个问题存在，
drawHighLightLine 中，我为了减少画 bitmapCanvas 的时间，增加了 clipRect 切割，在我的想象中应该会节省时间。
但是实际上我测试将draw代码循环10000次，发现反而慢了一半。与我想象不符合，这个问题需要研究一下