20、DataBinding与主题切换：动态主题切换、夜间模式适配、Theme与Style绑定、自定义属性主题化

主题切换这件事，说实话，在Android开发里一直是个「看起来简单，做起来坑多」的活。早期我们用setTheme()配合Activity重建，后来用DayNight模式，再后来各种第三方库满天飞。但有了DataBinding之后，我发现事情变得清爽了很多——因为我们可以把主题相关的属性直接绑定到布局上，甚至做到「数据驱动主题切换」。

这一章，我就带你彻底搞懂DataBinding在主题切换中的玩法。我会从最基础的夜间模式讲起，一直聊到自定义属性的主题化绑定。嗯，都是我在实际项目中踩过的坑和总结的经验。

20.1 动态主题切换的核心思路

先想一个问题：什么叫「动态主题切换」？说白了，就是用户点一下按钮，整个App的颜色、字体、背景全变了，而且不能闪白屏、不能卡顿。

传统的做法是：

  • 调用AppCompatDelegate.setDefaultNightMode()
  • 然后Activity重建
  • 或者手动遍历View去改颜色

这两种方式各有各的痛点。重建Activity会导致状态丢失，手动遍历View又太low了。DataBinding给了我们第三条路：把主题属性变成可观察的数据。

核心思想：主题切换 = 数据变化 → 自动更新UI。你只需要改变一个ViewModel里的字段，所有绑定了这个字段的View就会自动刷新。

我在一个电商项目里做过「一键换肤」功能，用户可以选择「极光蓝」「樱花粉」「暗夜黑」三种主题。如果用传统方式，每个Activity都要写一大坨onConfigurationChanged逻辑。后来我用DataBinding + LiveData重构了，代码量直接砍掉一半。

20.2 夜间模式适配：从DayNight到DataBinding

夜间模式是主题切换里最基础也最常用的场景。Google官方推荐用DayNight主题，配合values-night目录下的资源文件。但这里有个问题：资源文件是静态的，你没法在运行时动态改变它们。

举个例子：你有一个TextView，白天显示黑色文字，夜间显示白色文字。用传统方式，你需要在values/styles.xml和values-night/styles.xml里各定义一套样式。但如果你想让用户「实时预览」夜间效果呢？这就尴尬了。

DataBinding的解法是这样的：

// ViewModel中
class ThemeViewModel : ViewModel() {
    val isNightMode = MutableLiveData<Boolean>()

    fun toggleNightMode() {
        isNightMode.value = !(isNightMode.value ?: false)
    }
}

// 布局中
<layout>
    <data>
        <variable name="theme" type="com.example.ThemeViewModel" />
    </data>

    <TextView
        android:textColor="@{theme.isNightMode ? @color/night_text : @color/day_text}"
        android:background="@{theme.isNightMode ? @color/night_bg : @color/day_bg}"
        ... />
</layout>

你看，这样就不需要Activity重建了。用户点一下开关，isNightMode变化，所有绑定了这个字段的View自动刷新。而且你还可以配合Transition动画，让切换过程更平滑。

小技巧：我建议把颜色值定义在colors.xml里，不要硬编码。比如@color/day_text和@color/night_text，这样维护起来方便。我曾经见过有人直接在binding表达式里写"#333333"，后来改主题时差点崩溃。

20.3 Theme与Style绑定：让布局更干净

很多人分不清Theme和Style的区别。简单说：Theme是作用于整个Activity或Application的，Style是作用于单个View的。但在DataBinding的世界里，我们可以把Theme的属性「拉」到布局层面来用。

举个例子：你有一个自定义的标题栏，它的背景色、文字颜色、图标颜色都来自当前Theme。传统做法是在代码里通过TypedArray去取。但用DataBinding，你可以这样：

<layout>
    <data>
        <import type="androidx.core.content.ContextCompat" />
        <import type="android.content.res.TypedArray" />
    </data>

    <TextView
        android:textColor="?attr/colorOnPrimary"
        android:background="?attr/colorPrimary"
        ... />
</layout>

等等，这里有个坑。?attr/colorOnPrimary这种写法在XML里可以直接用，但在DataBinding的binding表达式里，它不会自动解析。你需要用@{(context) ? context.getColor(R.attr.colorOnPrimary) : 0}这种写法，但说实话，太丑了。

我的做法是：在ViewModel里把Theme属性转成ObservableField。

class ThemeHelper(context: Context) {
    val primaryColor = ObservableInt(getThemeColor(context, R.attr.colorPrimary))
    val onPrimaryColor = ObservableInt(getThemeColor(context, R.attr.colorOnPrimary))

    private fun getThemeColor(context: Context, attr: Int): Int {
        val ta: TypedArray = context.obtainStyledAttributes(intArrayOf(attr))
        val color = ta.getColor(0, 0)
        ta.recycle()
        return color
    }
}

然后在布局里直接绑定：

android:background="@{themeHelper.primaryColor}"
android:textColor="@{themeHelper.onPrimaryColor}"

这样既干净又高效。而且当主题切换时，你只需要更新ThemeHelper里的值，所有绑定的View都会自动刷新。

注意：TypedArray使用后一定要recycle()，否则会内存泄漏。我曾经在一个老项目里发现内存只增不减，查了半天发现是TypedArray没释放。嗯，血的教训。

20.4 自定义属性主题化：让自定义View也支持主题切换

如果你写过自定义View，一定遇到过这种情况：你定义了一个自定义属性，比如app:iconColor，然后希望它能跟随主题变化。传统做法是在View的构造方法里解析TypedArray，然后监听主题变化。但有了DataBinding，我们可以用BindingAdapter来搞定。

来看一个例子：我有一个自定义的ThemeImageView，它的图标颜色需要跟随主题变化。

// 自定义View
class ThemeImageView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {

    var iconColor: Int = 0
        set(value) {
            field = value
            updateIconColor()
        }

    private fun updateIconColor() {
        // 使用ColorFilter改变图标颜色
        drawable?.setColorFilter(iconColor, PorterDuff.Mode.SRC_IN)
    }
}

// BindingAdapter
@BindingAdapter("iconColor")
fun setIconColor(view: ThemeImageView, color: Int) {
    view.iconColor = color
}

然后在布局里：

<com.example.ThemeImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_settings"
    app:iconColor="@{themeHelper.primaryColor}" />

这样，当themeHelper.primaryColor变化时，图标颜色自动更新。而且你不需要在View内部写任何主题切换的逻辑——全部由DataBinding帮你搞定。

我在一个金融App里用这个模式做了整套图标系统。用户切换主题时，所有图标颜色、按钮颜色、分割线颜色全部自动变化。测试同学说「这切换也太丝滑了吧」，我心里暗爽。

20.5 知识体系总览

下面这张图总结了本章的核心知识点和它们之间的关系。你可以把它当作一个「主题切换路线图」：

DataBinding主题切换知识体系 DataBinding主题切换 夜间模式适配 Theme与Style绑定 自定义属性主题化 DayNight主题 LiveData驱动 实时预览切换 ?attr/引用 TypedArray解析 ObservableInt封装 BindingAdapter 自定义View属性 ColorFilter动态更新

20.6 总结与避坑指南

好了，这一章的内容就这些。我们来快速回顾一下：

  • 动态主题切换的核心是「数据驱动UI」，用DataBinding + LiveData可以避免Activity重建
  • 夜间模式适配时，把颜色值定义成可观察数据，而不是依赖values-night目录
  • Theme与Style绑定时，用ObservableInt封装Theme属性，避免在布局里写复杂的表达式
  • 自定义属性主题化用BindingAdapter，让自定义View也能享受DataBinding的便利

避坑指南（我踩过的坑）：

  • 千万不要在BindingAdapter里做耗时操作，比如加载网络图片。BindingAdapter是在主线程执行的。
  • 如果你用ObservableInt封装颜色值，记得在ViewModel的onCleared()里把TypedArray回收掉。
  • 主题切换时，如果View有动画，建议用TransitionManager.beginDelayedTransition()，否则颜色变化会显得很生硬。
  • 我曾经犯过一个错：在多个Activity里分别创建了ThemeHelper实例，结果主题切换时不同步。后来改成单例模式才解决。

说实话，DataBinding在主题切换这块的潜力远不止这些。你还可以结合Room数据库保存用户的主题偏好，或者用SharedPreferences做持久化。但核心思路都是一样的：把主题当成数据，用DataBinding自动同步到UI。掌握了这个思想，你就能玩出各种花样。

嗯，这一章就到这里。下一章我们会聊一个更进阶的话题——DataBinding与动画的结合。到时候你会发现，原来动画也可以「绑定」到数据上。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →