電商活動是比較多的,所以活動倒計時功能是必不可少的,自己當初實現的時候是採用複合佈局,最近突然發現京東的竟然是用原生的ImageView實現的,666啊!於是就開始Google,終於找到了類似的實現方法,就是利用android的ImageSpan實現的,看到這篇文章後,頓時醒悟,之前有了解過各種Span,沒有想到還可以這麼用.
  那就開始我們今天的重點
  ImageSpan,

public class BackgroundSpan extends ImageSpan {
    private Rect mTextBound;
    private int maxHeight = 0
 
;
    private int maxWidth = 0;
    private int mPaddingLeft = 20;
    private int mPaddingRight = 20;
    private int mPaddingTop = 20;
    private int mPaddingBottom = 20;
    private int mTextColor = Color.GREEN;
    private int mTextSize = 50;

    public BackgroundSpan(Drawable d, int verticalAlignment) {
        super
 
(d, verticalAlignment);
        mTextBound = new Rect();
    }

    public BackgroundSpan setTimerTextColor(int mTextColor) {
        this.mTextColor = mTextColor;
        return this;
    }

    public BackgroundSpan setTimerTextSize(int textSize) {
        this.mTextSize = textSize;
        return
 
 this;
    }

    public BackgroundSpan setTimerPadding(int left, int top, int right, int bottom) {
        this.mPaddingLeft = left;
        this.mPaddingRight = right;
        this.mPaddingBottom = bottom;
        this.mPaddingTop = top;
        return this;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        //繪制文字的內容的背景
        paint.setTextSize(mTextSize);
        //測量文字的寬度和高度，通過mTextBound得到
        paint.getTextBounds(text.toString(), start, end, mTextBound);
        //設定文字背景的寬度和高度，傳入的是left,top,right,bottom四個引數
        maxWidth = maxWidth < mTextBound.width() ? mTextBound.width() : maxWidth;
        maxHeight = maxHeight < mTextBound.height() ? mTextBound.height() : maxHeight;
        //設定最大寬度和最大高度是為了防止在倒計時在數字切換的過程中會重繪，會導致倒計時邊框的寬度和高度會抖動，
        // 所以每次取得最大的高度和寬度而不是每次都去取測量的高度和寬度
        getDrawable().setBounds(0, 0, maxWidth + mPaddingLeft + mPaddingRight, mPaddingTop + mPaddingBottom + maxHeight);
        //設定文字的顏色
        paint.setColor(mTextColor);
        //設定字型的大小
        paint.setTextSize(mTextSize);
        int mGapX = (getDrawable().getBounds().width() - maxWidth) / 2;
        //繪制文字內容
        canvas.drawText(text.subSequence(start, end).toString(), x + mGapX, y , paint);
        //解決設定ImageSpan後其它文字不居中的問題
        Drawable b = getDrawable();
        canvas.save();
        int transY = 0;
        //獲得將要顯示的文字高度-圖片高度除2等居中位置+top(換行情況)
        transY = ((bottom-top) - b.getBounds().bottom)/2+top;
        //偏移畫布後開始繪製
        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        Drawable d = getDrawable();
        Rect rect = d.getBounds();
        if (fm != null) {
            //解決設定ImageSpan後其它文字不居中的問題
            Paint.FontMetricsInt fmPaint=paint.getFontMetricsInt();
            //獲得文字、圖片高度
            int fontHeight = fmPaint.bottom - fmPaint.top;
            int drHeight=rect.bottom-rect.top;

            int top= drHeight/2 - fontHeight/4;
            int bottom=drHeight/2 + fontHeight/4;

            fm.ascent=-bottom;
            fm.top=-bottom;
            fm.bottom=top;
            fm.descent=top;
        }
        return rect.right;
    }
}

  還要簡單的說明一下,如果我們只簡單的重寫draw方法,我們會發現沒有設定ImageSpan的文字不會居中,所以我們需要處理一下,核心就是getSize()方法以及draw()裡面畫布的偏移.
  接下來就是我們今天的第二位明星
  CountDownTimer

public class MyCountDownTimer extends CountDownTimer {
    private Context mContext;
    protected TextView mDateTv;
    private String mTimePattern = "HH:mm:ss";
    private String mTimeStr;
    private int mDrawableId;
    private boolean flag = false;
    protected String[] numbers;//此陣列用於生存每個倒計時字元拆分後的天,時,分,秒的數值
    protected List mBackSpanList;
    protected List mTextColorSpanList;
    //用於倒計時樣式的內間距,字型大小,字型顏色,倒計時間隔的顏色
    private int mSpanPaddingLeft, mSpanPaddingRight, mSpanPaddingTop, mSpanPaddingBottom;
    private int mSpanTextSize;
    private int mSpanTextColor;
    protected int mGapSpanColor;
    private SpannableString mSpan;


    public MyCountDownTimer(Context context, long millisInFuture, long countDownInterval, String timePattern, int drawableId, TextView textView) {
        super(millisInFuture, countDownInterval);
        mContext = context;
        mTimePattern = timePattern;
        mDrawableId = drawableId;
        mBackSpanList = new ArrayList<>();
        mTextColorSpanList = new ArrayList<>();
        mDateTv = textView;
    }

    @Override
    public void onTick(long millisUntilFinished) {
        //此處也是一個核心所在,DurationFormatUtils.formatDuration這是apache的org.apache.commons的lang裡面的,所以還需要引入它的jar包
        mTimeStr = DurationFormatUtils.formatDuration(millisUntilFinished, mTimePattern);
        setBackgroundSpan(mTimeStr);
    }

    @Override
    public void onFinish() {

    }

    public void setBackgroundSpan(String timeStr) {
        if (!flag) {
            initSpanData(timeStr);
            flag = true;
        }
        int mGapLen = 1;
        mSpan = new SpannableString(timeStr);
        for (int i = 0; i < mBackSpanList.size(); i++) {
            int start = i * numbers[i].length() + i * mGapLen;
            int end = start + numbers[i].length();
            //為數字設定ImageSpan
            setContentSpan(mSpan, mBackSpanList.get(i), start, end);
            if (i < mTextColorSpanList.size()) {//這裡為了就是防止12:36:27這種樣式，這種樣式距離只有２個以是須要做斷定，防止陣列越界
                setContentSpan(mSpan, mTextColorSpanList.get(i), end, end + mGapLen);
            }
        }
        mDateTv.setMovementMethod(LinkMovementMethod.getInstance());//此要領很主要須要挪用，不然繪製出來的倒計時就是重疊的樣式
        mDateTv.setText(mSpan);
    }

    public void initSpanData(String timeStr) {
        numbers = getNumInTimerStr(timeStr);
        for (int i = 0; i < numbers.length; i++) {
            BackgroundSpan backgroundColorSpan = new BackgroundSpan(ContextCompat.getDrawable(mContext, mDrawableId), ALIGN_BASELINE);
            initBackSpanStyle(backgroundColorSpan);
            mBackSpanList.add(backgroundColorSpan);
        }
    }

    protected void initBackSpanStyle(BackgroundSpan mBackSpan) {
        mBackSpan.setTimerPadding(mSpanPaddingLeft, mSpanPaddingTop, mSpanPaddingRight, mSpanPaddingBottom);
        mBackSpan.setTimerTextColor(mSpanTextColor);
        mBackSpan.setTimerTextSize(mSpanTextSize);
    }


    public void cancelTimer() {
        this.cancel();
    }

    public void startTimer() {
        this.start();
    }

    public String getmTimeStr() {
        return mTimeStr;
    }

    public MyCountDownTimer setTimerTextSize(int textSize) {
        this.mSpanTextSize = textSize;
        return this;
    }

    public MyCountDownTimer setTimerPadding(int left, int top, int right, int bottom) {
        this.mSpanPaddingLeft = left;
        this.mSpanPaddingBottom = bottom;
        this.mSpanPaddingRight = right;
        this.mSpanPaddingTop = top;
        return this;
    }

    public MyCountDownTimer setTimerTextColor(int color) {
        this.mSpanTextColor = color;
        return this;
    }

    public MyCountDownTimer setTimerGapColor(int color) {
        this.mGapSpanColor = color;
        return this;
    }
    //得到倒計時數字部分
    public static String[] getNumInTimerStr(String mTimerStr){
        return mTimerStr.split("[^\\d]");
    }
    //設定內容的Span
    public static void setContentSpan(SpannableString mSpan, Object span, int start,
                                      int end) {
        mSpan.setSpan(span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }
}

  使用方法如下:

new MyCountDownTimer(mContext,1000*60*60,1000,"HH:mm:ss",
R.drawable.timer_shape,mTextViewDurationFormat)
.setTimerPadding(10,10,10,10)
                .setTimerTextColor(Color.YELLOW)
                .setTimerTextSize(16)
                .setTimerGapColor(Color.BLACK);