Android 自定义View之倒计时

原创已于 2025-02-28 16:56:44 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #验证码按钮

于 2018-07-04 15:45:03 首次发布

Android 自定义控件专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种自定义验证码按钮的方法，包括按钮的样式设置、倒计时功能及界面状态切换等。通过XML配置文件和自定义View实现了获取验证码后的倒计时效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Android 自定义View之倒计时
- 概述
- 代码实现

Android 自定义View之倒计时

概述

在这里插入图片描述

代码实现

Kotlin代码：

class CountdownView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet?,
    defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr), Runnable {

    private var totalSecond = 10
    private var currentSecond = 0
    private var TIMING_FINISHED = "发送验证码"
    private val TIMING_TEXT = "已发送(%d)"

    init {
        text = TIMING_FINISHED
        gravity = Gravity.CENTER
        minWidth = 80.dp
        textSize = 13F
        setPadding(10.dp)
        setTextColor(Color.parseColor("#FFFFFF"))
        background = ContextCompat.getDrawable(context, R.drawable.selector_countdown)
    }

    /**
     * 开始倒计时
     */
    fun start() {
        isEnabled = false
        currentSecond = totalSecond
        post(this)
    }

    /**
     * 结束倒计时
     */
    fun cancel() {
        currentSecond = 0
        text = TIMING_FINISHED
        isEnabled = true
    }

    override fun run() {
        if (currentSecond == 0) {
            cancel()
            return
        }
        currentSecond--
        text = String.format(TIMING_TEXT, currentSecond)
        postDelayed(this, 1000)
    }

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        removeCallbacks(this)
    }
}

selector_countdown.xml：

<?xml version="1.0" encoding="utf-8"?><!-- 默认获取验证码按钮样式 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#BBBBBB" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFB716" />
        </shape>
    </item>
</selector>

使用：

countdownView.start()