今天更新了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可能适配起来更快,甚至不用适配。看起来很简单,实际做起来除了麻烦点也没什么难度。