devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android 深色模式适配原理分析

作者：你好赵伟 | 2024-05-24 23:26:28

赞

踩

Android 深色模式适配原理分析

背景

从Android10（API 29）开始，在原有的主题适配的基础上，Google开始提供了Force Dark机制，在系统底层直接对颜色和图片进行转换处理，原生支持深色模式。深色模式可以节省电量、改善弱势及强光敏感用户的可视性，并能在环境亮度较暗的时候保护视力，更是夜间活跃用户的强烈需求。对深色模式的适配有利于提升用户口碑。 转载请注明来源「Bug总柴」

深色模式在安卓上可以分为以下四种场景：

  • 强制深色模式

  • 强制浅色模式

  • 跟随系统

  • 低电量自动切换深色

以下将介绍如何设置深色模式以及如何对深色模式进行适配。

资源配置限定符

我们常见的需要设置的资源有drawable、layout、mipmap和values等，对于这些资源，我们可以用一些限定符来表示提供一些备用资源，例如drawable-xhdpi表示超密度屏幕使用的资源，或者layout-land表示横向状态使用的布局。

同样的深色模式可以使用资源的限定符-night来表示在深色模式中使用的资源。如下图所示：

使用了-night限定符的文件夹里面的资源我们称为night资源，没有使用-night限定符的资源我们称为notnight资源。

其中drawable-night-xhdpi可以放置对应超密度屏幕使用的深色模式的图片，values-night可以声明对应深色模式使用的色值和主题。

所有的资源限定符定义以及添加的顺序（例如-night必须在-xhdpi之前）可查看应用资源概览中的配置限定符名称表。

深色模式判断&设置

判断当前是否深色模式

Configuration.uiMode 有三种NIGHT的模式

  • UI_MODE_NIGHT_NO 表示当前使用的是notnight模式资源

  • UI_MODE_NIGHT_YES 表示当前使用的是night模式资源

  • UI_MODE_NIGHT_UNDEFINED 表示当前没有设置模式

可以通过以下的代码来判断当前是否处于深色模式：

  1. /**
  2.  * 判断当前是否深色模式
  3.  *
  4.  * @return 深色模式返回 true，否则返回false
  5.  */
  6. fun isNightMode(): Boolean {
  7.   return when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
  8.     Configuration.UI_MODE_NIGHT_YES -> true
  9.     else -> false
  10.   }
  11. }
  12.

Tips: 对于一些从网络接口服务获取的需要对深色模式区分的色值或者图片，可以使用上述的判断来获取对应的资源。

判断当前深色模式场景

通过AppCompatDelegate.getDefaultNightMode())可以获取五种深色模式场景：

  • MODE_NIGHT_AUTO_BATTERY 低电量模式自动开启深色模式

  • MODE_NIGHT_FOLLOW_SYSTEM 跟随系统开启和关闭深色模式（默认）

  • MODE_NIGHT_NO 强制使用notnight资源，表示非深色模式

  • MODE_NIGHT_YES 强制使用night资源

  • MODE_NIGHT_UNSPECIFIED 配合 setLocalNightMode(int)) 使用，表示由Activity通过AppCompactActivity.getDelegate()来单独设置页面的深色模式，不设置全局模式

模式设置

深色模式设置可以从三个层级设置，分别是系统层、Applcation层以及Activity层。底层的设置会覆盖上层的设置，例如系统设置了深色模式，但是Application设置了浅色模式，那么应用会显示浅色主题。

系统层是指系统设置中，根据不同产商的手机，可以在设置->显示中修改系统为深色模式。

Application层通过AppCompatDelegate.setDefaultNightMode()设置深色模式。

Activity层通过getDelegate().setLocalNightMode())设置深色模式。

当深色模式改变时，Activity会重建，如果不希望Activity重建，可以在AndroidManifest.xml中对对应的Activity设置android:configChanges="uiMode"，不过设置之后页面的颜色改变需要Activity在中通过监听onConfigurationChanged来动态改变。

通过AppCompatDelegate.setDefaultNightMode(int))可以设置深色模式，源码如下：

  1. public static void setDefaultNightMode(@NightMode int mode) {
  2.   if (DEBUG) {
  3.     Log.d(TAG, String.format("setDefaultNightMode. New:%d, Current:%d",
  4.                              mode, sDefaultNightMode));
  5.   }
  6.   switch (mode) {
  7.     case MODE_NIGHT_NO:
  8.     case MODE_NIGHT_YES:
  9.     case MODE_NIGHT_FOLLOW_SYSTEM:
  10.     case MODE_NIGHT_AUTO_TIME:
  11.     case MODE_NIGHT_AUTO_BATTERY:
  12.       if (sDefaultNightMode != mode) {
  13.         sDefaultNightMode = mode;
  14.         applyDayNightToActiveDelegates();
  15.       }
  16.       break;
  17.     default:
  18.       Log.d(TAG, "setDefaultNightMode() called with an unknown mode");
  19.       break;
  20.   }
  21. }
  22.

从源码可以看出设置 MODE_NIGHT_UNSPECIFIED 模式是不会生效的。

Tips：注意，深色模式变化会导致Activity重建。

适配方案

自定义适配

1. 主题

将Application和Activity的主题修改为集成自Theme.AppCompat.DayNight或者Theme.MaterialComponents.DayNight，就可以对于大部分的控件得到较好的深色模式支持。我们看下DayNight主题的定义：

res/values/values.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources xmlns:ns1="urn:oasis:names:tc:xliff:document:1.2">        
  3.     <!-- ... -->
  4.     <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light"/>
  5.     <style name="Theme.AppCompat.DayNight.DarkActionBar" parent="Theme.AppCompat.Light.DarkActionBar"/>
  6.     <style name="Theme.AppCompat.DayNight.Dialog" parent="Theme.AppCompat.Light.Dialog"/>
  7.     <style name="Theme.AppCompat.DayNight.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert"/>
  8.     <style name="Theme.AppCompat.DayNight.Dialog.MinWidth" parent="Theme.AppCompat.Light.Dialog.MinWidth"/>
  9.     <style name="Theme.AppCompat.DayNight.DialogWhenLarge" parent="Theme.AppCompat.Light.DialogWhenLarge"/>
  10.     <style name="Theme.AppCompat.DayNight.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar"/>
  11.     <!-- ... -->
  12. </resources>
  13.

res/values-night-v8/values-night-v8.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat"/>
  4.     <style name="Theme.AppCompat.DayNight.DarkActionBar" parent="Theme.AppCompat"/>
  5.     <style name="Theme.AppCompat.DayNight.Dialog" parent="Theme.AppCompat.Dialog"/>
  6.     <style name="Theme.AppCompat.DayNight.Dialog.Alert" parent="Theme.AppCompat.Dialog.Alert"/>
  7.     <style name="Theme.AppCompat.DayNight.Dialog.MinWidth" parent="Theme.AppCompat.Dialog.MinWidth"/>
  8.     <style name="Theme.AppCompat.DayNight.DialogWhenLarge" parent="Theme.AppCompat.DialogWhenLarge"/>
  9.     <style name="Theme.AppCompat.DayNight.NoActionBar" parent="Theme.AppCompat.NoActionBar"/>
  10.     <style name="ThemeOverlay.AppCompat.DayNight" parent="ThemeOverlay.AppCompat.Dark"/>
  11. </resources>
  12.

res/values/values.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources xmlns:ns1="urn:oasis:names:tc:xliff:document:1.2" xmlns:ns2="http://schemas.android.com/tools">
  3.     <!-- ... -->
  4.     <style name="Theme.MaterialComponents.DayNight" parent="Theme.MaterialComponents.Light"/>
  5.     <style name="Theme.MaterialComponents.DayNight.BottomSheetDialog" parent="Theme.MaterialComponents.Light.BottomSheetDialog"/>
  6.     <style name="Theme.MaterialComponents.DayNight.Bridge" parent="Theme.MaterialComponents.Light.Bridge"/>
  7.     <style name="Theme.MaterialComponents.DayNight.DarkActionBar" parent="Theme.MaterialComponents.Light.DarkActionBar"/>
  8.     <style name="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge"/>
  9.     <style name="Theme.MaterialComponents.DayNight.Dialog" parent="Theme.MaterialComponents.Light.Dialog"/>
  10.     <style name="Theme.MaterialComponents.DayNight.Dialog.Alert" parent="Theme.MaterialComponents.Light.Dialog.Alert"/>
  11.     <style name="Theme.MaterialComponents.DayNight.Dialog.Alert.Bridge" parent="Theme.MaterialComponents.Light.Dialog.Alert.Bridge"/>
  12.     <style name="Theme.MaterialComponents.DayNight.Dialog.Bridge" parent="Theme.MaterialComponents.Light.Dialog.Bridge"/>
  13.     <style name="Theme.MaterialComponents.DayNight.Dialog.FixedSize" parent="Theme.MaterialComponents.Light.Dialog.FixedSize"/>
  14.     <style name="Theme.MaterialComponents.DayNight.Dialog.FixedSize.Bridge" parent="Theme.MaterialComponents.Light.Dialog.FixedSize.Bridge"/>
  15.     <style name="Theme.MaterialComponents.DayNight.Dialog.MinWidth" parent="Theme.MaterialComponents.Light.Dialog.MinWidth"/>
  16.     <style name="Theme.MaterialComponents.DayNight.Dialog.MinWidth.Bridge" parent="Theme.MaterialComponents.Light.Dialog.MinWidth.Bridge"/>
  17.     <style name="Theme.MaterialComponents.DayNight.DialogWhenLarge" parent="Theme.MaterialComponents.Light.DialogWhenLarge"/>
  18.     <style name="Theme.MaterialComponents.DayNight.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar"/>
  19.     <style name="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge"/>
  20.     <!-- ... -->
  21. </resources>
  22.

res/values-night-v8/values-night-v8.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <style name="Theme.MaterialComponents.DayNight" parent="Theme.MaterialComponents"/>
  4.     <style name="Theme.MaterialComponents.DayNight.BottomSheetDialog" parent="Theme.MaterialComponents.BottomSheetDialog"/>
  5.     <style name="Theme.MaterialComponents.DayNight.Bridge" parent="Theme.MaterialComponents.Bridge"/>
  6.     <style name="Theme.MaterialComponents.DayNight.DarkActionBar" parent="Theme.MaterialComponents"/>
  7.     <style name="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge" parent="Theme.MaterialComponents.Bridge"/>
  8.     <style name="Theme.MaterialComponents.DayNight.Dialog" parent="Theme.MaterialComponents.Dialog"/>
  9.     <style name="Theme.MaterialComponents.DayNight.Dialog.Alert" parent="Theme.MaterialComponents.Dialog.Alert"/>
  10.     <style name="Theme.MaterialComponents.DayNight.Dialog.Alert.Bridge" parent="Theme.MaterialComponents.Dialog.Alert.Bridge"/>
  11.     <style name="Theme.MaterialComponents.DayNight.Dialog.Bridge" parent="Theme.MaterialComponents.Dialog.Bridge"/>
  12.     <style name="Theme.MaterialComponents.DayNight.Dialog.FixedSize" parent="Theme.MaterialComponents.Dialog.FixedSize"/>
  13.     <style name="Theme.MaterialComponents.DayNight.Dialog.FixedSize.Bridge" parent="Theme.MaterialComponents.Dialog.FixedSize.Bridge"/>
  14.     <style name="Theme.MaterialComponents.DayNight.Dialog.MinWidth" parent="Theme.MaterialComponents.Dialog.MinWidth"/>
  15.     <style name="Theme.MaterialComponents.DayNight.Dialog.MinWidth.Bridge" parent="Theme.MaterialComponents.Dialog.MinWidth.Bridge"/>
  16.     <style name="Theme.MaterialComponents.DayNight.DialogWhenLarge" parent="Theme.MaterialComponents.DialogWhenLarge"/>
  17.     <style name="Theme.MaterialComponents.DayNight.NoActionBar" parent="Theme.MaterialComponents.NoActionBar"/>
  18.     <style name="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" parent="Theme.MaterialComponents.NoActionBar.Bridge"/>
  19.     <style name="ThemeOverlay.MaterialComponents.DayNight.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog"/>
  20.     <style name="Widget.MaterialComponents.ActionBar.PrimarySurface" parent="Widget.MaterialComponents.ActionBar.Surface"/>
  21.     <style name="Widget.MaterialComponents.AppBarLayout.PrimarySurface" parent="Widget.MaterialComponents.AppBarLayout.Surface"/>
  22.     <style name="Widget.MaterialComponents.BottomAppBar.PrimarySurface" parent="Widget.MaterialComponents.BottomAppBar"/>
  23.     <style name="Widget.MaterialComponents.BottomNavigationView.PrimarySurface" parent="Widget.MaterialComponents.BottomNavigationView"/>
  24.     <style name="Widget.MaterialComponents.TabLayout.PrimarySurface" parent="Widget.MaterialComponents.TabLayout"/>
  25.     <style name="Widget.MaterialComponents.Toolbar.PrimarySurface" parent="Widget.MaterialComponents.Toolbar.Surface"/>
  26. </resources>
  27.

Tips: MaterialComponents.Bridge继承自AppCompat主题，并增加了Material Components的主题属性，如果项目之前是用的AppCompat，那么使用对应的Bridge主题可以快速切换到Material Design。

从上面的分析可以看出，DayNight就是在values以及values-night中分别定义了浅色和深色的主题。如果我们的主题直接继承DayNight主题，那么就不需要重复地声明对应的night主题资源了。

如果我们想对深色模式主题添加自定义属性，那么我们可以不继承DayNight主题，并显示地声明主题对应的night资源，例如

res/values/themes.xml

  1. <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
  2.     <!-- ... -->
  3.     <item name="android:windowLightStatusBar">true</item>
  4. </style>
  5.

res/values-night/themes.xml

  1. <style name="Theme.MyApp" parent="Theme.MaterialComponents">
  2.     <!-- ... -->
  3.     <item name="android:windowLightStatusBar">false</item>
  4. </style>
  5.

Tips: 若需要动态修改主题要在调用inflate之前调用，否则不会生效。

2. 色值
主题切换颜色

除了定义不同模式使用不同的主题，我们还可以对主题设置自定义的色值。在设置主题色值之前，我们先了解一下Android主题的颜色系统。

  • colorPrimary：主要品牌颜色，一般用于ActionBar背景

  • colorPrimaryDark：默认用于顶部状态栏和底部导航栏

  • colorPrimaryVariant：主要品牌颜色的可选颜色

  • colorSecondary：第二品牌颜色

  • colorSecondaryVariant：第二品牌颜色的可选颜色

  • colorPrimarySurface：对应Light主题指向colorPrimary，Dark主题指向colorSurface

  • colorOn[Primary, Secondary, Surface …]，在Primary等这些背景的上面内容的颜色，例如ActioBar上面的文字颜色

  • colorAccent：默认设置给colorControlActivated，一般是主要品牌颜色的明亮版本补充

  • colorControlNormal：图标和控制项的正常状态颜色

  • colorControlActivated：图标和控制项的选中颜色（例如Checked或者Switcher）

  • colorControlHighlight：点击高亮效果（ripple或者selector）

  • colorButtonNormal：按钮默认状态颜色

  • colorSurface：cards, sheets, menus等控件的背景颜色

  • colorBackground：页面的背景颜色

  • colorError：展示错误的颜色

  • textColorPrimary：主要文字颜色

  • textColorSecondary：可选文字颜色

Tips: 当某个属性同时可以通过 ?attr/xxx 或者?android:attr/xxx获取时，最好使用?attr/xxx，因为?android:attr/xxx是通过系统获取，而?attr/xxx是通过静态库类似于AppCompat 或者 Material Design Component引入的。使用非系统版本的属性可以提高平台通用性。

如果需要自定义主题颜色，我们可以对颜色分别定义notnight和night两份，放在values以及values-night资源文件夹中，并在自定义主题时，传入给对应的颜色属性。例如：

res/values/styles.xml

  1. <resources>
  2.     <style name="DayNightAppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">
  3.         <item name="colorPrimary">@color/color_bg_1</item>
  4.         <item name="colorPrimaryDark">@color/color_bg_1</item>
  5.         <item name="colorAccent">@color/color_main_1</item>
  6.     </style>
  7. </resources>
  8.

res/values/colors.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <color name="color_main_1">#4D71FF</color>
  4.     <color name="color_bg_1">#FFFFFF</color>
  5.     <color name="color_text_0">#101214</color>
  6.     <color name="color_light">#E0A62E</color>
  7. </resources>
  8.

res/values-night/colors.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <color name="color_main_1">#FF584D</color>
  4.     <color name="color_bg_1">#0B0C0D</color>
  5.     <color name="color_text_0">#F5F7FA</color>
  6.     <color name="color_light">#626469</color>
  7. </resources>
  8.
控件切换颜色

同样的，我们可以在布局的XML文件中直接使用定义好的颜色值，例如

  1. <TextView 
  2.       android:id="@+id/auto_color_text"
  3.       android:text="自定义变色文字"
  4.       android:background="@drawable/bg_text"
  5.       android:textColor="@color/color_text_0" />
  6.  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:shape="rectangle">
  4.     <stroke android:color="@color/color_text_0" android:width="2dp"/>
  5.     <solid android:color="@color/color_bg_1" />
  6. </shape>
  7.

这样这个文字就会在深色模式中展示为黑底白字，在非深色模式中展示为白底黑字。

动态设置颜色

如果需要代码设置颜色，如果色值已经设置过notnight和night两份，那么直接设置颜色就可以得到深色模式变色效果。

  1. auto_color_text.setTextColor(ContextCompat.getColor(this, R.color.color_text_0))
  2.

如果色值是从服务接口获取，那么可以使用上述深色模式的判断设置。

  1. auto_color_text.setTextColor(if (isNightMode()) {
  2.   Color.parseColor(darkColorFromNetwork)
  3. } else {
  4.   Color.parseColor(colorFromNetwork)
  5. })
  6.
3. 图片&动画
普通图片&Gif图片

将图片分为明亮模式和深色模式两份，分别放置在drawable-night-xxx以及drawable-xxx文件夹中，并在view中直接使用即可，当深色模式切换时，会使用对应深色模式的资源。如下图所示：

  1. <ImageView android:src="@drawable/round_fingerprint" />
  2.
Vector图片

在Vector资源定义时，通过指定画笔颜色来实现对深色模式的适配，例如：

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:width="24dp"
  3.     android:height="24dp"
  4.     android:tint="@color/color_light"
  5.     android:viewportWidth="24"
  6.     android:viewportHeight="24">
  7.     <path
  8.         android:fillColor="@android:color/white"
  9.         android:pathData="M6.29,14.29L9,17v4c0,0.55 0.45,1 1,1h4c0.55,0 1,-0.45 1,-1v-4l2.71,-2.71c0.19,-0.19 0.29,-0.44 0.29,-0.71L18,10c0,-0.55 -0.45,-1 -1,-1L7,9c-0.55,0 -1,0.45 -1,1v3.59c0,0.26 0.11,0.52 0.29,0.7zM12,2c0.55,0 1,0.45 1,1v1c0,0.55 -0.45,1 -1,1s-1,-0.45 -1,-1L11,3c0,-0.55 0.45,-1 1,-1zM4.21,5.17c0.39,-0.39 1.02,-0.39 1.42,0l0.71,0.71c0.39,0.39 0.39,1.02 0,1.41 -0.39,0.39 -1.02,0.39 -1.41,0l-0.72,-0.71c-0.39,-0.39 -0.39,-1.02 0,-1.41zM17.67,5.88l0.71,-0.71c0.39,-0.39 1.02,-0.39 1.41,0 0.39,0.39 0.39,1.02 0,1.41l-0.71,0.71c-0.39,0.39 -1.02,0.39 -1.41,0 -0.39,-0.39 -0.39,-1.02 0,-1.41z" />
  10. </vector>
  11.

其中android:tint为叠加颜色，@color/color_light已经分别定义好了notnight和night的色值。

Lottie

对于Lottie动画，我们可以使用Lottie的Dynamic Properties特性来针对深色模式进行颜色变化。例如我们有以下两个动画，左边是由颜色填充的机器人，右边是由描边生成的正在播放动画，我们可以调用LottieAnimationView.resolveKeyPath()方法获取动画的路径。

  1. lottie_android_animate.addLottieOnCompositionLoadedListener {
  2.   lottie_android_animate.resolveKeyPath(KeyPath("**")).forEach {
  3.     Log.d(TAG, it.keysToString())
  4.   }
  5.   setupValueCallbacks()
  6. }
  7.

对于机器小人打印的KeyPath如下：

  1. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [MasterController]
  2. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Head]
  3. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Head, Group 3]
  4. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Head, Group 3, Fill 1]
  5. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink]
  6. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 2]
  7. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 2, Rectangle Path 1]
  8. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 2, Fill 1]
  9. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 1]
  10. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 1, Rectangle Path 1]
  11. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Blink, Rectangle 1, Fill 1]
  12. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Eyes]
  13. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Eyes, Group 3]
  14. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Eyes, Group 3, Fill 1]
  15. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [BeloOutlines]
  16. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [BeloOutlines, Group 1]
  17. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [BeloOutlines, Group 1, Stroke 1]
  18. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Shirt]
  19. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Shirt, Group 5]
  20. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Shirt, Group 5, Fill 1]
  21. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Body]
  22. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Body, Group 4]
  23. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [Body, Group 4, Fill 1]
  24. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftFoot]
  25. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftFoot, Group 1]
  26. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftFoot, Group 1, Fill 1]
  27. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightFoot]
  28. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightFoot, Group 2]
  29. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightFoot, Group 2, Fill 1]
  30. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave]
  31. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave, LeftArm]
  32. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave, LeftArm, Group 6]
  33. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave, LeftArm, Group 6, Fill 1]
  34. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave, LeftArm, Group 5]
  35. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [LeftArmWave, LeftArm, Group 5, Fill 1]
  36. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightArm]
  37. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightArm, Group 6]
  38. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightArm, Group 6, Fill 1]
  39. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightArm, Group 5]
  40. 2020-09-10 15:30:55.762 29281-29281/com.shengj.androiddarkthemedemo D/DarkThemeDemo: [RightArm, Group 5, Fill 1]
  41.

我们抽取其中的某些形状来动态改变颜色，例如我们抽取左右手臂以及机器小人身上的T恤

  1. private fun setupValueCallbacks() {
  2.         // 机器人右手臂
  3.         val rightArm = KeyPath("RightArm", "Group 6", "Fill 1")
  4.         // 机器人左手臂
  5.         val leftArm = KeyPath("LeftArmWave", "LeftArm", "Group 6", "Fill 1")
  6.         // 机器人T恤
  7.         val shirt = KeyPath("Shirt", "Group 5", "Fill 1")
  8.         // 设置右手臂颜色
  9.         lottie_android_animate.addValueCallback(rightArm, LottieProperty.COLOR) {
  10.             ContextCompat.getColor(this, R.color.color_main_1)
  11.         }
  12.         // 设置左手臂颜色
  13.         lottie_android_animate.addValueCallback(shirt, LottieProperty.COLOR) {
  14.             ContextCompat.getColor(this, R.color.color_light)
  15.         }
  16.         // 设置T恤颜色
  17.         lottie_android_animate.addValueCallback(leftArm, LottieProperty.COLOR) {
  18.             ContextCompat.getColor(this, R.color.color_custom)
  19.         }
  20.  
  21.         // 播放动画描边颜色
  22.         lottie_playing_animate.addValueCallback(KeyPath("**"), LottieProperty.STROKE_COLOR) {
  23.             ContextCompat.getColor(this, R.color.color_text_0)
  24.         }
  25.     }
  26.

由于color_main_1、color_light以及color_custom都已经定义过深色模式和明亮模式的色值，因此在深色模式切换时，Lottie动画的这个机器小人的左右手臂和T恤颜色会随着深色模式切换而变化。

同样的对于播放动画，我们也可以设置描边颜色，来达到深色模式切换的效果。

网络获取图片

对于网络获取的图片，可以让服务接口分别给出明亮模式和深色模式两套素材，然后根据上述的深色模式判断来进行切换

  1. Glide.with(this)
  2.   .load(if(isNightMode() nightImageUrl else imageUrl))
  3.   .into(imgView)
  4.

Force Dark

看到这里可能会有人有疑问，对于大型的项目而言，里面已经hardcore了很多的颜色值，并且很多图片都没有设计成深色模式的，那做深色模式适配是不是一个不可能完成的任务呢？答案是否定的。对于大型项目而言，除了对所有的颜色和图片定义night资源的自定义适配方法外，我们还可以对使用Light风格主题的页面进行进行强制深色模式转换。

我们可以分别对主题和View设置强制深色模式。对于主题，在Light主题中设置android:forceDarkAllowed，例如：

  1. <style name="LightAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
  2.     <!-- ... -->
  3.   <item name="android:forceDarkAllowed">true</item>
  4. </style>
  5.

对于View，设置View.setForceDarkAllowed(boolean))或者xml来设置是否支持Force Dark，默认值是true。

  1. <View
  2.   android:layout_width="wrap_content"
  3.   android:layout_height="wrap_content"
  4.   android:forceDarkAllowed="false"/>
  5.

这里需要注意的是，Force Dark的设置有以下几个规则：

  1. 要强制深色模式生效必须开启硬件加速（默认开启）

  2. 主题设置的Force Dark仅对Light的主题有效，对非Light的主题不管是设置android:forceDarkAllowed为true或者设置View.setForceDarkAllowed(true)都是无效的。

  3. 父节点设置了不支持Force Dark，那么子节点再设置支持Force Dark无效。例如主题设置了android:forceDarkAllowed为false，则View设置View.setForceDarkAllowed(true)无效。同样的，如果View本身设置了支持Force Dark，但是其父layout设置了不支持，那么该View不会执行Force Dark

  4. 子节点设置不支持Force Dark不受父节点设置支持Force Dark影响。例如View设置了支持Force Dark，但是其子Layout设置了不支持，那么子Layout也不会执行Force Dark。

Tips：一个比较容易记的规则就是不支持Force Dark优先，View 的 Force Dark设置一般会设置成 false，用于排除某些已经适配了深色模式的 View。

下面我们从源码出发来理解Force Dark的这些行为，以及看看系统是怎么实现Force Dark的。

Tips：善用 https://cs.android.com/ 源码搜索网站可以方便查看系统源码。

1. 主题

从主题设置的forceDarkAllowed入手查找，可以找到

frameworks/base/core/java/android/view/ViewRootImpl.java

  1. private void updateForceDarkMode() {
  2.   if (mAttachInfo.mThreadedRenderer == null) return;
  3.   // 判断当前是否深色模式
  4.   boolean useAutoDark = getNightMode() == Configuration.UI_MODE_NIGHT_YES;
  5.   // 如果当前是深色模式
  6.   if (useAutoDark) {
  7.     // 获取Force Dark的系统默认值
  8.     boolean forceDarkAllowedDefault =
  9.       SystemProperties.getBoolean(ThreadedRenderer.DEBUG_FORCE_DARK, false);
  10.     TypedArray a = mContext.obtainStyledAttributes(R.styleable.Theme);
  11.     // 判断主题是否浅色主题 并且 判断主题设置的forceDarkAllowed
  12.     useAutoDark = a.getBoolean(R.styleable.Theme_isLightTheme, true)
  13.       && a.getBoolean(R.styleable.Theme_forceDarkAllowed, forceDarkAllowedDefault);
  14.     a.recycle();
  15.   }
  16.   // 将是否强制使用深色模式赋值给Renderer层
  17.   if (mAttachInfo.mThreadedRenderer.setForceDark(useAutoDark)) {
  18.     // TODO: Don't require regenerating all display lists to apply this setting
  19.     invalidateWorld(mView);
  20.   }
  21. }
  22.

而这个方法正式在ViewRootImpl.enableHardwareAcceleration()方法中调用的，因此可以得到第一个结论：强制深色模式只在硬件加速下生效。由于userAutoDark变量会判断当前主题是否为浅色，因此可以得到第二个结论：强制深色模式只在浅色主题下生效。直到这一步的调用链如下：

mAttachInfo.mThreadedRenderer为ThreadRenderer，继承自HardwareRenderer，指定了接下来的渲染操作由RanderThread执行。继续跟踪setForceDark()方法：

frameworks/base/graphics/java/android/graphics/HardwareRenderer.java

  1. public boolean setForceDark(boolean enable) {
  2.   // 如果强制深色模式变化
  3.   if (mForceDark != enable) {
  4.     mForceDark = enable;
  5.     // 调用native层设置强制深色模式逻辑
  6.     nSetForceDark(mNativeProxy, enable);
  7.     return true;
  8.   }
  9.   return false;
  10. }
  11.  
  12. private static native void nSetForceDark(long nativeProxy, boolean enabled);
  13.

查找nSetForceDark()方法

frameworks/base/libs/hwui/jni/android_graphics_HardwareRenderer.cpp

  1. static const JNINativeMethod gMethods[] = {
  2.         // ... 
  3.     // 在Android Runtime启动时，通过JNI动态注册
  4.     { "nSetForceDark", "(JZ)V", (void*)android_view_ThreadedRenderer_setForceDark },
  5.     { "preload", "()V", (void*)android_view_ThreadedRenderer_preload },
  6. };
  7.

查找android_view_ThreadedRenderer_setForceDark()方法

frameworks/base/libs/hwui/jni/android_graphics_HardwareRenderer.cpp

  1. static void android_view_ThreadedRenderer_setForceDark(JNIEnv* env, jobject clazz,
  2.         jlong proxyPtr, jboolean enable) {
  3.     RenderProxy* proxy = reinterpret_cast<RenderProxy*>(proxyPtr);
  4.     // 调用RenderProxy的setForceDark方法
  5.     proxy->setForceDark(enable);
  6. }
  7.

frameworks/base/libs/hwui/renderthread/RenderProxy.cpp

  1. void RenderProxy::setForceDark(bool enable) {
  2.         // 调用CanvasContext的setForceDark方法
  3.     mRenderThread.queue().post([this, enable]() { mContext->setForceDark(enable); });
  4. }
  5.

frameworks/base/libs/hwui/renderthread/CanvasContext.h

  1. // Force Dark的默认值是false
  2. bool mUseForceDark = false;
  3. // 设置mUseForceDark标志
  4. void setForceDark(bool enable) { mUseForceDark = enable; }
  5. bool useForceDark() {
  6.   return mUseForceDark;
  7. }
  8.

接着查找调用userForceDark()方法的地方

frameworks/base/libs/hwui/TreeInfo.cpp

  1. TreeInfo::TreeInfo(TraversalMode mode, renderthread::CanvasContext& canvasContext)
  2.         : mode(mode)
  3.         , prepareTextures(mode == MODE_FULL)
  4.         , canvasContext(canvasContext)
  5.         // 设置disableForceDark变量
  6.         , disableForceDark(canvasContext.useForceDark() ? 0 : 1)
  7.         , screenSize(canvasContext.getNextFrameSize()) {}
  8.  
  9. }  // namespace android::uirenderer
  10.

frameworks/base/libs/hwui/TreeInfo.h

  1. class TreeInfo {
  2. public:
  3.     // ...
  4.     int disableForceDark;
  5.     // ...
  6. };
  7.

到了这里，可以看出，当设置了Force Dark之后，最终会设置到TreeInfo类中的disableForceDark变量，如果没有设置主题的Force Dark，那么根据false的默认值，disableForceDark变量会别设置成1，如果设置了使用强制深色模式，那么disableForceDark会变成0。

这个变量最终会用在RenderNode的RenderNode.handleForceDark()过程中，到达的流程如下图：

frameworks/base/libs/hwui/RenderNode.cpp

  1. void RenderNode::prepareTreeImpl(TreeObserver& observer, TreeInfo& info, bool functorsNeedLayer) {
  2.     // ...
  3.     // 同步正在处理的RenderNode Property变化
  4.     if (info.mode == TreeInfo::MODE_FULL) {
  5.         pushStagingPropertiesChanges(info);
  6.     }
  7.     // 如果当前View不允许被ForceDark，那么info.disableForceDark值+1
  8.     if (!mProperties.getAllowForceDark()) {
  9.         info.disableForceDark++;
  10.     }
  11.     // ...
  12.     // 同步正在处理的Render Node的Display List，实现具体深色的逻辑
  13.     if (info.mode == TreeInfo::MODE_FULL) {
  14.         pushStagingDisplayListChanges(observer, info);
  15.     }
  16.  
  17.     if (mDisplayList) {
  18.         info.out.hasFunctors |= mDisplayList->hasFunctor();
  19.         bool isDirty = mDisplayList->prepareListAndChildren(
  20.                 observer, info, childFunctorsNeedLayer,
  21.                 [](RenderNode* child, TreeObserver& observer, TreeInfo& info,
  22.                    bool functorsNeedLayer) {
  23.                     // 递归调用子节点的prepareTreeImpl。
  24.                     // 递归调用之前，若父节点不允许强制深色模式，disableForceDark已经不为0，
  25.                     //     子节点再设置允许强制深色模式不会使得disableForceDark的值减少，
  26.                     //     因此有第三个规则：父节点设置了不允许深色模式，子节点再设置允许深色模式无效。
  27.                     // 同样的，递归调用之前，若父节点允许深色模式，disableForceDark为0，
  28.                     //     子节点再设置不允许强制深色模式，则disableForceDark值还是会++，不为0
  29.                     //     因此有第四个规则：子节点设置不允许强制深色模式不受父节点设置允许强制深色模式影响。
  30.                     child->prepareTreeImpl(observer, info, functorsNeedLayer);
  31.                 });
  32.         if (isDirty) {
  33.             damageSelf(info);
  34.         }
  35.     }
  36.     pushLayerUpdate(info);
  37.     // 递归结束后将之前设置过+1的值做回退-1恢复操作，避免影响其他兄弟结点的深色模式值判断
  38.     if (!mProperties.getAllowForceDark()) {
  39.         info.disableForceDark--;
  40.     }
  41.     info.damageAccumulator->popTransform();
  42. }
  43.  
  44. void RenderNode::pushStagingDisplayListChanges(TreeObserver& observer, TreeInfo& info) {
  45.     // ...
  46.     // 同步DisplayList
  47.     syncDisplayList(observer, &info);
  48.     // ...
  49. }
  50.  
  51. void RenderNode::syncDisplayList(TreeObserver& observer, TreeInfo* info) {
  52.     // ...
  53.     if (mDisplayList) {
  54.         WebViewSyncData syncData {
  55.             // 设置WebViewSyncData的applyForceDark
  56.             .applyForceDark = info && !info->disableForceDark
  57.         };
  58.         mDisplayList->syncContents(syncData);
  59.         // 强制执行深色模式执行
  60.         handleForceDark(info);
  61.     }
  62. }
  63.  
  64. void RenderNode::handleForceDark(android::uirenderer::TreeInfo *info) {
  65.     if (CC_LIKELY(!info || info->disableForceDark)) {
  66.         // 如果disableForceDark不为0，关闭强制深色模式，则直接返回
  67.         return;
  68.     }
  69.     auto usage = usageHint();
  70.     const auto& children = mDisplayList->mChildNodes;
  71.     // 如果有文字表示是前景策略
  72.     if (mDisplayList->hasText()) {
  73.         usage = UsageHint::Foreground;
  74.     }
  75.     if (usage == UsageHint::Unknown) {
  76.         // 如果子节点大于1或者第一个子节点不是背景，那么设置为背景策略
  77.         if (children.size() > 1) {
  78.             usage = UsageHint::Background;
  79.         } else if (children.size() == 1 &&
  80.                 children.front().getRenderNode()->usageHint() !=
  81.                         UsageHint::Background) {
  82.             usage = UsageHint::Background;
  83.         }
  84.     }
  85.     if (children.size() > 1) {
  86.         // Crude overlap check
  87.         SkRect drawn = SkRect::MakeEmpty();
  88.         for (auto iter = children.rbegin(); iter != children.rend(); ++iter) {
  89.             const auto& child = iter->getRenderNode();
  90.             // We use stagingProperties here because we haven't yet sync'd the children
  91.             SkRect bounds = SkRect::MakeXYWH(child->stagingProperties().getX(), child->stagingProperties().getY(),
  92.                     child->stagingProperties().getWidth(), child->stagingProperties().getHeight());
  93.             if (bounds.contains(drawn)) {
  94.                 // This contains everything drawn after it, so make it a background
  95.                 child->setUsageHint(UsageHint::Background);
  96.             }
  97.             drawn.join(bounds);
  98.         }
  99.     }
  100.     // 根据前景还是背景策略对颜色进行提亮或者加深
  101.     mDisplayList->mDisplayList.applyColorTransform(
  102.             usage == UsageHint::Background ? ColorTransform::Dark : ColorTransform::Light);
  103. }
  104.

Tips：View的绘制会根据VSYNC信号，将UI线程的Display List树同步到Render线程的Display List树，并通过生产者消费者模式将layout信息放置到SurfaceFlinger中，并最后交给Haredware Composer进行合成绘制。具体View渲染逻辑见参考章节的15~19文章列表。

frameworks/base/libs/hwui/RecordingCanvas.cpp

  1. void DisplayListData::applyColorTransform(ColorTransform transform) {
  2.     // 使用transform作为参数执行color_transform_fns函数组
  3.     this->map(color_transform_fns, transform);
  4. }
  5.  
  6. template <typename Fn, typename... Args>
  7. inline void DisplayListData::map(const Fn fns[], Args... args) const {
  8.     auto end = fBytes.get() + fUsed;
  9.     // 遍历需要绘制的元素op，并调用对应类型的colorTransformForOp函数
  10.     for (const uint8_t* ptr = fBytes.get(); ptr < end;) {
  11.         auto op = (const Op*)ptr;
  12.         auto type = op->type;
  13.         auto skip = op->skip;
  14.         if (auto fn = fns[type]) {  // We replace no-op functions with nullptrs
  15.             fn(op, args...);        // to avoid the overhead of a pointless call.
  16.         }
  17.         ptr += skip;
  18.     }
  19. }
  20.  
  21. typedef void (*color_transform_fn)(const void*, ColorTransform);
  22.  
  23. #define X(T) colorTransformForOp<T>(),
  24. static const color_transform_fn color_transform_fns[] = {
  25.   // 相当于 colorTransformForOp<Flush>()
  26.   X(Flush)
  27.   X(Save)
  28.   X(Restore)
  29.   X(SaveLayer)
  30.   X(SaveBehind)
  31.   X(Concat44)
  32.   X(Concat)
  33.   X(SetMatrix)
  34.   X(Scale)
  35.   X(Translate)
  36.   X(ClipPath)
  37.   X(ClipRect)
  38.   X(ClipRRect)
  39.   X(ClipRegion)
  40.   X(DrawPaint)
  41.   X(DrawBehind)
  42.   X(DrawPath)
  43.   X(DrawRect)
  44.   X(DrawRegion)
  45.   X(DrawOval)
  46.   X(DrawArc)
  47.   X(DrawRRect)
  48.   X(DrawDRRect)
  49.   X(DrawAnnotation)
  50.   X(DrawDrawable)
  51.   X(DrawPicture)
  52.   X(DrawImage)
  53.   X(DrawImageNine)
  54.   X(DrawImageRect)
  55.   X(DrawImageLattice)
  56.   X(DrawTextBlob)
  57.   X(DrawPatch)
  58.   X(DrawPoints)
  59.   X(DrawVertices)
  60.   X(DrawAtlas)
  61.   X(DrawShadowRec)
  62.   X(DrawVectorDrawable)
  63.   X(DrawWebView)
  64. };
  65. #undef X
  66.  
  67. struct DrawImage final : Op {
  68.     static const auto kType = Type::DrawImage;
  69.     DrawImage(sk_sp<const SkImage>&& image, SkScalar x, SkScalar y, const SkPaint* paint,
  70.               BitmapPalette palette)
  71.             : image(std::move(image)), x(x), y(y), palette(palette) {
  72.         if (paint) {
  73.             this->paint = *paint;
  74.         }
  75.     }
  76.     sk_sp<const SkImage> image;
  77.     SkScalar x, y;
  78.     // 这里SK指代skia库对象
  79.     SkPaint paint;
  80.     BitmapPalette palette;
  81.     void draw(SkCanvas* c, const SkMatrix&) const { c->drawImage(image.get(), x, y, &paint); }
  82. };
  83.  
  84. template <class T>
  85. constexpr color_transform_fn colorTransformForOp() {
  86.     if
  87.         // 如果类型T有paint变量，并且有palette变量
  88.         constexpr(has_paint<T> && has_palette<T>) {
  89.             // It's a bitmap(绘制Bitmap)
  90.             // 例如对于一个DrawImage的OP，最终会调用到这里
  91.             // opRaw对应DrawImage对象，transform为ColorTransform::Dark或者ColorTransform::Light
  92.             return [](const void* opRaw, ColorTransform transform) {
  93.                 // TODO: We should be const. Or not. Or just use a different map
  94.                 // Unclear, but this is the quick fix
  95.                 const T* op = reinterpret_cast<const T*>(opRaw);
  96.                 transformPaint(transform, const_cast<SkPaint*>(&(op->paint)), op->palette);
  97.             };
  98.         }
  99.     else if
  100.         constexpr(has_paint<T>) {
  101.             return [](const void* opRaw, ColorTransform transform) {
  102.                 // TODO: We should be const. Or not. Or just use a different map
  103.                 // Unclear, but this is the quick fix
  104.                 // 非Bitmap绘制
  105.                 const T* op = reinterpret_cast<const T*>(opRaw);
  106.                 transformPaint(transform, const_cast<SkPaint*>(&(op->paint)));
  107.             };
  108.         }
  109.     else {
  110.         return nullptr;
  111.     }
  112. }
  113.

frameworks/base/libs/hwui/CanvasTransform.cpp

这里进行具体的颜色转换逻辑，我们首先关注非Bitmap绘制的颜色转换

  1. // 非Bitmap绘制颜色模式转换
  2. bool transformPaint(ColorTransform transform, SkPaint* paint) {
  3.     applyColorTransform(transform, *paint);
  4.     return true;
  5. }
  6.  
  7. // 非Bitmap绘制颜色模式转换
  8. static void applyColorTransform(ColorTransform transform, SkPaint& paint) {
  9.     if (transform == ColorTransform::None) return;
  10.     // 具体绘制颜色转换逻辑
  11.     SkColor newColor = transformColor(transform, paint.getColor());
  12.     // 将画笔颜色修改为转换后的颜色
  13.     paint.setColor(newColor);
  14.  
  15.     // 有渐变色情况
  16.     if (paint.getShader()) {
  17.         SkShader::GradientInfo info;
  18.         std::array<SkColor, 10> _colorStorage;
  19.         std::array<SkScalar, _colorStorage.size()> _offsetStorage;
  20.         info.fColorCount = _colorStorage.size();
  21.         info.fColors = _colorStorage.data();
  22.         info.fColorOffsets = _offsetStorage.data();
  23.         SkShader::GradientType type = paint.getShader()->asAGradient(&info);
  24.  
  25.         if (info.fColorCount <= 10) {
  26.             switch (type) {
  27.                 // 线性渐变并且渐变颜色少于等于10个的情况
  28.                 case SkShader::kLinear_GradientType:
  29.                     for (int i = 0; i < info.fColorCount; i++) {
  30.                         // 对渐变色颜色进行转换
  31.                         info.fColors[i] = transformColor(transform, info.fColors[i]);
  32.                     }
  33.                     paint.setShader(SkGradientShader::MakeLinear(info.fPoint, info.fColors,
  34.                                                                  info.fColorOffsets, info.fColorCount,
  35.                                                                  info.fTileMode, info.fGradientFlags, nullptr));
  36.                     break;
  37.                 default:break;
  38.             }
  39.  
  40.         }
  41.     }
  42.  
  43.     // 处理colorFilter
  44.     if (paint.getColorFilter()) {
  45.         SkBlendMode mode;
  46.         SkColor color;
  47.         // TODO: LRU this or something to avoid spamming new color mode filters
  48.         if (paint.getColorFilter()->asAColorMode(&color, &mode)) {
  49.             // 对colorFilter颜色进行转换
  50.             color = transformColor(transform, color);
  51.             paint.setColorFilter(SkColorFilters::Blend(color, mode));
  52.         }
  53.     }
  54. }
  55.  
  56. static SkColor transformColor(ColorTransform transform, SkColor color) {
  57.     switch (transform) {
  58.         case ColorTransform::Light:
  59.             return makeLight(color);
  60.         case ColorTransform::Dark:
  61.             return makeDark(color);
  62.         default:
  63.             return color;
  64.     }
  65. }
  66.  
  67. // 前景色变亮
  68. static SkColor makeLight(SkColor color) {
  69.     // 将sRGB色彩模式转换成Lab色彩模式
  70.     Lab lab = sRGBToLab(color);
  71.     // 对亮度L维度取反
  72.     float invertedL = std::min(110 - lab.L, 100.0f);
  73.     if (invertedL > lab.L) {
  74.         // 若取反后亮度变亮，则替换原来亮度
  75.         lab.L = invertedL;
  76.         // 重新转换为sRGB模式
  77.         return LabToSRGB(lab, SkColorGetA(color));
  78.     } else {
  79.         return color;
  80.     }
  81. }
  82.  
  83. // 后景色变暗
  84. static SkColor makeDark(SkColor color) {
  85.     // 将sRGB色彩模式转换成Lab色彩模式
  86.     Lab lab = sRGBToLab(color);
  87.     // 对亮度L维度取反
  88.     float invertedL = std::min(110 - lab.L, 100.0f);
  89.     if (invertedL < lab.L) {
  90.         // 若取反后亮度变暗，则替换原来亮度
  91.         lab.L = invertedL;
  92.         // 重新转换为sRGB模式
  93.         return LabToSRGB(lab, SkColorGetA(color));
  94.     } else {
  95.         return color;
  96.     }
  97. }
  98.

从代码中可以看出，深色模式应用之后，通过对sRGB色彩空间转换Lab色彩空间，并对表示亮度的维度L进行取反，并判断取反后前景色是不是更亮，后景色是不是更暗，若是的话就替换为原来的L，并再重新转换为sRGB色彩空间，从而实现反色的效果。

我们再来看对图片的强制深色模式处理：

  1. // Bitmap绘制颜色模式转换
  2. bool transformPaint(ColorTransform transform, SkPaint* paint, BitmapPalette palette) {
  3.     // 考虑加上filter之后图片的明暗
  4.     palette = filterPalette(paint, palette);
  5.     bool shouldInvert = false;
  6.     if (palette == BitmapPalette::Light && transform == ColorTransform::Dark) {
  7.         // 图片比较亮但是需要变暗
  8.         shouldInvert = true;
  9.     }
  10.     if (palette == BitmapPalette::Dark && transform == ColorTransform::Light) {
  11.         // 图片比较暗但是需要变亮
  12.         shouldInvert = true;
  13.     }
  14.     if (shouldInvert) {
  15.         SkHighContrastConfig config;
  16.         // 设置skia反转亮度的filter
  17.         config.fInvertStyle = SkHighContrastConfig::InvertStyle::kInvertLightness;
  18.         paint->setColorFilter(SkHighContrastFilter::Make(config)->makeComposed(paint->refColorFilter()));
  19.     }
  20.     return shouldInvert;
  21. }
  22.  
  23. // 获取paint filter的palette值，若没有filter直接返回原来的palette
  24. static BitmapPalette filterPalette(const SkPaint* paint, BitmapPalette palette) {
  25.     // 如果没有filter color返回原来的palette
  26.     if (palette == BitmapPalette::Unknown || !paint || !paint->getColorFilter()) {
  27.         return palette;
  28.     }
  29.  
  30.     SkColor color = palette == BitmapPalette::Light ? SK_ColorWHITE : SK_ColorBLACK;
  31.     // 获取filter color，并根据palette的明暗再叠加一层白色或者黑色
  32.     color = paint->getColorFilter()->filterColor(color);
  33.     // 根据将颜色转换为HSV空间，并返回是图片的亮度是亮还是暗
  34.     return paletteForColorHSV(color);
  35. }
  36.

从代码中可以看出，对于Bitmap类型的绘制，先判断原来绘制Bitmap的明暗度，如果原来绘制的图像较为明亮但是需要变暗，或者原来绘制的图像较为暗需要变明亮，则设置一个明亮度转换的filter到画笔paint中。

至此，对于主题级别的强制深色转换原理已经非常清晰。总结一下，就是需要对前景色变亮和背景色变暗，然后对于非Bitmap类型明暗变化采用的是将色值转换为Lab颜色空间进行明亮度转换，对于Bitmap类型的明暗变化采取设置亮度转换的filter进行。

2. View

无论是设置View的xml的android:forceDarkAllowed属性，还是调用View.setForceDarkAllowed()最后还是调用到frameworks/base/core/java/android/view/View.java的mRenderNode.setForceDarkAllowed()方法。

frameworks/base/graphics/java/android/graphics/RenderNode.java

  1. public boolean setForceDarkAllowed(boolean allow) {
  2.   return nSetAllowForceDark(mNativeRenderNode, allow);
  3. }
  4.

nSetAllowForceDark通过JNI调用到android_view_RenderNode_setAllowForceDarkNavtive方法中。

frameworks/base/libs/hwui/jni/android_graphics_RenderNode.cpp

  1. static const JNINativeMethod gMethods[] = {
  2.   // ...
  3.   { "nSetAllowForceDark",        "(JZ)Z", (void*) android_view_RenderNode_setAllowForceDark },
  4.   // ...
  5. };
  6.  
  7. static jboolean android_view_RenderNode_setAllowForceDark(CRITICAL_JNI_PARAMS_COMMA jlong renderNodePtr, jboolean allow) {
  8.     return SET_AND_DIRTY(setAllowForceDark, allow, RenderNode::GENERIC);
  9. }
  10.  
  11. #define SET_AND_DIRTY(prop, val, dirtyFlag) \
  12.     (reinterpret_cast<RenderNode*>(renderNodePtr)->mutateStagingProperties().prop(val) \
  13.         ? (reinterpret_cast<RenderNode*>(renderNodePtr)->setPropertyFieldsDirty(dirtyFlag), true) \
  14.         : false)
  15.

最后这个是否允许深色模式的allow变量被设置到RenderProperties.h 中

frameworks/base/libs/hwui/RenderProperties.h

  1. /*
  2.  * Data structure that holds the properties for a RenderNode
  3.  */
  4. class ANDROID_API RenderProperties {
  5. public:
  6.     // ...
  7.     // 设置View是否允许强制深色模式
  8.     bool setAllowForceDark(bool allow) {
  9.         return RP_SET(mPrimitiveFields.mAllowForceDark, allow);
  10.     }
  11.     // 获取View是否允许强制深色模式
  12.     bool getAllowForceDark() const {
  13.         return mPrimitiveFields.mAllowForceDark;
  14.     }
  15.     // ...
  16. private:
  17.     // Rendering properties
  18.     struct PrimitiveFields {
  19.         // ...
  20.         // 默认值为true
  21.         bool mAllowForceDark = true;
  22.         // ...
  23.     } mPrimitiveFields;
  24.

我们回头看下上面分析过的RenderNode.cpp的prepareTreeImpl流程

frameworks/base/libs/hwui/RenderNode.cpp

  1. // 经过了简化处理的prepareTreeImpl逻辑
  2. void RenderNode::prepareTreeImpl(TreeObserver& observer, TreeInfo& info) {
  3.     // 如果当前View不允许被ForceDark，那么info.disableForceDark值+1
  4.     if (!mProperties.getAllowForceDark()) {
  5.         info.disableForceDark++;
  6.     }
  7.  
  8.     // 同步正在处理的Render Node的Display List，实现具体深色的逻辑
  9.     pushStagingDisplayListChanges(observer, info);
  10.  
  11.     mDisplayList->prepareListAndChildren([](RenderNode* child, TreeObserver& observer, TreeInfo& info) {
  12.         // 递归调用子节点的prepareTreeImpl。
  13.         // 递归调用之前，若父节点不允许强制深色模式，disableForceDark已经不为0，
  14.         //     子节点再设置允许强制深色模式不会使得disableForceDark的值减少，
  15.         //     因此有第三个规则：父节点设置了不允许深色模式，子节点再设置允许深色模式无效。
  16.         // 同样的，递归调用之前，若父节点允许深色模式，disableForceDark为0，
  17.         //     子节点再设置不允许强制深色模式，则disableForceDark值还是会++，不为0
  18.         //     因此有第四个规则：子节点设置不允许强制深色模式不受父节点设置允许强制深色模式影响。
  19.         child->prepareTreeImpl(observer, info);
  20.       });
  21.  
  22.     // 递归结束后将之前设置过+1的值做回退-1恢复操作，避免影响其他兄弟结点的深色模式值判断
  23.     if (!mProperties.getAllowForceDark()) {
  24.         info.disableForceDark--;
  25.     }
  26. }
  27.

可以看出，设置View的forceDarkAllowed最终会设置到当前RenderNode的mProperties.allowForceDark属性中，并在RenderNode遍历的过程中影响深色模式的执行。

我们可以以下面的伪代码来更直观地了解深色模式执行的流程：

  1. // 深色模式渲染伪代码
  2. int disableDark = if (themeAllowDark) 0 else 1;
  3.  
  4. void RenderNode(Node node) {
  5.   if (!node.allowDark) {
  6.     disableDark++;
  7.   }
  8.   if (disableDark == 0) forceDarkCurrentNode();
  9.   for (child : node.children) {
  10.     RenderNode(child)
  11.   }
  12.   if (!node.allowDark) {
  13.     disableDark--;
  14.   }
  15. }
  16.

至此，我们分析完所有强制深色模式的原理。总结一下，主题默认不会强制深色，若主题设置了强制深色，则遍历View树对其节点进行强制深色转换。碰到某个View不希望被强制深色，则包括它和它的所有子节点都不会被强制深色。

总结

到这里，我们了解了可以通过设置-night资源以及判断当前颜色模式来自定义切换主题、色值、图片和动画的颜色，也从源代码角度了解Force Dark的原理和生效规则。

Demo

上述提到的代码可以到这个Github项目https://github.com/shenguojun/AndroidDarkThemeDemo下载

参考

  1. Google Developers - Dark Theme

  2. Material Design - Dark Theme

  3. Material Design - The color system

  4. Android 10 暗黑模式适配，你需要知道的一切

  5. Android 10 Dark Theme: Getting Started

  6. Android styling: themes vs styles

  7. Android styling: common theme attributes

  8. Android Styling: prefer theme attributes

  9. Lottie - Dynamic Properties

  10. Lottie on Android: Part 3 — Dynamic properties

  11. MIUI 深色模式适配说明

  12. OPPO 暗色模式适配说明

  13. Android Q深色模式源码解析

  14. Moving to the Dark Side: Dark Theme Recap

  15. Android应用程序UI硬件加速渲染环境初始化过程分析

  16. Android应用程序UI硬件加速渲染的Display List构建过程分析

  17. Android应用程序UI硬件加速渲染的Display List渲染过程分析

  18. Drawn out: how Android renders (Google I/O ‘18)

  19. 深入理解Android的渲染机制

  20. SKIA api

  21. Android Code Search

拖不得了，Android11 最全适配实践指南奉上

Android 升级适配爬坑历程

欢迎关注微信公众号 code小生，专注移动开发、大前端技术、Google等资讯，扫描下方二维码立刻关注。

  1.  
  2. 如果你有写博客的好习惯
  3. 欢迎投稿
  4. 赞+在看,小生感恩❤️
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/619553
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号