android 實現倒計時自定view

自定義view實現倒計時 CountDownView

效果如下：

自定義控件java代碼：

package com.vpname.vp.widegt;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.text.Layout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import androidx.annotation.Nullable;

import com.vpname.vp.R;
import com.vpname.vp.listener.OnCallBackListener;

import java.util.Timer;
import java.util.TimerTask;

/**
 * @author zhangwei on 2022/6/28.
 */
public class CountDownView extends View {

    /**
     * 填充背景畫筆
     */
    private Paint bgPaint;
    /**
     * 文字畫筆
     */
    private TextPaint textPaint;
    /**
     * 分隔號畫筆
     */
    private TextPaint semicolonPaint;

    private int frameCount = 3;
    private float bgCenterY;
    /**
     * 輸入框的寬高
     */
    private int tvWidthSize = dip2px(80);

    /**
     * 圓角大小
     */
    private int radius = dip2px(0);
    /**
     * 圓角填充顏色
     */
    private int mBgColor = Color.BLACK;
    /**
     * 文字顏色
     */
    private int mTextColor = Color.WHITE;

    /**
     * 文字大小
     */
    private int textSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());

    /**
     * 分號顏色
     */
    private int mSemicolonColor = Color.BLACK;

    /**
     * 分號大小
     */
    private int semicolonSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 60, getResources().getDisplayMetrics());


    /**
     * 邊框間隔顏色
     */
    private int intervalSize = dip2px(20);

    /**
     * 倒計時時間
     * 單位秒
     */
    private int countDownTime = 60;
    /**
     * 是否默認啟動倒計時
     */
    private boolean isAutoPlay = false;
    private OnCallBackListener onCallBackListener;

    public CountDownView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
        intervalSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_ctv_interval_width, intervalSize);
        radius = typedArray.getDimensionPixelSize(R.styleable.CountDownView_ctv_radius, radius);
        textSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_ctv_text_size, textSize);
        tvWidthSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_ctv_text_width, tvWidthSize);
        mTextColor = typedArray.getColor(R.styleable.CountDownView_ctv_text_color, mTextColor);
        semicolonSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_ctv_text_size, semicolonSize);
        mSemicolonColor = typedArray.getColor(R.styleable.CountDownView_ctv_semicolon_color, mSemicolonColor);
        mBgColor = typedArray.getColor(R.styleable.CountDownView_ctv_bg, mBgColor);
        countDownTime = typedArray.getInt(R.styleable.CountDownView_ctv_time, countDownTime);
        isAutoPlay = typedArray.getBoolean(R.styleable.CountDownView_ctv_auto_play, isAutoPlay);
        typedArray.recycle();
        setBackgroundColor(Color.TRANSPARENT);
        // 增加文本監聽器.
        bgPaint = new Paint();
        bgPaint.setStyle(Paint.Style.FILL);
        bgPaint.setColor(mBgColor);

        // 增加文本監聽器.
        textPaint = new TextPaint();
        textPaint.setColor(mTextColor);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(textSize);

        // 增加文本監聽器.
        semicolonPaint = new TextPaint();
        semicolonPaint.setColor(mSemicolonColor);
        semicolonPaint.setAntiAlias(true);
        semicolonPaint.setFakeBoldText(true);
        semicolonPaint.setStrokeWidth(3f);
        semicolonPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        semicolonPaint.setTextSize(semicolonSize);
        if (isAutoPlay) start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        float bgWidth;
        bgWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
        float bgHeight;
        if (heightMode == MeasureSpec.EXACTLY) {
            bgHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
        } else {
            bgHeight = tvWidthSize + dip2px(2);
        }
        bgCenterY = bgHeight / 2;
        setMeasuredDimension((int) bgWidth, (int) bgHeight);
    }


    public void setCountDownTime(int countDownTime) {
        setCountDownTime(countDownTime, false);
    }

    public void setCountDownTime(int countDownTime, boolean isStart) {
        this.countDownTime = countDownTime;
        if (isStart) {
            stop();
            start();
        }
    }


    /**
     * 啟動倒計時
     */
    public void start() {
        if (timer == null && countDownTime > 0) {
            timer = new Timer();
            timer.schedule(timerTask, 1000, 1000);
        }
    }

    /**
     * 停止倒計時倒計時
     */
    public void stop() {
        if (timer != null) {
            timerTask.cancel();
            timer.cancel();
            timer = null;
        }
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawStatEndRadiusRect(frameCount, canvas);
        canvas.save();
        drawText(frameCount, canvas);
        canvas.save();
        drawSemicolon(frameCount, canvas);
        canvas.save();
    }

    /**
     * 繪制前后圓角輸入框不支持焦點輸入框
     */
    private void drawStatEndRadiusRect(int count, Canvas canvas) {
        if (radius == 0) {
            radius = dip2px(5);
        }
        int left = (getWidth() - count * (tvWidthSize) - intervalSize * (count - 1)) / 2;
        for (int i = 0; i < count; i++) {
            RectF rectF = new RectF(left + (tvWidthSize + intervalSize) * i,
                    bgCenterY - tvWidthSize / 2, left + (tvWidthSize + intervalSize) * i + tvWidthSize, bgCenterY + tvWidthSize / 2);
            canvas.drawRoundRect(rectF, radius, radius, bgPaint);
        }
    }


    /**
     * 繪制文字
     */
    private void drawText(int count, Canvas canvas) {
        String[] times = formatTime(countDownTime).split(":");
        int left = (getWidth() - count * (tvWidthSize) - intervalSize * (count - 1)) / 2;
        for (int i = 0; i < count; i++) {
            String text = times[i];
            Rect rect = new Rect();
            textPaint.getTextBounds(text, 0, text.length(), rect);
            float textWidth = Layout.getDesiredWidth(text, textPaint);
            int textHeight = rect.height();
            canvas.drawText(text, left + (tvWidthSize + intervalSize) * i + tvWidthSize / 2 - textWidth / 2, bgCenterY + textHeight / 2, textPaint);
        }
    }


    /**
     * 填充邊框顏色
     */
    public void setBgPaintColor(int color) {
        this.bgPaint.setColor(color);
    }

    /**
     * 繪制分號
     */
    private void drawSemicolon(int count, Canvas canvas) {
        int left = (getWidth() - count * (tvWidthSize) - intervalSize * (count - 1)) / 2;
        String text = ":";
        Rect rect = new Rect();
        semicolonPaint.getTextBounds(text, 0, text.length(), rect);
        float textWidth = Layout.getDesiredWidth(text, semicolonPaint);
        int textHeight = rect.height();
        for (int i = 0; i < count - 1; i++) {
            canvas.drawText(text, left + (tvWidthSize + intervalSize) * (i + 1) - intervalSize / 2 - textWidth / 2, bgCenterY + textHeight / 2, semicolonPaint);
        }
    }

    /**
     * 把密度轉換為像素
     */
    private int dip2px(float px) {
        final float scale = getScreenDensity();
        return (int) (px * scale + 0.5);
    }

    /**
     * 得到設備的密度
     */
    private float getScreenDensity() {
        return getResources().getDisplayMetrics().density;
    }

    private Timer timer;
    private TimerTask timerTask = new TimerTask() {
        @Override
        public void run() {
            countDownTime--;
            invalidate();
            if (onCallBackListener != null)
                onCallBackListener.onTick(countDownTime);
            if (countDownTime <= 0) {
                timerTask.cancel();
                timer.cancel();
                timer = null;
            }
        }
    };


    /**
     * 秒轉成 00：00：00
     *
     * @param seconds
     * @return
     */
    private String formatTime(long seconds) {
        int temp;
        StringBuffer sb = new StringBuffer();
        if (seconds >= 3600) {
            temp = (int) (seconds / 3600);
            sb.append((seconds / 3600) < 10 ? "0" + temp + ":" : temp + ":");
        } else {
            sb.append("00:");
        }
        temp = (int) (seconds % 3600 / 60);
        changeSeconds(seconds, temp, sb);
        return sb.toString();
    }

    private void changeSeconds(long seconds, int temp, StringBuffer sb) {
        sb.append((temp < 10) ? "0" + temp + ":" : "" + temp + ":");
        temp = (int) (seconds % 3600 % 60);
        sb.append((temp < 10) ? "0" + temp : "" + temp);
    }

    public void setOnCallBackListener(OnCallBackListener onCallBackListener) {
        this.onCallBackListener = onCallBackListener;
    }
}

屬性declare-styleable：

 <declare-styleable name="CountDownView">
        <!--倒計時時間-->
        <attr name="ctv_time" format="integer" />
        <!--邊框顏色-->
        <attr name="ctv_bg" format="reference|color" />
        <!--邊框大小-->
        <attr name="ctv_text_width" format="dimension" />
        <!--文字大小-->
        <attr name="ctv_text_size" format="dimension" />
        <!--間隔-->
        <attr name="ctv_interval_width" format="dimension" />
        <!--圓角-->
        <attr name="ctv_radius" format="dimension" />
        <!--文字顏色-->
        <attr name="ctv_text_color" format="reference|color" />
        <!--分號顏色-->
        <attr name="ctv_semicolon_color" format="reference|color" />
        <!--分號大小-->
        <attr name="ctv_semicolon_size" format="dimension" />
        <!--自動倒計時-->
        <attr name="ctv_auto_play" format="boolean" />
    </declare-styleable>

使用說明：

 <com.vpname.vp.widegt.CountDownView
        android:id="@+id/count_time_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        app:ctv_bg="#FF0051"
        app:ctv_interval_width="29dp"
        app:ctv_radius="10dp"
        app:ctv_text_color="@color/white"
        app:ctv_text_size="51.67sp"
        app:ctv_text_width="62dp"
        app:ctv_time="200"
        app:layout_constraintTop_toBottomOf="@id/hint_tv" />

countDownView.setCountDownTime(countTime);//設置控件的倒計時間

countDownView.binding.countTimeView.setOnCallBackListener(downTime -> {//監聽倒計時
    if (downTime == 0) {
       binding.countTimeView.setBgPaintColor(Color.parseColor("#FF0030"));
    }
});

countDownView.start();//啟動倒計時

countDownView.stop();//停止倒計時

posted @ 2022-06-29 10:15 別人眼中的過客閱讀(524) 評論(0) 收藏舉報

別人眼中的過客

再煩，也不要忘記微笑。

android 實現倒計時自定view

公告