简洁优雅地实现夜间模式

 · 4 mins read

前言

Android 6.0 Marshmallow 预览版中曾经短暂出现过相关的夜间模式的功能,只是在正式版中被移除了,在 Android 7.0 Nougat 上,用户们再次经历了「得而复失」的遗憾,在开发者预览版中,夜间模式和暗色模式先是开启,然后有再次被移除。而在正式版中,夜间模式也没有出现。但其实相关的代码一直存在于系统中,只是默认没有被开启。如何开启这项功能,可以参考少数派的这一篇文章,帮你找回 Android 7.0 夜间模式的 2 款应用

不过,今天要介绍的主要内容并不是关于系统的夜间模式,而是如何给我们开发的 APP 添加夜间模式的功能。毫不夸张的说,夜间模式现在已经是阅读类 App 的标配了。事实上,日间模式与夜间模式就是给 APP 定义并应用两套不同颜色的主题。用户可以自动或者手动的开启。我们先看两个我认为实现地很优雅的例子:知乎和 Twitter 。

Night Mode of Zhihu&Twitter.gif

这两个 APP 在切换的工程中,并没有出现闪现黑屏的情况,切换也比较顺滑。我们的目标就是利用 Support Library 实现同样的效果。

实现

添加依赖

compile 'com.android.support:appcompat-v7:25.1.0'

由于 Support Library 在 23.2.0 的版本中才添加了 Theme.AppCompat.DayNight 主题,所以依赖的版本必须是高于 23.2.0 的,并且,这个特性支持的最低 SDK 版本为14,所以,需要兼容 Android 4.0 的设备,是不能使用这个特性的,在 API Level 14 以下的设备会默认使用亮色主题。不过现在 4.0 以下的设备应该比较少了吧,毕竟微信的 minSdkVersion 都设置为14了。

准备资源

  1. 让我们自己的主题继承并应用DayNight主题:

     <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
             <item name="colorPrimary">@color/colorPrimary</item>
             <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
             <item name="colorAccent">@color/colorAccent</item>
             <!--customize your theme here-->
     </style>
    
  2. 新建夜间模式资源文件夹:

    res 目录下新建 values-night 文件夹,然后在此目录下新建 colors.xml 文件在夜间模式下的应用的资源。当然也可以根据需要新建 drawable-night, layout-night 等后缀为 -night 的夜间资源文件夹。 我的 valuesvalues-night 目录下的 colors.xml 的内容如下:

     <?xml version="1.0" encoding="utf-8"?>
     <!--values-colors.xml-->
     <resources>
         <color name="colorPrimary">#009688</color>
         <color name="colorPrimaryDark">#00796B</color>
         <color name="colorAccent">#009688</color>
         <color name="textColorPrimary">#616161</color>
         <color name="viewBackground">@android:color/white</color>
     </resources>
     <!--values-night-colors.xml-->
     <?xml version="1.0" encoding="utf-8"?>
     <resources>
         <color name="colorPrimary">#35464e</color>
         <color name="colorPrimaryDark">#212a2f</color>
         <color name="colorAccent">#212a2f</color>
         <color name="textColorPrimary">#616161</color>
         <color name="viewBackground">#212a2f</color>
     </resources>
    
  3. 使Activity继承自AppCompatActivity:

     public class MainActivity extends AppCompatActivity {
         // code here
    		
     @Override
         protected void onCreate(Bundle savedInstanceState) {
         }
     }
    

应用

静态应用

在Application的继承类下设置初始主题:

public class App extends Application {
    
	@Override
    public void onCreate() {
        super.onCreate();
		AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
		// other code here
	}
}

这里 AppCompatDelegate.setDefaultNightMode() 方法可以接受的参数值有 4 个:

  • MODE_NIGHT_NO. Always use the day (light) theme(一直应用日间(light)主题).
  • MODE_NIGHT_YES. Always use the night (dark) theme(一直使用夜间(dark)主题).
  • MODE_NIGHT_AUTO. Changes between day/night based on the time of day(根据当前时间在day/night主题间切换).
  • MODE_NIGHT_FOLLOW_SYSTEM(默认选项). This setting follows the system’s setting, which is essentially MODE_NIGHT_NO(跟随系统,通常为MODE_NIGHT_NO).

我们可以在任何时候调用这个方法,因为这个方法是静态的。但是这个值并不是一直存在的,每次在开启进程时需要重新设置。在上面的代码中,我是在 onCreate() 方法中设置的,网上也有大神建议在 Activity 或者 Application 的 static 代码块中设置。如下所示:

public class App extends Application {
		static {
		    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
		}
	    
		@Override
	    public void onCreate() {
	        super.onCreate();
			// other code here
		}
}

动态应用

虽然上面的静态应用的设置非常简单,但是这种方式的应用场景还是太少了。我们更多的还是需要动态的根据需要动态的切换。

  1. 检测当前主题模式

     int mode = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
    
  2. 设置主题

     if(mode == Configuration.UI_MODE_NIGHT_YES) {
         AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
     } else if(mode == Configuration.UI_MODE_NIGHT_NO) {
         AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
     } else {
         // blah blah
     }
     recreate();
    

在调用 recreate() 方法之前,还可以创建一些动画进行过渡。而且,众所周知,调用 recreate() 需要对一些数据进行保存,例如 fragment,CheckBox, RadioBox 等。如下所示:

public class MainFragment extends Fragment {
	
	@Override
   	public void onCreate(@Nullable Bundle savedInstanceState) {
       	super.onCreate(savedInstanceState);
   	 	if (savedInstanceState != null) {
   	 		FragmentManager manager = getChildFragmentManager();
			doubanMomentFragment = (DoubanMomentFragment) manager.getFragment(savedInstanceState, "douban");
   	 	} else {
   	 		doubanMomentFragment = DoubanMomentFragment.newInstance();
   	 	}
   	}
   	
	@Override
   	public void onSaveInstanceState(Bundle outState) {
      	 super.onSaveInstanceState(outState);
      	 FragmentManager manager = getChildFragmentManager();
      	 manager.putFragment(outState, "douban", doubanMomentFragment);
}

我们也可以把主题的值存储到SharedPreference中,已便于应用在下一次启动时自动应用主题。

Q&A

  • Q: 系统默认的颜色不合我的口味怎么办?

    A: 使用主题属性,例如: textColor:?android:attr/textColorPrimary, color:?attr/colorControlNormal 等。

  • Q: 为什么我的 WebView 颜色没有变化?

    A: 因为 WebView 不能使用主题属性。WebView 的颜色实际上取决于网页内容颜色。网页的默认背景色是白色,所以尽管设置了主题为 AppCompatDelegate.MODE_NIGHT_YES,网页仍然是白色,所以看起来就很不搭了。所以,网页的内容和背景色等资源也需要适配了。

  • Q: 为什么不直接设置为 MODE_NIGHT_AUTO 呢?

    A: 因为使用 MODE_NIGHT_AUTO 需要请求坐标权限,获取系统的位置。你肯定会说了,这尼玛不是坑爹吗?如果程序已经授予了坐标权限(location permission)(如果你的 target SDK 为 23 或者更高,需要考虑运行时权限),AppCompat 会试着去获取上次保存的坐标,根据坐标来计算日出与日落的时间。如果程序没有位置权限或者 LocationManager 没有存储上次坐标的信息呢?系统或默认设置为早上 6 点钟为日出,下午10点为日落。用户调整系统时间,当前的主题也会随之改变。如果我们不希望用户在设定主题后,主题还会随着时间改变, MODE_NIGHT_AUTO 就不适用了。

代码

本项目代码 PaperPlane . 运行效果:

PaperPlane