在 Android 中使用 Jetpack Compose 创建计时器

Jetpack Compose 是 Android 官方推出的 UI 工具包，它提供了一种更简单、更流畅的方式来构建 Android 应用的 UI。在这篇文章中，我们将通过一个示例来介绍如何使用 Jetpack Compose 创建计时器。

创建倒计时器

首先，我们需要创建一个计时器。我们可以通过一个计时器来计算时间间隔，然后将其转化为我们想要的格式。代码如下：

class CountDownTimer(private val startTime: Long) {

    private var timer: Timer? = null
    private var isRunning = false

    var onTick: ((String) -> Unit)? = null
    var onFinish: (() -> Unit)? = null

    fun start() {
        timer = Timer()
        timer?.scheduleAtFixedRate(object : TimerTask() {
            val start = System.currentTimeMillis()
            override fun run() {
                val deltaTime = (startTime - (System.currentTimeMillis() - start)) / 1000
                onTick?.invoke(formatTime(deltaTime))
                if (deltaTime <= 0) {
                    timer?.cancel()
                    onFinish?.invoke()
                }
            }
        }, 0, 1000)
        isRunning = true
    }

    fun stop() {
        timer?.cancel()
        isRunning = false
    }

    fun isRunning(): Boolean {
        return isRunning
    }

    private fun formatTime(time: Long): String {
        val minutes = time / 60
        val seconds = time % 60
        return String.format("%02d:%02d", minutes, seconds)
    }
}

在这个类中，我们创建了一个计时器 CountDownTimer ，它接收一个时间值 startTime 作为参数，表示倒计时的总时长。我们可以通过 start() 来启动计时器，通过 stop() 来停止计时器，通过 isRunning() 来判断计时器是否正在运行。在计时器执行 run() 方法时，我们会首先计算时间间隔 deltaTime ，然后调用 onTick() 回调函数将时间间隔转化成我们想要的格式。如果 deltaTime <= 0 ，表示倒计时已经结束，我们就会调用 onFinish() 回调函数。

创建计时器 UI

接下来，我们需要创建一个 UI 来展示计时器。这个 UI 由计时器的显示部分和控制部分组成。我们首先来创建计时器的显示部分。

计时器显示部分可以使用一个 Text 组件，用来显示倒计时的时间。我们可以设置它的字体大小、字体颜色等。代码如下：

private val timerTextSize = 70.sp
private val timerTextColor = Color(0xff444444)

@Composable
private fun TimerDisplay(time: String) {
    Text(
        text = time,
        fontSize = timerTextSize,
        color = timerTextColor
    )
}

在这个函数中，我们定义了两个变量：timerTextSize 表示字体大小，timerTextColor 表示字体颜色。然后，我们创建了一个 Text 组件，将传入的时间值 time 显示出来。

接下来，我们来创建计时器控制部分的 UI。这部分包括开始按钮、暂停按钮和重置按钮。

@Composable
private fun TimerControls(
    isRunning: Boolean,
    onStart: () -> Unit,
    onPause: () -> Unit,
    onReset: () -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Button(
            enabled = !isRunning,
            onClick = onStart
        ) {
            Text(text = "Start")
        }
        Button(
            enabled = isRunning,
            onClick = onPause
        ) {
            Text(text = "Pause")
        }
        Button(
            enabled = !isRunning,
            onClick = onReset
        ) {
            Text(text = "Reset")
        }
    }
}

在这个函数中，我们创建了一个 Row 组件，并使用 FillMaxWidth() 修饰符来使其占据整个宽度。然后，我们创建了三个按钮，分别用于开始计时器、暂停计时器和重置计时器。

将计时器显示组件和计时器控制组件组合起来

最后，我们需要将 TimerDisplay 和 TimerControls 组合起来。我们可以使用一个 Column 组件来将它们垂直地组合在一起。代码如下：

@Composable
fun CountDownTimerScreen(countDownTimer: CountDownTimer) {
    var time by remember { mutableStateOf("00:00") }

    countDownTimer.onTick = {
        time = it
    }

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        TimerDisplay(time = time)
        Spacer(modifier = Modifier.height(16.dp))
        TimerControls(
            isRunning = countDownTimer.isRunning(),
            onStart = {
                countDownTimer.start()
            },
            onPause = {
                countDownTimer.stop()
            },
            onReset = {
                countDownTimer.stop()
                time = "00:00"
            }
        )
    }
}

在这个函数中，我们创建了一个 Column 组件，并使用 padding() 来添加一些外边距。然后，我们使用 remember 来定义一个可变状态 time ，其初始值为 "00:00" 。当计时器回调函数 onTick() 被触发时，我们将计时器的时间值更新到 time 上。

接下来，我们将 TimerDisplay 和 TimerControls 组合在 Column 中。我们将 isRunning、onStart、onPause 和 onReset 四个参数传递给 TimerControls 组件，并在组件中定义了开始计时器、暂停计时器和重置计时器的回调函数。

总结

到此为止，我们已经成功地构建了一个使用 Jetpack Compose 创建的简单计时器。在这个示例中，我们学习了如下内容：

• 如何创建一个计时器，并将时间间隔转化为我们想要的格式；
• 如何使用 Jetpack Compose 构建 UI 组件；
• 如何将多个 UI 组件组合在一起。

通过这个示例，我们可以看到 Jetpack Compose 非常适合构建复杂的、动态的 UI。在实际的应用中，我们可以使用 Jetpack Compose 来构建各种各样的 UI 组件，从而提高 Android 应用的用户体验和开发效率。