用DrawText实现高效的Android倒计时功能。

上一篇博客也说了要实现一个倒计时的自定义控件，这次就把写好的自定义控件给发出来。暂时用着还没有什么问题，功能还较弱，日后可能会继续强化，目前就这样了，觉得还不错的话可以自己修改。

2016.01.19修复bug：当设置空间的宽度为WrapContent时，如果小时的位数超过3位，那么会导致控件显示不全，这是因为测量的时候是按两位小时来算的，只要在设置时间的时候请求重新测量就可以了。代码已改，下载Demo的请自行对照博客修改（在setTime那个方法）。
2016.01.28修复bug：不能自己new Handler， View本身自带Handler，可以直接使用。new Handler可能会导致回调重复执行，并且内存溢出

一、成品预览

小时位数的切换和倒计时结束的回调。
可以设置字体大小，颜色，分隔符，分隔符两边的margin。

二、使用方式

1. 首先定义一些自定义属性。

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CountDownTimeView">
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color|reference"/>
        <attr name="division" format="string"/>
        <attr name="divisionMargin" format="dimension"/>
    </declare-styleable>
</resources>

2. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.aitsuki.countdowntime.CountDownTimeView  android:id="@+id/time_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" app:textSize="60dp" app:textColor="#0f0" app:divisionMargin="3dp" app:division=":"/>

    <com.aitsuki.countdowntime.CountDownTimeView  android:id="@+id/time_view2" android:layout_width="match_parent" android:layout_height="wrap_content" app:textSize="60dp" app:textColor="#f00" app:divisionMargin="3dp" app:division="|"/>

</LinearLayout>

3. activity中设置时间和回调监听

package com.aitsuki.countdowntime;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CountDownTimeView time_view = (CountDownTimeView) findViewById(R.id.time_view);
        time_view.setTime(3000L);   // 设置倒计时的时间，long类型，注意超过int最大值后会变成负数，所以最好加上L。
        time_view.setOnTimeFinishCallBack(new CountDownTimeView.OnTimeFinishCallBack() {    // 倒计时结束的回调
            @Override
            public void timeFinish() {
                Toast.makeText(MainActivity.this,"倒计时结束了", Toast.LENGTH_SHORT).show();
            }
        });
        time_view.start();  // 开始计时

        CountDownTimeView time_view2 = (CountDownTimeView) findViewById(R.id.time_view2);
        long time = 1000*60*60*1000L + 3000; // 设置倒计时的时间，long类型，注意超过int最大值后会变成负数，所以最好加上L。
        time_view2.setTime(time);
        time_view2.start();
    }
}

三、代码实现

对于DrawText有疑问的，虽然类的文档注释有一些说明，但最好还是去看看我的另外一篇帖子。Android paint的drawText() 的正确使用方式

1. 关于测量

高度一律使用paint.getTextBounds()获得
宽度一律使用paint.measureText()获得

控件的总宽度 = padding + 数字的宽度 + 分隔符的宽度 + 分隔符的margin
控件的总高度 = padding + 数字的高度
数字的baseLine = 控件的总高度 - 数字的bottom - paddingBottom
分隔符baseLine = 控件的总高度 - 分隔符的bottom - paddingBottom + 数字的高度/2 - 分隔符高度 /2

2. 关于Draw

计算好偏移量就可以了
因为是从“控件总宽度/2 - 控件的实际宽度/2”的位置开始画，所以控件默认是水平居中的。

3. 代码

package com.aitsuki.countdowntime;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Handler;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;


/** * Created by AItsuki on 2015/12/25. * <p/> * 关于 baseLine: * 画文字的位置和画图形的位置是不一样的 * 画图形是从图形的left和top的位置开始往右下方向画，这个不再详细说明 * 而画文字是从文字的左边和文字的baseline往右上方画，所以如果将文字画在0，0 的位置上， * 那么你就只能看到文字底部的一点点了，其实就是baseline下面的一点点内容，这时候y=0其实就是baseline了。 * <p/> * 并且画出来的文字左边会和屏幕边框有一定的距离，那是因为文字本身就是有边距的，可以理解为默认字间距。 * drawText("AItsuki的博客~",0, 0, Paint paint); 可以自己去试试。 * <p/> * drawText(String text,int x, int baseline, Paint paint); * 那么怎么才能将画出来的文字贴合屏幕呢。 * 这就需要计算文字的最小包裹区域了，就是没有算上字间距和行间距的区域。 * Paint提供了一个方法， getTextBounds; 传入一个Rect对象可以获得文字的左上右下（相对于左上角0，0位置）和最小宽高。 * <p/> * 顶部贴合屏幕： * 上面也说过，y=0的位置其实就是baseline,而露出的一点点其实就是rect.bottom。很容易可以得出 * 当baseline = rect.height - rect.bottom的时候，就可以恰好将文字显示完全。 * <p/> * 左边贴合屏幕（不推荐去掉边距，下面有说）： * 第一种：减去左边的边距。drawText("AItsuki的博客~",-rect.left , baseline, Paint paint) * 第二种：也是减去左边的边距，换种方式减而已，设置paint.textAlign为center从中间开始画 * paint.setTextAlign(Paint.Align.CENTER); * drawText("AItsuki的博客~",rect.width()/2 , baseline, Paint paint) * 这两种方法都有弊端，所以不推荐使用，如果是一次性画一段文字或者每次只画一个字拼起来没问题， * 但是两个字两个字的画就不太好，因为每个字的宽度都不一样，会导致字和字之间的距离不一致。 * <p/> * 关于rect.width()和 paint.measureText() * 前者是获取最小包裹区域的宽度，后者是获取加上左右边距的宽度。 * 推荐使用后者，因为前者0123456789,各个数字的宽高不一致，测量会出问题。 * 非要用rect.width()的话要分开计算宽高，4是最宽的但是也是最矮，0是最高的但是宽度不够，所以干脆用measureText就行了。 */
public class CountDownTimeView extends View {

    // 有关字体的一些自定义
    private float mTextSize = dip2px(60); // 字体大小
    private int mTextColor = 0xff000000; // 字体颜色

    // 分隔符的一些自定义
    private String mDivision = ":";     // 分隔符的样式
    private float mDivisionMargin = dip2px(3); // 分隔符的margin

    // 一些默认初始值
    private int mHoursLength = 2;   // 小时的位数
    private long mOverPlusTime;    // 剩余的时间（long）

    private Paint mTextPaint;
    //---------------------------------------------------
    private float mNumWidth;    // 数字的宽度
    private int mNumHeight;     // 数字的高度
    private int mNumBottom;     // 数字的底部在屏幕上的位置，关于这个的详细解释看注释
    private int mNumBaseLine;   // 数字baseline = rect.height()文字的最小高度 - rect.bottom文字底边的距离; 不是真正的baseline,详情请看类描述

    private float mDivisionWidth; //分隔符的宽度
    private int mDivisionHeight;  // 分隔符的高度
    private int mDivisionBottom;   // 分隔符底边的距离
    private int mDivisionBaseLine;  // 分隔符的baseline

    private int mHours;         // 小时
    private int mMinute;        // 分钟
    private int mSecond;        // 秒
    private int mViewWidth;     // 控件的宽度

    private CountDownRunnable mRunnable;    // 倒计时的Runnable
    private OnTimeFinishCallBack mOnTimeFinishCallBack; // 倒计时结束的回调
    private int paddingLeft;
    private int paddingRight;
    private int paddingTop;
    private int paddingBottom;

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

    public CountDownTimeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownTimeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CountDownTimeView);
        mTextColor = array.getColor(R.styleable.CountDownTimeView_textColor, mTextColor);
        mTextSize = array.getDimension(R.styleable.CountDownTimeView_textSize, mTextSize);
        String division = array.getString(R.styleable.CountDownTimeView_division);
        mDivisionMargin = array.getDimension(R.styleable.CountDownTimeView_divisionMargin, mDivisionMargin);
        array.recycle();

        if (!TextUtils.isEmpty(division)) {
            mDivision = division;
        }

        //--------------------
        // 初始化画笔
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);

        // 获取文字的最小包裹区域
        Rect rect = new Rect();
        mTextPaint.getTextBounds("0", 0, 1, rect);

// mNumWidth = rect.width(); //不能用这个获取宽度，获取的宽度比实际宽度小，文字默认有边距
        mNumWidth = mTextPaint.measureText("0"); // 获取文字占用的宽度
        mNumHeight = rect.height();
        mNumBottom = rect.bottom;


        // 计算分隔符
        mTextPaint.getTextBounds(mDivision, 0, mDivision.length(), rect);
// mDivisionWidth = rect.width(); //不能用这个获取宽度，获取的宽度比实际宽度小，文字默认有边距
        mDivisionWidth = mTextPaint.measureText(mDivision);    // 获取文字占用的宽度
        mDivisionHeight = rect.height();
        mDivisionBottom = rect.bottom;

        setTime(mOverPlusTime); // 设置初始时间
        mRunnable = new CountDownRunnable();  // 创建runnable对象
    }

    // 计算一个整数的位数
    private int numberLength(int num) {
        int length = 1;
        while (num > 9) {
            length++;
            num = num / 10;
        }
        return length;
    }

    /** * dp转px * * @param dip * @return */
    private int dip2px(int dip) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dip * density + 0.5f);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        paddingLeft = getPaddingLeft();
        paddingRight = getPaddingRight();
        paddingTop = getPaddingTop();
        paddingBottom = getPaddingBottom();
        // mNumbaseLine = mNumHeight + paddingTop + paddingBottom - (mNumBottom + paddingBottom) 得到下面
        mNumBaseLine = mNumHeight - mNumBottom + paddingTop;
        mDivisionBaseLine = mDivisionHeight - mDivisionBottom + paddingTop + mNumHeight / 2 - mDivisionHeight / 2;

        mViewWidth = getContentWidth();
        mViewWidth = resolveSize(mViewWidth, widthMeasureSpec); 
        int mViewHeight = resolveSize(mNumHeight + paddingTop + paddingBottom, heightMeasureSpec);
        setMeasuredDimension(mViewWidth, mViewHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float hoursWidth = mNumWidth * mHoursLength;
        float minuteWidth = mNumWidth * 2;
        // float secondWidth = mNumWidth * 2; 暂时没用

        // 如果控件的长变短了(例：100小时 --> 99 小时)，设置left，让控件居中。
        int contentWidth = getContentWidth();
        float hoursLeft = mViewWidth > contentWidth ? mViewWidth / 2 - contentWidth / 2 : 0 + paddingLeft;

        float minuteLeft = hoursLeft + hoursWidth + mDivisionWidth + mDivisionMargin * 2;
        float secondLeft = minuteLeft + minuteWidth + mDivisionWidth + mDivisionMargin * 2;
        // 小时
        canvas.drawText(formatNum(mHours), hoursLeft, mNumBaseLine, mTextPaint);
        canvas.drawText(mDivision, hoursLeft + hoursWidth + mDivisionMargin, mDivisionBaseLine, mTextPaint);
        // 分钟
        canvas.drawText(formatNum(mMinute), minuteLeft, mNumBaseLine, mTextPaint);
        canvas.drawText(mDivision, minuteLeft + minuteWidth + mDivisionMargin, mDivisionBaseLine, mTextPaint);
        // 秒
        canvas.drawText(formatNum(mSecond), secondLeft, mNumBaseLine, mTextPaint);
    }

    private String formatNum(int num) {
        return num < 10 ? "0" + num : String.valueOf(num);
    }

    /** * 计算控件的总长度 * * @return */
    private int getContentWidth() {
        float width = mDivisionWidth * 2 + mDivisionMargin * 4 + mNumWidth * (4 + mHoursLength);
        width += paddingLeft + paddingRight;
        return (int) Math.ceil(width);
    }

    /** * 设置结束的回调侦听 * * @param callBack */
    public void setOnTimeFinishCallBack(OnTimeFinishCallBack callBack) {
        this.mOnTimeFinishCallBack = callBack;
    }

    /** * 开始倒计时 */
    public void start() {
        postDelayed(mRunnable, 1000);
    }

    /** * 设置倒计时的总时长 * * @param ms */
    public void setTime(long ms) {
         ms = ms < 0? 0 : ms;    // 时间不能为负数，如果设置时间的时候使用int类型，并且超过int的最大值可能会出现负数。
        this.mOverPlusTime = ms;
        mHours = (int) (ms / (60 * 60 * 1000));
        mMinute = (int) (ms % (60 * 60 * 1000) / (60 * 1000));
        mSecond = (int) (ms % (60 * 60 * 1000) % (60 * 1000) / 1000);
        int length = numberLength(mHours);
        length = length == 1 ? 2 : length;

        // 如果小时长度发生了变化，需要重新测量。
        if(length != mHoursLength) {
            requestLayout();
        }
        mHoursLength = length;
    }

    class CountDownRunnable implements Runnable {
        @Override
        public void run() {
            mOverPlusTime -= 1000;
            if (mOverPlusTime > 0) {
                setTime(mOverPlusTime);
                invalidate();
                postDelayed(mRunnable, 1000);
            } else {
                if (mOverPlusTime == 0) {
                    setTime(mOverPlusTime);
                    invalidate();
                }
                removeCallbacks(mRunnable);
                if (mOnTimeFinishCallBack != null) {
                    mOnTimeFinishCallBack.timeFinish();
                }
            }
        }
    }

    public interface OnTimeFinishCallBack {
        void timeFinish();
    }
}

4. Demo下载地址

http://download.csdn.net/detail/u010386612/9380742

四、后话

感觉这个自定义控件写出来并没有什么用，没有哪款APP会有这么奇葩的倒计时需求吧，很可惜博主我就遇上了……
这个控件写的比较简单，注释也算完整，希望能和各位网友共同学习交流。
本来想写一个系列的View 到viewGroup的基础和进阶，但是看到这类型的博文太多了，我不觉得会写的比他们好， 所以也就放弃了，之后估计会一直写一些自定义控件，希望大家多多支持。