14.5--深色主题

我们一直以来使用的操作系统都是以浅色主题为主的,这种主题模式在白天或者是光纤宠族的情况下使用起来没有任何问题,可是在夜晚灯光关闭的情况下使用就会显得非常刺眼。

于是,许多应用程序为了能够让用户在光纤昏暗的情况下更加舒适地使用,会在应用内部提供一个一键切换夜间模式的按钮。当用户开启了夜间模式,就会将应用程序的整体颜色都调整成更加适合于夜间浏览的颜色。

不过,这种应用程序自发实现夜间模式的方式很难做到全局统一,既有些应用可能支持夜间模式,有些应用却不支持。而且重复操作的问题也很让人头疼,比如说我在一个应用中开启了夜间模式,在另外一个应用中还需要再开启一次,关闭夜间模式也需要进行同样重复的操作。

因此,很多开发者一直呼吁,希望Android 能够在系统层面支持夜间模式功能。终于在Android10.0 系统中,Google 引入了深色主题这一特性,从而让夜间模式正式成为了官方支持的功能。

或许你会有些疑惑,这种看上去并没有太多技术难度的功能,为什么Android 直到10.0 系统中才进行支持呢?这是因为仅仅操作系统自身支持深色主题是没有用的,还得让所有的应用程序都能够支持才行,而这从来都不是一件容易的事情。

为此,我希望你以后开发的应用程序都能够按照Android 系统的要求对深色主题进行很好地支持,不然当用户开启了深色主题之后,只有你的应用还使用的是浅色主题的话,就会显得格格不入。

除了让眼部在夜间使用时更加舒适之外,深色主题还可以减少电量消耗,从而延长手机续航,是一项非常有用的功能。那么接下来,我们就开始学习如何才能让应用程序支持深色主题功能。

首先,Android10.0 及以上系统的手机,都可以在Settings → Display → Dark theme 中对深色主题进行开启和关闭。开启深色主题后,系统的界面风格包括一些内置的应用程序都会变成深色主题的色调,如图所示:

不过,如果这时你打开我们自己编写的应用程序,你会发现目前界面的风格还是使用的浅色主题模式,这就和系统的主题风格不同了,说明我们需要对此进行适配。这里我准备使用再第12 章中编写的MaterialTest 项目来作为示例,看一看如何才能让它更加完美地适配深色主题模式。

最简单的一种适配方式就是使用Force Dark,它是一种能让应用程序快速适配深色主题,并且几乎不用编写额外代码的方式。Force Dark 的工作原理是系统会分析浅色主题应用下的每一层View,并且在这些View 绘制到屏幕之前,自动将它们的颜色转换成更加适合深色主题的颜色。注意,只有原本使用浅色主题的应用才能使用这种方式,如果你的应用原本使用的就是深色主题, Force Dark 将不会起作用。

这里我们尝试对 MaterialTest 项目使用Force Dark  转换来进行举例。启用Force Dark 功能需要借助 android:forceDarkAllowed 属性,不过这个属性是从API 29 ,也就是Android 10.0 系统开始才有的,之前的系统无法指定这个属性。因此,我们得进行一些系统差异型编程才行。

右击res 目录 → New → Directory,创建一个 values-v29 目录,然后右击 values-v29 目录 → New → Values resouce file,创建一个styles.xml 文件。接着对这个文件进行编写,代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:forceDarkAllowed">true</item>
    </style>

</resources>

除了 android:forceDarkAllowed 属性之外,其他内容都是从之前的styles.xml 文件中复制过来的。这里给AppTheme 主题增加了android:forceDarkAllowed 属性并设置为true ,说明现在我们是允许系统使用Force Dark  将应用强制传唤成深色主题的。另外,values-v29 目录是只要Android 10.0 及以上系统才会去读取的,因此这是一种系统差异型编程的实现方式。

现在重新运行 MaterialTest 项目,效果如图所示:

可以看到,虽然整体的界面风格好像确实变成了深色主题的模式,可是却并不怎么美观,其实是卡片布局的效果,经过Force Dark 之后已经完全看不出来了。

Force Dark  就是这样一种简单粗暴的转换方式,并且它的转换效果通常是不尽人意的。因此,这里我并不推荐你使用这种自动化的方式来实现深色主题,而是应该使用更加传统的实现方式——手动实现。

是的,要想实现最佳的深色主题效果,不要指望有什么神器的魔法能够一键完成,而是应该针对每一个界面都进行浅色和深色两种主题的界面设计。这听上去好像有点复杂,不过我们仍然有一些好用的技巧能让这个过程变得简单。

在第 12 章中我们曾经学习过,AppCompat 库内置的主题恰好主要分为浅色主题和深色主题两类,比如MaterialTest 项目中目前使用的Theme.AppCompat.Light.NoActionBar 就是浅色主题,而Theme.AppCompat.NoActionBar 就是深色主题。选用不同的主题,在控件的默认颜色方面会有完全不同的效果。

而现在,我们多了一个DayNight 主题的选项。使用了这个主题后,当用户在系统设置中开启深色主题时,应用程序会自动使用深色主题,反之则会使用浅色主题。

下面我们来手动尝试一下吧。首先删除values-v29 目录及其目录下的内容,然后修改values/styles.xml 中的代码,如下所示:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    ...
</resources>

可以看到,这里我们将AppTheme 的parent 主题指定成了 Theme.AppCompat.DayNight.NoActionBar,这是一种DayNight 主题。因此,在普通情况下MaterialTest 项目仍然会使用浅色主题,和之前并没有什么区别,但是一旦用户在系统设置中开启了深色主题,MaterialTest 项目就会自动使用相应的深色主题。

现在我们就可以重新运行一下程序,看看使用DayNight 主题之后,MaterialTest 项目默认的界面效果是什么样的,如图所示:

很明显,现在的界面比之前使用Force Dark 转换后的界面要好看很多,至少卡片布局的效果得到了保留。

然而,虽然现在界面中的主要内容都已经自动切换成了深色主题,但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样的颜色。这是因为标题栏以及悬浮按钮使用的是我们定义在colors.xml 中的几种颜色,代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

这种指定颜色引用的方式相当于对空间的咏鹅进行了硬编码,DayNight 主题是不能对这些颜色进行动态转换的。

好在解决方案也并不复杂,我们只需要进行一些主题差异型编程就可以了。右击res 目录 → New → Directory,创建一个 values-night目录,然后右击 values-night 目录 → New → Values resouce file,创建一个colors.xml 文件。接着在这个文件中指定深色主题下的颜色值,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#303030</color>
    <color name="colorPrimaryDark">#232323</color>
    <color name="colorAccent">#008577</color>
</resources>

这样的话,在普通情况下,系统仍然会读取values/colors.xml 文件中的颜色值,而一旦用户开启了深色主题,系统就会去读取values-night/colors.xml 文件中的颜色值了。

现在重新运行一下程序,效果如图所示:

虽说使用主题差异型的编程方式几乎可以帮你解决所有的适配问题,但是在DayNight 主题下,我们最好还是尽量减少通过硬编码的方式来指定控件的颜色,而是应该更多地使用能够根据当前主题自动切换颜色的主题属性。比如说黑色文字通常应该衬托在白色的背景下,反之白色的文字通常应该衬托在黑色的背景下,那么此时我们就可以使用主题属性来指定背景以及文字的颜色,示例写法如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/colorBackground"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:text="Hello Word"
        android:textColor="?android:attr/textColorPrimary"
        />

</FrameLayout>

这些主题属性会自动根据系统当前的主题模式选择最合适的颜色值呈现给用户,效果如图所示:

另外,获取你还会有一些特殊的需求,比如要在浅色主题和深色主题下分别执行不同的代码逻辑,对此Android 也是支持的,你可以使用如下代码在任何时候判断当前系统是否是深色主题

    fun isDarkTheme(context: Context):Boolean{
        val flag = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
        return flag == Configuration.UI_MODE_NIGHT_YES
    }

调用isDarkTheme() 方法,判断当前系统是浅色主题还是深色主题,然后根据返回值执行不同的代码逻辑即可。

另外,由于 Kotlin 取消了按位运算符的写法,改成了使用英文关键字,因此上诉代码中的and 关键字其实就对应了Java 中的 & 运算符,而Kotlin 中的 or 关键字对应了Java 中的| 运算符,xor 关键字对应了Java 中的 ^ 运算符,非常好理解。

好了,关于深色主题方面的知识,讲到这里就已经差不多了。其实整节内容学下来,适配深色主题的核心思想只有一个,那就是要对每个界面都进行深色主题的界面设置,并且还要反复进行测试。在此思想的基础之上,我们可以再利用本节中学习的一些技巧来让适配工作变得更加简单。

那么接下来的时候,就让我们进入本书的最后一节Kotlin 课堂吧。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值