Android App Dark Theme(暗黑模式)适配指南

那么,为什么我们需要暗黑模式?暗黑模式到底有什么好处?Android 开发者该如何适配暗黑模式呢?今天这篇文章就告诉你。

Why we need Dark Theme?

暗色主题的 App 比比皆是,但是让 Android 和 iOS 从系统层级支持暗黑模式还是头一次。也许是用户的呼声也许是工业的推动,发展得益于进步和反馈,暗黑模式就这样来到了你我的手机上。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

以上这张图截选自 Android 官方文档,上面提出了 Dark Theme 的三点好处:

  1. 可以帮助我们节省更多的电量

  2. 为弱视以及对强光敏感的用户提高可视性

  3. 让所有人都可以在光线较暗的环境中更轻松地使用设备

这得益于 OLED 屏幕的发展,与 LCD 不同 OLED 能够自发光,每个像素点都能发出红绿蓝三色光,而 LCD 则通过其背光层穿透有颜色的薄膜来发出不同的光。这样在暗黑模式下,OLED 就具有天生的优势,只需要关闭黑色区域的显示,就可以达到纯黑效果,而 LCD 的背光层只能发射白光,所以在显示黑色的时候,仍然会有部分光透过颜色薄膜,无法达到纯黑效果,只能达到相对黑的效果。

所以,在如今使用 OLED 屏幕的手机上面,开启暗黑模式会大幅减少手机电量的消耗。关于其中更详细的作用原理以及好处,推荐阅读来自中科院物理所公众号的文章,点击下方查看。

你喜欢“白板黑字”还是“黑板白字”

为你的 Android App 适配暗黑模式

适配大概可以分为三部分工作:

  1. 为应用内的背景、文字、图标做适配

  2. 对在设备上显示但并不直接控制的界面进行适配,例如通知、桌面组件

  3. 在应用内为用户提供切换主题的开关选项

适配的方式也分为三种:自动适配、自定义适配、使用 Material Design Components 进行适配,为了方便说明,我这里写了一个实例代码,在没有开启适配前是这个样子的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

自动适配 Force Dark

Android 10 提供 Force Dark 功能。此功能可让开发者快速实现深色主题背景,只需要在 style.xml 中的应用主题中添加这一行代码 android:forceDarkAllowed=“true” ,就可以完成自动适配。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果您的应用采用浅色主题背景,则 Force Dark 会分析应用的每个视图,并在相应视图在屏幕上显示之前,自动应用深色主题背景。当然这里的适配工作全是系统自己做的,所以作为开发者你需要进行详细的测试,确保没有错误的地方。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从上面的截图来看,自动适配的效果很不错,关于自动适配的原理,这里有一篇文章对此进行了详细的说明,文章地址在最后。

Android Q 深色模式(Dark Mode)源码解析

自定义适配

自定义适配的关键在于,避免一切硬编码的颜色值,建立 light 、night 两份 colors,通过定义相同的名字,在不同模式下显示不同的颜色。

1. 确保当前 App 使用的主题继承自 AppCompat 或 MaterialComponents,并将之前默认的 Light 主题修改为 DayNight

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.为 Dark Mode 定义 colors

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

新建完成之后我们的 values 下会有两份 colors 文件,工程结构如下图所示

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 根据需求对不同模式下相同名字的颜色值做适配

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里推荐使用颜色本身的场景意义来命名,例如上图中的 colorBackground 表示背景颜色,colorOnError 表示在错误状态上,文字的显示颜色,在控件需要颜色的地方,直接通过 @color/colorXXX 来使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

自定义适配完全可以达到任何我们想要的效果,相比自动适配,这里我对状态栏、错误颜色以及强调色进行了微调。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用 Material Design Components 进行适配

Material Design Components 不仅仅包含了各式各样的组件,还完善了 Material Design 的规范,相比组件来说更重要的是 MD 设计规范。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上图为 Material Design 的官网,在设计一览中,详细制定了各种规范,例如颜色系统该如何设计、阴影的原理和规范、字体的规范、图标该如何选择、交互效果该怎样设计等等。

我个人来说是非常喜欢 Material Design ,之后会计划在这个公众号上面为大家详细的介绍一下Material Design 到底是怎样的,相信很多人都知道 Material Design 但真正读过它的文档,以及认真了解过其设计原理的人,应该寥寥无几。

所以说不是用了 Material Design 的组件就代表自己的 App 遵循了 Material Design 的设计规范,也更别说连这个规范都没看过的人,就一杆子打死说 Material Design 反人类。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 Material Design 官网颜色系统的设计中,专门讲解了关于 Dark theme 该如何设计,之所以叫做 Dark theme,所有的适配都是围绕 theme 来进行的。而上一节的自定义适配中,我们只是简单粗暴的通过 colors 来适配。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

最后

在此为大家准备了四节优质的Android高级进阶视频:

架构师项目实战——全球首批Android开发者对Android架构的见解

附相关架构及资料

image.png

往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter全方面的Android进阶实践技术,群内还有技术大牛一起讨论交流解决问题。

d高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter全方面的Android进阶实践技术,群内还有技术大牛一起讨论交流解决问题。**

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值