Android自定義View之倒計時Countdown實現

先看一下效果：

在點擊OK鍵之后，開始倒計時。

實現步驟

1、新建Android工程"CountdownView"

2、自定義Drawable

自定義View並沒有直接的用戶交互，簡化起見，可以自定義實現一個drawable，作為ImageView的背景

觀察一下View的構成，分為幾個部分：

1. 外圍圓環邊界

2. 進度條

3. 內部圓形背景

4. 倒計時數字

另外，要畫出這幾個部分，畫筆Paint肯定少不了

好了，自定義一個“CountdownDrawable”繼承Drawable

public class CountdownDrawable extends Drawable {

    //畫筆
    private Paint mPaint;
    private RectF mArcRect;
    
    //當前進度條進度
    private float progress;
    //邊框圓顏色
    private int outlineColor;
    //內部背景圓顏色
    private int innerColor;
    //進度條顏色
    private int ringColor;
    //進度條寬度
    private int ringWidth;
    //倒計時數字
    private int showNumber;
    //數字顏色
    private int textColor;

    @Override
    public void draw(Canvas canvas) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
    }

    @Override
    public int getOpacity() {
        return mPaint.getAlpha();
    }

}

變量初始化：

public CountdownDrawable(int ringWidth, int outlineColor, int innerColor, int ringColor, int showNumber, int textColor) {
    mPaint = new Paint();
    mArcRect = new RectF();
        
    this.outlineColor = outlineColor;
    this.innerColor = innerColor;
    this.ringColor = ringColor;
    this.ringWidth = ringWidth;
    this.showNumber = showNumber;
    this.textColor = textColor;
}

 

3、 實現draw方法

public void draw(Canvas canvas) {
    //獲取view的邊界
    final Rect bounds = getBounds();
        
    int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();
    float outerRadius = ((size / 2) * 0.75f) * 0.937f;
    float innerRadius = ((size / 2) * 0.75f) * 0.75f;
    float offsetX = (bounds.width() - outerRadius * 2) / 2;
    float offsetY = (bounds.height() - outerRadius * 2) / 2;
        
    //畫邊框圓
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(1);
    mPaint.setColor(outlineColor);
    canvas.drawCircle(bounds.centerX(), bounds.centerY(), outerRadius, mPaint);
        
    //畫內部背景
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(innerColor);
    canvas.drawCircle(bounds.centerX(), bounds.centerY(), innerRadius, mPaint);
        
    //畫倒計時數字
    float textSize = innerRadius * 2 * 0.75f;
    mPaint.setTextSize(textSize);
    mPaint.setTextAlign(Align.CENTER);
    mPaint.setColor(textColor);
    float textX = bounds.centerX();
    float textY = bounds.centerY() - (mPaint.descent() + mPaint.ascent()) / 2; 
    canvas.drawText(Integer.toString(showNumber), textX, textY, mPaint);
        
    //畫進度條
    int halfRingWidth = ringWidth / 2;
    float arcX0 = offsetX + halfRingWidth;
    float arcY0 = offsetY + halfRingWidth;
    float arcX = offsetX + outerRadius * 2 - halfRingWidth;
    float arcY = offsetY + outerRadius * 2 - halfRingWidth;
        
    mPaint.setColor(ringColor);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(ringWidth);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mArcRect.set(arcX0, arcY0, arcX, arcY);
    canvas.drawArc(mArcRect, 89, progress, false, mPaint);
}

 

4、 設置進度條及倒計時數字

public float getProgress() {
    return progress / PROGRESS_FACTOR;
}

public void setProgress(float progress) {
    this.progress = progress * PROGRESS_FACTOR;
        
    invalidateSelf();
}

public int getShowNumber() {
    return showNumber;
}

public void setShowNumber(int showNumber) {
    this.showNumber = showNumber;
        
    invalidateSelf();
}

 

5、 在Activity中完成drawable的使用

首先定義一個ImageView，設置其圖片為剛剛定義的drawable

mIv = (ImageView)findViewById(R.id.iv);
mCdDrawable = new CountdownDrawable(getResources().getDimensionPixelSize(R.dimen.drawable_ring_size),  getResources().getColor(R.color.dark_grey), getResources().getColor(R.color.brightly_grey)
                , getResources().getColor(R.color.holo_green_light), 5, getResources().getColor(R.color.red));
mIv.setImageDrawable(mCdDrawable);

各顏色定義如下：

<dimen name="drawable_ring_size">4dp</dimen>

<color name="dark_grey">#FF54585A</color>
<color name="holo_green_light">#FF99CC00</color>
<color name="brightly_grey">#CF9EA2A2</color>
<color name="red">#FFE61E27</color>

使用屬性動畫，計算進度條progress及倒計時數字showNumber

private Animator prepareAnimator() {
    AnimatorSet animation = new AnimatorSet();
        
    // 進度條動畫
    ObjectAnimator progressAnimator = ObjectAnimator.ofFloat(mCdDrawable, "progress", 1f, 0f);
    progressAnimator.setDuration(5000);
    progressAnimator.setInterpolator(new LinearInterpolator());
    progressAnimator.addListener(new Animator.AnimatorListener() {
            
        @Override
        public void onAnimationStart(Animator animation) {
                
        }
            
        @Override
        public void onAnimationRepeat(Animator animation) {
        
        }
            
        @Override
        public void onAnimationEnd(Animator animation) {
            mIv.setVisibility(View.GONE);
        }
            
        @Override
        public void onAnimationCancel(Animator animation) {
            mIv.setVisibility(View.GONE);
        }
    });
        
    // 居中的倒計時數字
    ObjectAnimator showNumberAnimator = ObjectAnimator.ofInt(mCdDrawable, "showNumber", 5, 0);
    showNumberAnimator.setDuration(5000);
    showNumberAnimator.setInterpolator(new LinearInterpolator());
        
    animation.playTogether(progressAnimator, showNumberAnimator);
    return animation;
}

最后在button中添加點擊事件

private View.OnClickListener mBtnOnClickListener = new View.OnClickListener() {
        
    @Override
    public void onClick(View v) {
        if(mAnimator != null) {
            mAnimator.cancel();
        }
        mIv.setVisibility(View.VISIBLE);
        mAnimator = prepareAnimator();
        mAnimator.start();
    }
};

 

完整工程代碼放到了github上