带有 CircularProgressIndicator 的倒数计时器

Posted 2023-02-22

【中文标题】带有 CircularProgressIndicator 的倒数计时器

【英文标题】：CountDown Timer with CircularProgressIndicator

【发布时间】：2021-03-29 19:11:24

【问题描述】：

我尝试将带有circular progress indicator（来自material design components）的倒数计时器添加到我的应用程序中，但我在设置circular progress indicator 的初始值时遇到问题。

以下是我编写的代码的相关部分：

countDownTimer = object : CountDownTimer(60000, 1000) 

                    override fun onTick(millisUntilFinished: Long) 
                        binding.apply 
                            countDownTimer.text =  (millisUntilFinished / 1000).toString()
                            progressIndicator.progress = (millisUntilFinished / 1000).toInt()
                        
                    
                    override fun onFinish() 
                        // if 60 secs are finished, then we stop the record
                        stopRecording()
                    
                

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_
            android:layout_
            android:layout_gravity="top|center">

            <TextView
                android:id="@+id/count_down_timer"
                android:layout_
                android:layout_
                android:layout_margin="10dp"
                android:textSize="20sp"
                android:textStyle="bold"
                android:background="@color/black"
                android:textColor="@color/white"
                tools:text="60"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <com.google.android.material.progressindicator.CircularProgressIndicator
                android:id="@+id/progress_indicator"
                android:layout_
                android:layout_
                app:indicatorColor="@color/navajowhite"
                app:trackCornerRadius="10dp"
                app:indicatorSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/count_down_timer"
                android:layout_margin="10dp"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

我让计数器从 60 秒开始到 0。但我认为我的循环进度指示器的进度值是错误的。因为它的初始启动看起来像这样（我创建了一个草图来向您展示计数器启动时循环进度指示器的初始状态）：

如您所见，圆圈并不完整。您看不到的是，circular progress indicator 的“轨道”从这里递减，直到达到 0。因此，circular progress indicator 的递减以某种方式起作用。但是出发点不对。

我想要的是一个应该如下所示的初始开始：

我在这里做错了什么？

【参考方案1】：

您的进度计算不正确。

progressIndicator.progress = (millisUntilFinished / 1000).toInt()

如果millisUntilFinished == 59000，您最终将获得59 的进度。你应该在这里计算一个百分比而不是这个。

【讨论】：

所以，除以总值 (60) 并乘以 100 ？例如：(59 / 60) * 100。你是说这个吗？