安卓10(Q)暗黑模式适配

3,880 阅读3分钟

今天更新了IOS13.1正式版,基本上IOS13已经全面推送了,IOS13一个新特色就是暗黑模式DarkMode,其实就是深色主题啦。那么很多IOS开发大佬都开始适配了,那么我们安卓10一样增加了这个深色主题背景,跟上版本的脚步,一起来适配它!

效果图

废话不多说,先上图,正常模式APP

模拟器开启深色主题
适配后效果

准备工作

在 attrs.xml 文件中定义好我们需要的一些常用的属性

    <!--    主要字体颜色-->
    <attr name="main_text_color" format="color" />
    <!--    主要背景颜色-->
    <attr name="main_bg_color" format="color" />
    <!--    主要灰色颜色-->
    <attr name="main_gray_color" format="color" />
    <!--    底部按钮背景颜色-->
    <attr name="main_nav_bg_color" format="color" />
    <!--    主要返回图标-->
    <attr name="main_back_icon" format="integer" />

然后在color.xml中设置好一些常用的颜色

    //不同模式下的颜色属性值
    <color name="main_text_color_light">#333333</color>
    <color name="main_text_color_dark">#cccccc</color>
    <color name="main_bg_color_light">#f6f6f6</color>
    <color name="main_bg_color_dark">#090909</color>
    <color name="main_gray_color_light">#999999</color>
    <color name="main_gray_color_dark">#666666</color>
    <color name="main_nav_bg_color_light">#C6E7F8</color>
    <color name="main_nav_bg_color_dark">#55C6E7F8</color>

创建两套App的主题,一套正常的,一套深色主题

    <!-- Base application theme. -->
    <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:statusBarColor">@android:color/transparent</item>
        <item name="actionSheetStyle">@style/ActionSheetStyleiOS7</item>
        <item name="main_text_color">@color/main_text_color_light</item>
        <item name="main_bg_color">@color/main_bg_color_light</item>
        <item name="main_gray_color">@color/main_gray_color_light</item>
        <item name="main_nav_bg_color">@color/main_nav_bg_color_light</item>
        <item name="main_back_icon">@mipmap/back</item>
    </style>

    <!-- Dark application theme. -->
    <style name="AppThemeDark" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="actionSheetStyle">@style/ActionSheetStyleiOS7</item>
        <item name="main_text_color">@color/main_text_color_dark</item>
        <item name="main_bg_color">@color/main_bg_color_dark</item>
        <item name="main_gray_color">@color/main_gray_color_dark</item>
        <item name="main_nav_bg_color">@color/main_nav_bg_color_dark</item>
        <item name="main_back_icon">@mipmap/back_dark</item>
    </style>

在主体中把我们准备好的颜色配置进去,接下来开始正题了。

判断当前主题模式

//检查当前系统是否已开启暗黑模式
fun getDarkModeStatus(context: Context): Boolean {
    val mode = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
    return mode == Configuration.UI_MODE_NIGHT_YES
}

通过这个方法可以获取是否为深色模式,把这个方法放在BaseActivity中

设置主题

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    if (getDarkModeStatus(this)) {
        setTheme(R.style.AppThemeDark)
    } else {
        setTheme(R.style.AppTheme)
    }
    //注意这里设置主题要放在setContentView前面
    setContentView(getLayoutId())
}
  • 这里注意设置主题要放在setContentView前面

在BaseActivity的onCreate中,判断是否为深色模式,根据系统主题颜色设置我们App的主题,这里我们额外定义了一个AppThemeDark作为深色模式的主题

在布局中应用

在布局文件xml中就可以使用了,例如:

android:background="?attr/main_bg_color"

这样背景色就会根据主题自动改变

android:textColor="?attr/main_text_color"

文字颜色自动改变

app:navigationIcon="?attr/main_back_icon"

用于返回图标

总结

总的来说就是多做了一套主题,像QQ音乐那种能换主题的APP可能适配起来更快,甚至不用适配。看起来很简单,实际做起来除了麻烦点也没什么难度。