Android Compose 切换按钮深度剖析：从源码到实践(五)

时间：2025-03-21 18:33:43

Android Compose 切换按钮深度剖析：从源码到实践

一、引言

在现代 Android 应用开发中，用户交互体验至关重要。切换按钮（Toggle Button）作为一种常见的交互组件，允许用户在两种状态之间进行切换，例如开 / 关、选中 / 未选中等。Android Compose 作为 Google 推出的声明式 UI 工具包，为开发者提供了便捷的方式来创建和定制切换按钮。本文将深入 Android Compose 框架的切换按钮模块，从源码级别进行详细分析，帮助开发者更好地理解和运用切换按钮，提升应用的交互体验。

二、Android Compose 基础回顾

2.1 Compose 简介

Android Compose 是用于构建 Android UI 的现代工具包，它采用声明式编程范式，与传统的基于视图的 UI 系统相比，代码更加简洁、易于维护。通过使用可组合函数（Composable Functions），开发者可以描述 UI 的外观和行为，Compose 会自动处理布局和状态管理。

2.2 核心概念

2.2.1 可组合函数（@Composable）

可组合函数是 Compose 的核心概念，使用 @Composable 注解标记的函数可以用来构建 UI。这些函数可以调用其他可组合函数，从而构建出复杂的 UI 界面。

kotlin

import androidx.compose.runtime.Composable
import androidx.compose.material.Text

// 简单的可组合函数，显示文本
@Composable
fun SimpleText() {
    Text(text = "Hello, Compose!")
}
2.2.2 状态管理

Compose 提供了强大的状态管理机制，通过 mutableStateOf 函数可以创建可变状态。当状态发生变化时，Compose 会自动重新组合受影响的 UI 部分。

kotlin

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.material.Text

@Composable
fun StatefulText() {
    // 创建可变状态，初始值为 "Hello"
    var text by mutableStateOf("Hello")
    // 显示文本
    Text(text = text)
    // 模拟状态变化
    text = "World"
}

三、切换按钮概述

3.1 切换按钮的作用

切换按钮在 Android 应用中广泛应用，用于让用户在两种状态之间进行快速切换。常见的使用场景包括开关功能、选择模式等。

3.2 Android Compose 中的切换按钮组件

在 Android Compose 中，主要有以下几种切换按钮组件：

  • Switch：经典的开关样式切换按钮。
  • Checkbox：复选框样式的切换按钮。
  • RadioButton：单选框样式的切换按钮。

3.3 简单示例

以下是一个简单的 Switch 组件示例：

kotlin

import androidx.compose.material.Switch
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable

@Composable
fun SimpleSwitch() {
    // 创建可变状态，用于记录开关状态
    var isChecked by mutableStateOf(false)
    Switch(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    )
}

四、Switch 组件源码分析

4.1 Switch 组件定义

Switch 组件的定义位于 androidx.compose.material 包中，以下是简化后的源码：

kotlin

@Composable
fun Switch(
    checked: Boolean, // 当前开关状态
    onCheckedChange: (Boolean) -> Unit, // 状态改变时的回调函数
    modifier: Modifier = Modifier, // 修饰符，用于修改组件的外观和行为
    enabled: Boolean = true, // 组件是否可用
    colors: SwitchColors = SwitchDefaults.colors() // 开关的颜色设置
) {
    // 使用 Clickable 修饰符处理点击事件
    val interactionSource = remember { MutableInteractionSource() }
    val semanticsProperties = {
        SemanticsProperties.CheckableState provides CheckableState(checked)
        SemanticsProperties.ToggleableState provides ToggleableState(checked)
        SemanticsProperties.OnClickLabel provides if (checked) "Turn off" else "Turn on"
    }
    Box(
        modifier = modifier
           .clickable(
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false),
                enabled = enabled,
                onClick = { onCheckedChange(!checked) }
            )
           .semantics(mergeDescendants = true, properties = semanticsProperties)
           .then(Modifier.size(SwitchDefaults.SwitchWidth, SwitchDefaults.SwitchHeight))
    ) {
        // 绘制开关轨道
        val trackColor = colors.trackColor(enabled = enabled, checked = checked).value
        Canvas(
            modifier = Modifier
               .fillMaxSize()
               .padding(SwitchDefaults.TrackPadding)
        ) {
            drawRoundRect(
                color = trackColor,
                cornerRadius = SwitchDefaults.TrackCornerRadius
            )
        }
        // 绘制开关拇指
        val thumbColor = colors.thumbColor(enabled = enabled, checked = checked).value
        val thumbOffset = animateFloatAsState(
            targetValue = if (checked) SwitchDefaults.ThumbCheckedOffset else SwitchDefaults.ThumbUncheckedOffset,
            animationSpec = tween(durationMillis = SwitchDefaults.AnimationDuration)
        )
        Canvas(
            modifier = Modifier
               .size(SwitchDefaults.ThumbSize)
               .offset(x = thumbOffset.value)
               .align(Alignment.CenterStart)
        ) {
            drawCircle(
                color = thumbColor,
                radius = SwitchDefaults.ThumbRadius
            )
        }
    }
}

4.2 点击事件处理

Switch 组件使用 Clickable 修饰符处理点击事件。当用户点击开关时，会调用 onCheckedChange 回调函数，将新的开关状态传递给该函数。

kotlin

modifier.clickable(
    interactionSource = interactionSource,
    indication = rememberRipple(bounded = false),
    enabled = enabled,
    onClick = { onCheckedChange(!checked) }
)

4.3 状态动画

在开关状态切换时，使用 animateFloatAsState 函数实现拇指的动画效果。通过设置不同的目标值（SwitchDefaults.ThumbCheckedOffset 和 SwitchDefaults.ThumbUncheckedOffset），并指定动画规格（tween），实现平滑的动画过渡。

kotlin

val thumbOffset = animateFloatAsState(
    targetValue = if (checked) SwitchDefaults.ThumbCheckedOffset else SwitchDefaults.ThumbUncheckedOffset,
    animationSpec = tween(durationMillis = SwitchDefaults.AnimationDuration)
)

4.4 颜色设置

Switch 组件使用 SwitchColors 来设置开关的颜色，包括轨道颜色和拇指颜色。可以通过 SwitchDefaults.colors() 方法获取默认的颜色设置，也可以自定义颜色。

kotlin

val trackColor = colors.trackColor(enabled = enabled, checked = checked).value
val thumbColor = colors.thumbColor(enabled = enabled, checked = checked).value

五、Checkbox 组件源码分析

5.1 Checkbox 组件定义

Checkbox 组件的定义如下：

kotlin

@Composable
fun Checkbox(
    checked: Boolean, // 当前复选框状态
    onCheckedChange: ((Boolean) -> Unit)?, // 状态改变时的回调函数
    modifier: Modifier = Modifier, // 修饰符
    enabled: Boolean = true, // 组件是否可用
    colors: CheckboxColors = CheckboxDefaults.colors() // 复选框的颜色设置
) {
    val interactionSource = remember { MutableInteractionSource() }
    val semanticsProperties = {
        SemanticsProperties.CheckableState provides CheckableState(checked)
        SemanticsProperties.ToggleableState provides ToggleableState(checked)
        SemanticsProperties.OnClickLabel provides if (checked) "Uncheck" else "Check"
    }
    Box(
        modifier = modifier
           .clickable(
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false),
                enabled = enabled && onCheckedChange != null,
                onClick = { onCheckedChange?.invoke(!checked) }
            )
           .semantics(mergeDescendants = true, properties = semanticsProperties)
           .then(Modifier.size(CheckboxDefaults.Size))
    ) {
        // 绘制复选框背景
        val boxColor = colors.boxColor(enabled = enabled, checked = checked).value
        Canvas(
            modifier = Modifier
               .fillMaxSize()
               .padding(CheckboxDefaults.InnerPadding)
        ) {
            drawRoundRect(
                color = boxColor,
                cornerRadius = CheckboxDefaults.CornerRadius
            )
        }
        // 绘制复选框选中标记
        if (checked) {
            val checkmarkColor = colors.checkmarkColor(enabled = enabled, checked = checked).value
            Canvas(
                modifier = Modifier
                   .fillMaxSize()
                   .padding(CheckboxDefaults.InnerPadding)
            ) {
                drawPath(
                    path = Path().apply {
                        moveTo(size.width * 0.2f, size.height * 0.5f)
                        lineTo(size.width * 0.4f, size.height * 0.7f)
                        lineTo(size.width * 0.8f, size.height * 0.3f)
                    },
                    color = checkmarkColor,
                    strokeWidth = CheckboxDefaults.CheckmarkStrokeWidth
                )
            }
        }
    }
}

5.2 点击事件处理

与 Switch 类似，Checkbox 也使用 Clickable 修饰符处理点击事件。当用户点击复选框时，会调用 onCheckedChange 回调函数。

kotlin

modifier.clickable(
    interactionSource = interactionSource,
    indication = rememberRipple(bounded = false),
    enabled = enabled && onCheckedChange != null,
    onClick = { onCheckedChange?.invoke(!checked) }
)

5.3 绘制逻辑

Checkbox 组件的绘制分为两部分：背景和选中标记。当复选框被选中时，会绘制选中标记；未选中时，只绘制背景。

kotlin

// 绘制背景
val boxColor = colors.boxColor(enabled = enabled, checked = checked).value
drawRoundRect(
    color = boxColor,
    cornerRadius = CheckboxDefaults.CornerRadius
)

// 绘制选中标记
if (checked) {
    val checkmarkColor = colors.checkmarkColor(enabled = enabled, checked = checked).value
    drawPath(
        path = Path().apply {
            moveTo(size.width * 0.2f, size.height * 0.5f)
            lineTo(size.width * 0.4f, size.height * 0.7f)
            lineTo(size.width * 0.8f, size.height * 0.3f)
        },
        color = checkmarkColor,
        strokeWidth = CheckboxDefaults.CheckmarkStrokeWidth
    )
}

5.4 颜色设置

Checkbox 组件使用 CheckboxColors 来设置背景颜色和选中标记颜色。可以通过 CheckboxDefaults.colors() 方法获取默认的颜色设置，也可以自定义颜色。

kotlin

val boxColor = colors.boxColor(enabled = enabled, checked = checked).value
val checkmarkColor = colors.checkmarkColor(enabled = enabled, checked = checked).value

六、RadioButton 组件源码分析

6.1 RadioButton 组件定义

kotlin

@Composable
fun RadioButton(
    selected: Boolean, // 当前单选框是否选中
    onClick: (() -> Unit)?, // 点击事件回调函数
    modifier: Modifier = Modifier, // 修饰符
    enabled: Boolean = true, // 组件是否可用
    colors: RadioButtonColors = RadioButtonDefaults.colors() // 单选框的颜色设置
) {
    val interactionSource = remember { MutableInteractionSource() }
    val semanticsProperties = {
        SemanticsProperties.SelectableState provides SelectableState(selected)
        SemanticsProperties.OnClickLabel provides if (selected) "Unselect" else "Select"
    }
    Box(
        modifier = modifier
           .clickable(
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false),
                enabled = enabled && onClick != null,
                onClick = onClick
            )
           .semantics(mergeDescendants = true, properties = semanticsProperties)
           .then(Modifier.size(RadioButtonDefaults.Size))
    ) {
        // 绘制单选框外圈
        val outerColor = colors.unselectedColor(enabled = enabled).value
        Canvas(
            modifier = Modifier
               .fillMaxSize()
               .padding(RadioButtonDefaults.OuterPadding)
        ) {
            drawCircle(
                color = outerColor,
                radius = RadioButtonDefaults.OuterRadius
            )
        }
        // 绘制单选框内圈
        if (selected) {
            val innerColor = colors.selectedColor(enabled = enabled).value
            Canvas(
                modifier = Modifier
                   .fillMaxSize()
                   .padding(RadioButtonDefaults.InnerPadding)
            ) {
                drawCircle(
                    color = innerColor,
                    radius = RadioButtonDefaults.InnerRadius
                )
            }
        }
    }
}

6.2 点击事件处理

RadioButton 同样使用 Clickable 修饰符处理点击事件。当用户点击单选框时，会调用 onClick 回调函数。

kotlin

modifier.clickable(
    interactionSource = interactionSource,
    indication = rememberRipple(bounded = false),
    enabled = enabled && onClick != null,
    onClick = onClick
)

6.3 绘制逻辑

RadioButton 组件的绘制分为外圈和内圈。当单选框被选中时，会绘制内圈；未选中时，只绘制外圈。

kotlin

// 绘制外圈
val outerColor = colors.unselectedColor(enabled = enabled).value
drawCircle(
    color = outerColor,
    radius = RadioButtonDefaults.OuterRadius
)

// 绘制内圈
if (selected) {
    val innerColor = colors.selectedColor(enabled = enabled).value
    drawCircle(
        color = innerColor,
        radius = RadioButtonDefaults.InnerRadius
    )
}

6.4 颜色设置

RadioButton 组件使用 RadioButtonColors 来设置外圈和内圈的颜色。可以通过 RadioButtonDefaults.colors() 方法获取默认的颜色设置，也可以自定义颜色。

kotlin

val outerColor = colors.unselectedColor(enabled = enabled).value
val innerColor = colors.selectedColor(enabled = enabled).value

七、切换按钮的样式定制

7.1 自定义颜色

可以通过自定义 SwitchColors、CheckboxColors 和 RadioButtonColors 来改变切换按钮的颜色。

7.1.1 自定义 Switch 颜色

kotlin

import androidx.compose.material.Switch
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.material.SwitchDefaults

@Composable
fun CustomColorSwitch() {
    var isChecked by mutableStateOf(false)
    Switch(
        checked = isChecked,
        onCheckedChange = { isChecked = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Red,
            checkedTrackColor = Color.Blue,
            uncheckedThumbColor = Color.Green,
            uncheckedTrackColor = Color.Yellow
        )
    )
}
7.1.2 自定义 Checkbox 颜色

kotlin

import androidx.compose.material.Checkbox
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.material.CheckboxDefaults

@Composable
fun CustomColorCheckbox() {
    var isChecked by mutableStateOf(false)
    Checkbox(
        checked = isChecked,
        onCheckedChange = { isChecked = it },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Red,
            uncheckedColor = Color.Blue,
            checkmarkColor = Color.Green
        )
    )
}
7.1.3 自定义 RadioButton 颜色

kotlin

import androidx.compose.material.RadioButton
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.material.RadioButtonDefaults

@Composable
fun CustomColorRadioButton() {
    var isSelected by mutableStateOf(false)
    RadioButton(
        selected = isSelected,
        onClick = { isSelected =

相关文章