如何让AndroidView的主题样式来自Compose并适配明暗模式

方案说明 #

你可以按如下方式为CalendarView设置基础样式：

Kotlin 接入代码 #

AndroidView({
  CalendarView(android.view.ContextThemeWrapper(it, R.style.CustomCalendar)).apply {
    dateTextAppearance = R.style.CustomDate
    weekDayTextAppearance = R.style.CustomWeek
  }
})

配套XML样式 #

<style name="CustomDay" parent="android:TextAppearance.DeviceDefault.Small">
    <item name="android:textColor">@color/white</item>
</style>
<style name="CustomWeek" parent="android:TextAppearance.DeviceDefault.Small">
    <item name="android:textColor">@color/white</item>
</style>
<style name="CustomCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="android:textColorPrimary">@color/teal_700</item>
    <item name="colorAccent">@color/purple_200</item>
    <item name="colorOnPrimary">@color/purple_200</item>
    <item name="colorSurface">@color/purple_200</item>
</style>

原生CalendarView确实不再支持直接通过代码设置颜色，所有样式属性必须来自XML主题样式，这就导致了两个核心问题：

1. 样式需要在Compose和XML中重复定义
2. Compose侧切换明暗模式时，原生View读取的XML样式不会同步切换，出现样式断层

实现Compose颜色控制CalendarView的方案 #

不需要把颜色写死在XML里，可以通过动态构造主题上下文的方式，直接将Compose当前主题的颜色注入到CalendarView的样式中，实现完全以Compose为唯一数据源，同时自动同步明暗模式：

1. 先修改XML样式，移除硬编码颜色，只保留样式继承结构 #

<!-- 只定义样式结构，颜色值动态注入 -->
<style name="CustomDay" parent="android:TextAppearance.DeviceDefault.Small" />
<style name="CustomWeek" parent="android:TextAppearance.DeviceDefault.Small" />
<style name="CustomCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar" />

2. 调整Compose侧的AndroidView实现，动态注入主题颜色 #

// 直接读取当前Compose主题的颜色，动态应用到CalendarView的上下文主题中
val primaryColor = MaterialTheme.colorScheme.primary
val onPrimaryColor = MaterialTheme.colorScheme.onPrimary
val surfaceColor = MaterialTheme.colorScheme.surface
val textColor = MaterialTheme.colorScheme.onSurface

AndroidView(
    factory = { context ->
        CalendarView(ContextThemeWrapper(context, R.style.CustomCalendar)).apply {
            // 动态构造文字外观的颜色属性
            val dateTextAppearance = ContextThemeWrapper(context, R.style.CustomDay).apply {
                theme.applyStyle(
                    android.R.style.TextAppearance_DeviceDefault_Small,
                    true
                )
                // 动态设置文字颜色
                theme.resolveAttribute(android.R.attr.textColor, textColor.toArgb(), true)
            }.theme.newTheme()
            setDateTextAppearance(dateTextAppearance)
            
            val weekTextAppearance = ContextThemeWrapper(context, R.style.CustomWeek).apply {
                theme.applyStyle(
                    android.R.style.TextAppearance_DeviceDefault_Small,
                    true
                )
                theme.resolveAttribute(android.R.attr.textColor, textColor.toArgb(), true)
            }.theme.newTheme()
            setWeekDayTextAppearance(weekTextAppearance)
        }
    },
    update = { calendarView ->
        // 主题切换时会触发update回调，重新更新所有颜色
        val context = calendarView.context
        // 动态更新日历主题属性
        context.theme.apply {
            resolveAttribute(android.R.attr.textColorPrimary, primaryColor.toArgb(), true)
            resolveAttribute(R.attr.colorAccent, primaryColor.toArgb(), true)
            resolveAttribute(R.attr.colorOnPrimary, onPrimaryColor.toArgb(), true)
            resolveAttribute(R.attr.colorSurface, surfaceColor.toArgb(), true)
        }
        calendarView.refreshDrawableState()
    }
)

备选方案 #

如果不需要强制使用原生CalendarView，直接使用Jetpack Compose Material3提供的DatePicker组件是更省心的选择，完全基于Compose体系构建，天然支持主题同步，不需要处理原生View和Compose的样式适配问题。

注：Compose中的Android交互体验十分出色，但如果需要以Compose为样式唯一数据源同时使用依赖XML样式的原生View，确实会出现样式重复定义、主题切换同步的问题，上述动态注入属性的方案已经可以覆盖绝大多数场景的需求。

内容的提问来源于stack exchange，提问作者mmm111mmm