如何在 kotlin 中制作 CircularPogress 倒计时？

Question

怎样才能达到和this video一样的效果？

Answer 1

尝试 ProgressBar 显示循环进度条和 CountDownTimer 计时器：

Xml code:

        <RelativeLayout
            android:id="@+id/rlTimeOut"
            android:layout_width="300dp"
            android:layout_height="300dp">
            <ProgressBar
                android:id="@+id/progressTimeOut"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:indeterminate="false"
                android:progressDrawable="@drawable/bg_progress"
                android:background="@drawable/circle_shape"
                style="?android:attr/progressBarStyleHorizontal"
                android:max="30"
                android:progress="0" />

            <TextView
                android:id="@+id/tvTimeLeft"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0"
                android:layout_centerInParent="true"
                android:textSize="25sp"
                android:textColor="@color/black"/>

        </RelativeLayout>

Drawable - bg_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="true">

        <solid
            android:angle="0"
            android:color="@color/colorProgress1"
            android:useLevel="false" />
    </shape>
</rotate>

Drawable - circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="10dp"
    android:useLevel="false">

    <solid android:color="#EFEFEF" />

</shape>

Add code in Kotlin Class

private lateinit var textViewTimer: CountDownTimer
private lateinit var progressBarTimer: CountDownTimer

fun setTimer() {
        val maxCounter: Long = 4000
        val diff: Long = 1000
        textViewTimer = object : CountDownTimer(maxCounter, diff) {
            override fun onTick(millisUntilFinished: Long) {
                val diff = maxCounter - millisUntilFinished
                tvTimeLeft.text = "" + millisUntilFinished / 1000
                Log.i("Timer--", "onTick: differance: $diff")
            }

            override fun onFinish() {
               //progressTimeOut.progress = 3
                tvTimeLeft.text = "TIME UP!"
                textViewTimer.cancel()
            }
        }.start()

        val diff1: Long = 100
        progressBarTimer = object : CountDownTimer(maxCounter, diff1) {
            override fun onTick(millisUntilFinished: Long) {
                val diff = maxCounter - millisUntilFinished
                progressTimeOut.progress = diff.toInt() / 100
            }

            override fun onFinish() {
                progressTimeOut.progress = 30
                progressBarTimer.cancel()
            }
        }.start()
    }

如何在 kotlin 中制作 CircularPogress 倒计时？

How can I make CircularPogress Countdown in kotlin?

android

android-layout

kotlin