【Jetpack Compose】应用内换肤实践

原创已于 2025-11-27 20:09:50 修改 · 909 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2025-11-27 19:52:30 首次发布

android开发专栏收录该内容

13 篇文章

订阅专栏

无论是车载应用还是移动应用开发中，换肤功能都是提升用户体验的重要特性，它允许用户根据喜好或使用场景（如日间 / 夜间）切换应用主题，增强应用的个性化与易用性。相比于传统 Android View 系统的换肤方案（如资源重载、皮肤包 APK 等），Jetpack Compose 凭借其声明式 UI 特性和强大的状态管理能力，让换肤功能的实现更简洁、高效且易维护。

本文将结合实际项目案例，讲解不依赖三方框架时，Compose 应用换肤的核心原理与完整实现流程。

本文源码：https://github.com/linxu-link/MJPlayer

一、Compose 换肤核心原理

Compose 的主题系统是换肤功能的基础，其核心依赖 CompositionLocal 和 状态驱动 UI 两大特性：

CompositionLocal：主题的 “全局隐式传递”

Compose 中通过 CompositionLocal 实现非直接传递的依赖注入，允许将主题配置（如颜色、字体、形状）全局传递给子组件，而无需通过函数参数逐层传递。

默认的 MaterialTheme 就是基于 CompositionLocal 实现的，它包含 colorScheme、typography、shapes 三个核心配置。我们既可以扩展MaterialTheme，也能自定义CompositionLocal承载自定义主题信息（如多色块主题的图标配置）。

状态驱动：主题切换的“实时响应”

换肤的本质是主题状态的变更—— 当用户选择新主题时，只需更新主题状态，Compose 会自动重组所有依赖该状态的 UI 组件，实现主题的实时切换（无需手动刷新界面）。

二、换肤功能完整实现流程

本文将实现三类主题的换肤系统：

浅色 / 深色固定主题
系统自适应主题（跟随系统深浅模式）
自定义多色块主题（如红色主题、蓝色主题等）

第一步：定义主题类型与资源

首先定义主题枚举、颜色 / 图标配置类，统一管理不同主题的资源映射：

// ui/theme/Theme.kt
// 主题类型
enum class ThemeType {
    ADAPTIVE, DARK, LIGHT, THEME_2, THEME_3, THEME_4, THEME_5, THEME_6, THEME_7, THEME_8, THEME_9,
    THEME_10, THEME_11, THEME_12, THEME_13, THEME_14, THEME_15, THEME_16, THEME_17, THEME_18,
    THEME_19, THEME_20, THEME_21, THEME_22, THEME_23, THEME_24, THEME_25,
}

定义不同主题所使用的颜色：

// 应用内颜色配置类
data class ColorScheme(
    val theme: Color,         // 主题色
    val background: Color,    // 页面背景色
    val surface: Color,       // 卡片/组件背景色
    val textPrimary: Color,   // 主要文字色
    val textPrimaryInverse: Color, // 主要文字反色
    val textSecondary: Color, // 次要文字色
    val textSecondaryInverse: Color, // 次要文字反色
    val accent: Color,        // 强调色（按钮/高亮元素）
    val accentInverse: Color,      // 强调色反色
    val border: Color,        // 边框色
)

// 黑色主题配置
val darkColorScheme = ColorScheme(
    theme = Colors.dark,
    background = Colors.dark,
    surface = Colors.grey,
    textPrimary = Colors.light,
    textPrimaryInverse = Colors.light,
    textSecondary = Colors.lightGrey,
    textSecondaryInverse = Colors.light,
    accent = Color(0xFF2196F3),
    accentInverse = Colors.light,
    border = Color(0xFF333333),
)

// 白色主题配置
val lightColorScheme = ColorScheme(
    theme = Colors.light,
    background = Colors.light,
    surface = Colors.light,
    textPrimary = Colors.dark,
    textPrimaryInverse = Colors.dark,
    textSecondary = Colors.lightGrey,
    textSecondaryInverse = Colors.light,
    accent = Color(0xFF2196F3),
    accentInverse = Colors.light,
    border = Color(0xFFE0E0E0),
)

// 其他主题配置
val theme2ColorScheme = ColorScheme(
    theme = Colors.theme2,
    background = Colors.light,
    surface = Colors.light,
    textPrimary = Colors.light,
    textPrimaryInverse = Colors.dark,
    textSecondary = Color(0xFF7F8C8D),
    textSecondaryInverse = Colors.light,
    accent = Colors.theme2,
    accentInverse = Colors.light,
    border = Color(0xFFBDC3C7),
)

// ...

定义不同主题所使用的图标：

data class ImageScheme(
    val placeholder: Int,
    val adaptiveThemeMask: Int,
    val lightThemeMask: Int,
    val darkThemeMask: Int,
)

val darkImageScheme = ImageScheme(
    placeholder = Images.placeholderLight,
    adaptiveThemeMask = Images.adaptiveThemeMask,
    lightThemeMask = Images.lightThemeMask,
    darkThemeMask = Images.darkThemeMask,
)

val lightImageScheme = ImageScheme(
    placeholder = Images.placeholderLight,
    adaptiveThemeMask = Images.adaptiveThemeMask,
    lightThemeMask = Images.lightThemeMask,
    darkThemeMask = Images.blackThemeMask,
)

val theme2ImageScheme = ImageScheme(
    placeholder = Images.placeholderLight,
    adaptiveThemeMask = Images.adaptiveThemeMask,
    lightThemeMask = Images.lightThemeMask,
    darkThemeMask = Images.blackThemeMask,
)

第二步：全局主题管理（CompositionLocal）

通过CompositionLocal封装当前主题的颜色与图标配置，让子组件可全局访问：

// 创建颜色 CompositionLocal实例，默认值为白色主题
val LocalColorScheme = compositionLocalOf<ColorScheme> {
// 默认颜色配置（白色主题）
    lightColorScheme
}

// 创建图标 CompositionLocal实例，默认值为白色主题
val LocalImageScheme = compositionLocalOf<ImageScheme> {
// 默认颜色配置（白色主题）
    lightImageScheme
}

第三步：封装主题组件

创建自定义主题组件，根据主题类型自动切换配置，并通过CompositionLocalProvider注入全局：

@Composable
fun MJPlayerTheme(
    themeType: ThemeType = ThemeType.ADAPTIVE,
    content: @Composable () -> Unit,
) {

    // 根据主题类型选择颜色方案
    val colorScheme = if (ThemeType.ADAPTIVE == themeType) {
        // 兼容android系统的浅色/暗色主题
        if (isSystemInDarkTheme()) {
            darkColorScheme
} else {
            lightColorScheme
}
    } else {
        themeColorArray[themeType] ?: lightColorScheme
}

    // 根据主题类型选择图标方案
    val imageScheme = if (ThemeType.ADAPTIVE == themeType) {
        if (isSystemInDarkTheme()) {
            darkImageScheme
} else {
            lightImageScheme
}
    } else {
        themeImageArray[themeType] ?: lightImageScheme
}

    CompositionLocalProvider(
        LocalColorScheme provides colorScheme,
        LocalImageScheme provides imageScheme,
        content = content,
    )

}

第四步：主题状态持久化

使用SharedPreferences持久化用户选择的主题类型，并提供监听接口（避免应用重启后恢复默认）：

private val themeListeners = mutableListOf<(ThemeType) -> Unit>()

fun getThemeType(): ThemeType {
    return ThemeType.valueOf(HiSp.get(Key.THEME_TYPE, ThemeType.ADAPTIVE.name))
}

fun setThemeType(themeType: ThemeType) {
    HiSp.put(Key.THEME_TYPE, themeType.name)
    themeListeners.forEach { it(themeType) }
}

fun addThemeListener(listener: (ThemeType) -> Unit) {
    themeListeners.add(listener)
    listener(getThemeType())
}

第五步：全局主题注入（Activity 层）

在应用入口（如MainActivity）注入主题，监听主题变更并重组 UI：

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    private lateinit var themeListener: (ThemeType) -> Unit

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 定义主题变更监听
        themeListener = { themeType ->
            setContent {
                MJPlayerTheme(themeType = themeType) {
                    // 应用主布局（导航图/根组件）
                    AppNavHost(modifier = Modifier.background(LocalColorScheme.current.background))
                }
            }
        }

        // 注册监听并初始化UI
        ThemeManager.addThemeListener(themeListener)
    }

    override fun onDestroy() {
        super.onDestroy()
        ThemeManager.removeThemeListener(themeListener) // 移除监听，避免内存泄漏
    }
}

第六步：使用主题颜色和图标

在配置完成上述步骤后，在compose方法内直接使用LocalColorScheme、LocalImageScheme即可调用定义好的颜色和图标，并且在切换主题时，compose会触发自动重组，无需手动替换：

@Composable
fun CommonTopAppBar(
    @StringRes title: Int,
    onBack: () -> Unit,
) {
    TopAppBar(
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = LocalColorScheme .current.theme,
        ),
        title = {
TextTitle(text = stringResource(title))
        } ,
        navigationIcon = {
IconButton(onClick = onBack) {
Icon(
                    imageVector = MJConstants.Icon.ARROW_BACK,
                    contentDescription = stringResource(id = R.string.menu_back),
                    tint = LocalColorScheme .current.textPrimary,
                )
            }
} ,
    )
}

三、`CompositionLocal`

在 Compose 中，CompositionLocal（中文常译 “组合局部”）是一种隐式数据传递机制，用于在组件树中向下传递数据，无需通过函数参数逐层显式传递（即解决 “Prop Drilling” 问题）。它本质上是 Compose 实现局部依赖注入的核心工具，让子组件能便捷地访问上层提供的 “上下文” 或 “共享数据”。其工作原理分为三步：

定义：创建CompositionLocal实例（如LocalColorScheme），作为数据的 “标识符”；
提供：通过CompositionLocalProvider在组件树中绑定具体值，作用域为其包裹的子组件；
消费：子组件通过CompositionLocal.current获取值，值变化时自动重组。

compositionLocalOf 与 staticCompositionLocalOf区别

compositionLocalOf：用于动态变化的数据（如主题配置），值变化时会触发所有依赖组件重组；
staticCompositionLocalOf：用于静态 / 极少变化的数据（如应用全局配置），性能更高，但值变化时不会自动重组。

四、总结

本文介绍了 Compose 中基础换肤需求的实现方式 —— 通过CompositionLocal实现主题全局传递，结合状态管理与持久化完成主题切换。实际生产环境中，若需支持独立皮肤包 APK，只需借助框架解析 APK 中的资源文件（颜色、图标），再更新ColorScheme/ImageScheme的映射关系即可。

本文源码：https://github.com/linxu-link/MJPlayer