原文地址: Android app的暗黑模式適配實(shí)現(xiàn) - Stars-One的雜貨小窩
很久之前放在草稿箱的一篇簡(jiǎn)單筆記,是之前藍(lán)奏云批量下載工具Android版本實(shí)現(xiàn)暗黑主題的適配記錄
本文所說的這里的暗黑主題,應(yīng)該只支持Android10系統(tǒng),不過我手頭的Flyme系統(tǒng)(Android9)上測(cè)試也有效果,其他低版本則沒有測(cè)試(不過之后版本也沒用戶反饋過此問題應(yīng)該視作都兼容了吧...)
效果的話,沒有搞太復(fù)雜,APP的主題會(huì)自動(dòng)隨著系統(tǒng)主題變化(沒搞那種APP內(nèi)部切換主題)
寫的比較簡(jiǎn)陋,各位見笑了 ??
效果
原理說明
Android10開始,支持深色主題,我們想要實(shí)現(xiàn),就是在values和values-night下寫2個(gè)themes.xml,里面使用不同的主題色即可
由于APP開發(fā)時(shí)間比較久,如果想要適配深色主題,要改的地方可太多了
于是我這里就是選擇了亮色和暗色都設(shè)置一套APP的文本顏色和背景顏色,之后即可對(duì)全局APP的文字和組件背景色進(jìn)行覆蓋,從而一鍵式完成暗黑模式的適配工作
顏色文件:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#03A9F4</color>
<color name="colorPrimaryDark">#0288D1</color>
<color name="colorAccent">#40C4FF</color>
<color name="colorGrey">#9e9e9e</color>
<color name="colorBlack">#000000</color>
<color name="colorBackground">#f1f1f1</color>
<color name="color_rose">#dd1c73</color>
</resources>
亮色主題:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--用作背景色 -->
<item name="colorOnPrimary">@color/white</item>
<!-- 第二背景色,與上面的反過來 -->
<item name="colorOnSecondary">@color/gray_600</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColor">@color/black</item>
<item name="backgroundColor">@color/colorPrimary</item>
<item name="android:statusBarColor">?attr/colorPrimary</item>
</style>
暗色主題:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimaryDark</item>
<item name="colorPrimaryDark">@color/colorPrimary</item>
<!--用作背景色 -->
<item name="colorOnPrimary">@color/black</item>
<item name="colorOnSecondary">@color/white</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColor">@color/white20</item>
<item name="backgroundColor">@color/colorPrimaryDark</item>
<item name="android:statusBarColor">?attr/colorPrimary</item>
</style>
上文提到的3個(gè)屬性即是覆蓋了系統(tǒng)的文本顏色和背景顏色,因?yàn)锳PP是沉浸式狀態(tài)欄設(shè)計(jì),所以我狀態(tài)欄的顏色也一起設(shè)置了
<item name="android:textColor">@color/white20</item>
<item name="backgroundColor">@color/colorPrimaryDark</item>
<item name="android:statusBarColor">?attr/colorPrimary</item>
PS:上述我設(shè)置的暗色主題的字體顏色是有點(diǎn)灰色white20,各位可以看著調(diào)整下
官方的推薦是使用下面4個(gè)屬性:
-
?attr/colorControlNormal一種通用圖標(biāo)顏色。該顏色包含一個(gè)停用狀態(tài) -
?android:attr/textColorPrimary: 這是一種通用型文本顏色。它在淺色主題背景下接近于黑色，在深色主題背景下接近于白色。該顏色包含一個(gè)停用狀態(tài)。 -
?attr/colorSurface:它代表表面的顏色，通常是應(yīng)用程序的主要背景色或容器的背景色。在淺色主題中，通常為白色或淺灰色，在深色主題中，通常為黑色或深灰色。 -
?attr/colorOnSurface:屬性用于設(shè)置界面元素的前景顏色，如文本、圖標(biāo)等。它代表了在 colorSurface 背景上顯示的顏色。在淺色主題中，通常為深色（如黑色）以提供對(duì)比度，在深色主題中，通常為淺色（如白色）。
如果是在剛開始寫一個(gè)新的APP,注意使用上述顏色,之后就比較好的可以支持暗黑模式了,如下面代碼
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="開始說明"
android:textColor="?android:attr/textColorPrimary"
android:textSize="18sp"
android:textStyle="bold" />
其他補(bǔ)充
1.Toolbar顏色變黑色
這里發(fā)現(xiàn)設(shè)置的Toolbar在暗黑模式下是變?yōu)榱撕谏?但是我不想要黑色,想要我自己設(shè)置的暗一點(diǎn)藍(lán)色效果,于是使用了MaterialToolbar,并對(duì)其進(jìn)行了屬性的設(shè)置就可達(dá)到需要的效果
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:navigationIconTint="?attr/colorOnPrimary"
app:popupTheme="@style/AppTheme"
app:theme="@style/AppTheme"
app:titleTextColor="?attr/colorOnPrimary"
app:title="@string/app_name"/>
-
background背景色 -
navigationIconTint左側(cè)導(dǎo)航圖標(biāo)(返回箭頭)的圖標(biāo)顏色 -
titleTextColorToolbar的標(biāo)題顏色
2.獲取顏色代碼方法
想要在代碼里獲取?android:attr/textColorPrimary這個(gè)顏色,如何獲取?文章來源：http://www.zghlxwxcb.cn/news/detail-746122.html
@ColorInt
fun Context.getColorResCompat(@AttrRes id: Int): Int {
val resolvedAttr = TypedValue()
this.theme.resolveAttribute(id, resolvedAttr, true)
val colorRes = resolvedAttr.run { if (resourceId != 0) resourceId else data }
return ContextCompat.getColor(this, colorRes)
}
使用:文章來源地址http://www.zghlxwxcb.cn/news/detail-746122.html
val color = getColorResCompat(android.R.attr.textColorPrimary)
textview.setTextColor(color)
參考
- 深色主題背景 ?|? Android 開發(fā)者 ?|? Android Developers
- 以編程方式將文本顏色設(shè)置為主要的android textview |
- Android夜間模式的簡(jiǎn)單實(shí)現(xiàn)_android 夜間模式_xuzhb24的博客-CSDN博客
- Android 適配深色模式的總結(jié) - 掘金
到了這里，關(guān)于Android app的暗黑模式適配實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
