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

在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣佈將支持 Dark Theme 也就是咱們常說的暗黑模式,並提供相關 API 供開發者適配。android

那麼,爲何咱們須要暗黑模式?暗黑模式到底有什麼好處?Android 開發者該如何適配暗黑模式呢?今天這篇文章就告訴你。post

Why we need Dark Theme?

暗色主題的 App 比比皆是,可是讓 Android 和 iOS 從系統層級支持暗黑模式仍是頭一次。也許是用戶的呼聲也許是工業的推進,發展得益於進步和反饋,暗黑模式就這樣來到了你個人手機上。測試

以上這張圖截選自 Android 官方文檔,上面提出了 Dark Theme 的三點好處:字體

  1. 能夠幫助咱們節省更多的電量ui

  2. 爲弱視以及對強光敏感的用戶提升可視性編碼

  3. 讓全部人均可以在光線較暗的環境中更輕鬆地使用設備設計

這得益於 OLED 屏幕的發展,與 LCD 不一樣 OLED 可以自發光,每一個像素點都能發出紅綠藍三色光,而 LCD 則經過其背光層穿透有顏色的薄膜來發出不一樣的光。這樣在暗黑模式下,OLED 就具備天生的優點,只須要關閉黑色區域的顯示,就能夠達到純黑效果,而 LCD 的背光層只能發射白光,因此在顯示黑色的時候,仍然會有部分光透過顏色薄膜,沒法達到純黑效果,只能達到相對黑的效果。3d

因此,在現在使用 OLED 屏幕的手機上面,開啓暗黑模式會大幅減小手機電量的消耗。關於其中更詳細的做用原理以及好處,推薦閱讀來自中科院物理所公衆號的文章,點擊下方查看。cdn

你喜歡「白板黑字」仍是「黑板白字」xml

爲你的 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 來適配。

Material Design Components 中內置了 12 種不一樣場景的顏色屬性,分別爲主強調色、次強調色,背景顏色、表面顏色、錯誤顏色、以及字體和 icon 的顏色(以 on 開頭的)。

因此在使用 Material Design Components 進行適配的時候,咱們須要定義兩種 theme,分別表明 light 和 night,經過分別定義兩個主題中相同場景意義的顏色屬性來實現暗黑模式的切換。而上一部分自定義適配則是,經過定義一份主題,在同一主題下經過控制 light 、night 兩種顏色來實現切換。

相比自定義適配、使用 Material Design Components 適配從設計的角度上更加規範,同時對 theme、attr、style 的不一樣使用場景也作了更加明確的區分,經過 theme 來規範屬性,在控件中不直接操做顏色,而是經過屬性來操做顏色,由於屬性具備明確的場景意義。

而 colors 就只須要定義一份,這裏推薦使用於顏色自己來命名。

上面就是我針對 light、night 分別定義的兩份 theme。

你有沒有發現這裏咱們不須要手動定義 textColor 了,由於前面說了,Material Design Components 內置了 12 種顏色,而咱們的這個 TextView 是位於 CardView 上面的,CardView 的默認顏色就是咱們 theme 中定義的 colorSurface,TextView 的默認顏色就是 colorOnSurface,因此咱們只須要在 theme 中定義屬性來指明顏色就能夠了,這就是經過屬性來操做的好處,固然前提是開發人員必須熟悉 Material Design Components 的顏色規範。

切換主題

目前爲止咱們已經知道了如何適配暗黑模式,在完成適配以後,咱們還須要爲用戶提供在運行時,切換主題的選項。

一般你能夠在設置中爲用戶提供切換的選項,切換的代碼也很簡單,經過 delegate.localNightMode 來設置當前的模式。

有一點須要注意的是,切換邏輯僅在運行時生效,當咱們從新啓動 App 的時候,會與當前系統設置的模式保持一致,因此當用戶執行完切換邏輯後,咱們須要對用戶的行爲進行保存,當下一次從新啓動 App 的時候,以恢復用戶以前的切換邏輯。

自定義切換邏輯

當咱們設置 delegate.localNightMode 的時候,系統會自動從新建立 Activity,若是你不想要從新建立,能夠在 manifest 中對應的 Activity 中指定 android:configChanges="uiMode",而後重寫 onConfigurationChanged() 方法,本身來處理切換邏輯。

至此全部關於 Android App 的 Dark Mode 適配的內容就介紹到這裏,關於更多 Dark Mode 的資料以及本文中 demo 的倉庫,關注本公衆號【Android|Kotlin】回覆【暗黑】能夠獲取所有內容。

感謝你的觀看,若是對你有用,請點個好看,分享轉發這篇文章,這將會對我有很大的幫助,謝謝!

相關文章
相關標籤/搜索