用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的基础和进阶，但是看到这类型的博文太多了，我不觉得会写的比他们好， 所以也就放弃了，之后估计会一直写一些自定义控件，希望大家多多支持。