一、背景
公司的业务需要使用换肤功能实现白天/黑夜模式,调研了市场主流换肤框架,主要采用了LayoutInflater.Factory
接口干涉Xml中View解析的过程,将创建View的过程由自己来接手。但本项目大量使用自定义View及动态创建View,Xml中描述界面的情况不多,针对这种情况,我设计了一套轻量级的实时换肤框架。
二、使用
项目UI框架是单Activity+多Fragment的结构,为满足实时刷新,不出现页面闪烁的需求,所以从三个方面来实现换肤功能。
1.Activity
当前项目中需要实时刷新的Activity只有首页和设置页,所以单独对这两个Activity进行处理。首先需要实现Skinable
接口,在页面创建和销毁时添加监听,这样,主题发生改变时,就会通知到applySkin()
方法。
class MainActivity : RootActivity(), MainContract.View, Skinable {
...
private fun initView() {
SkinManager.instance.register(this)
}
override fun onDestroy() {
super.onDestroy()
SkinManager.instance.unregister(this)
}
override fun applySkin() {
container.setBackgroundColor(resources.getColor(R.color.bg_color_primary))
navigation.setBackgroundColor(resources.getColor(R.color.bg_color_primary))
for (fragment in supportFragmentManager.fragments) {
if (fragment is RootFragment && fragment.isAdded && !fragment.isDetached) {
fragment.refreshStatusBar()
if (fragment is Skinable) {
fragment.applySkin()
}
}
}
changeStatusBarTheme()
}
...
}
2.Fragment
Fragment是UI界面的承载体,所以在RootFragment中实现了Skinable
接口,所有的Fragment需要覆写applySkin()
方法,在里面处理自己的换肤逻辑,即设置页面控件的颜色属性(如背景色、字体颜色、图标等)。
3.View
View是每个页面最基础的元素,出于方便使用和易维护的角度,对这层当中的自定义控件和系统控件做了区别处理。
系统控件
直接在Fragment的applySkin()
里调用设置相关属性的方法。
showQrCode.background = resources.getDrawable(R.drawable.selector_with_ripple)
addEnigma.setTextColor(resources.getColor(R.color.text_color_tips))
自定义控件
对于自定义控件,直接让控件实现Skinable
接口,在自定义控件内部处理控件自己的换肤逻辑,这样外部不用考虑内部控件的逻辑,只需在 Fragment的applySkin()
方法中直接调用该自定义控件的applySkin()
方法。
class PasswordEditText: AppCompatEditText, Skinable {
...
override fun applySkin() {
mTextPaint.color = resources.getColor(R.color.text_color_input_hint)
background = resources.getDrawable(R.drawable.selector_login_edit_bkg)
setTextColor(resources.getColor(R.color.text_color_minor))
setHintTextColor(resources.getColor(R.color.text_color_input_hint))
}
...
}
4.资源定义
这里拿黑夜模式进行举例
添加资源目录
首先需要在build.gralde
文件的android节点中添加res-nigit
。
android {
...
sourceSets {
main {
res.srcDirs = ['src/main/res', 'src/main/res-night']
}
...
}
}
定义资源名
黑夜模式的资源需要在res_night
中加入同名的_night
后缀,如果未添加,默认会取白天模式的。
colors.xml也需要这样定义。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary_night">#333333</color>
<color name="colorPrimaryDark_night">#00574B</color>
<color name="colorAccent_night">#26B36D</color>
<!-- text colors -->
<color name="text_color_primary_night">#ffffff</color>
<color name="text_color_minor_night">#cccccc</color>
<color name="text_color_tips_night">#909399</color>
...
<!-- background colors -->
<color name="bg_color_primary_night">#333333</color>>
<color name="bg_color_pressed_night">#2d2d2d</color>
...
<!-- default avatar colors -->
<color name="default_avatar_red_night">#ED4E4E</color>
<color name="default_avatar_blue_night">#6C9DD9</color>
...
<!-- bottom sheet colors -->
<color name="colorSheetText_night">#DE000000</color>
<color name="colorSheetTitle_night">#8A000000</color>
<color name="colorSheetDivider_night">#3f717171</color>
<color name="bg_color_status_bar_night">#333333</color>
</resources>
在这里,推荐大家如果使用图标,最好用SVG图,除了占用空间小、缩放无质量损失以外,添加对于黑夜模式的时候,也只需要修改SVG文件色值即可达到。
三、原理
其实核心思想上面也提到了,就是继承Resource,覆写了getColor()
和getDrawable()
方法。
class CustomResources(val resources: Resources) :
Resources(resources.assets, resources.displayMetrics, resources.configuration) {
override fun getColor(id: Int): Int {
return SkinManager.instance.getColor(id)
}
override fun getDrawable(id: Int): Drawable {
return SkinManager.instance.getDrawable(id)
}
fun updateConfig(config: Configuration?, metrics: DisplayMetrics?) {
resources.updateConfiguration(config, metrics)
}
}
然后在SkinManager中通过SkinResources获取相应主题的资源。
class SkinResources {
...
fun getSkinColor(context: Context, id:Int): Int {
val resources = context.resources
val type = resources.getResourceTypeName(id)
val color = resources.getResourceEntryName(id)
val identifier = getIdentifier(context, nameConvert(color), type)
return when {
identifier != 0 -> resources.getColor(identifier)
else -> resources.getColor(id)
}
}
fun getSkinDrawable(context:Context,id:Int): Drawable {
val resources = context.resources
val type = resources.getResourceTypeName(id)
val drawable = resources.getResourceEntryName(id)
val identifier = getIdentifier(context, nameConvert(drawable), type)
return when {
identifier != 0 -> resources.getDrawable(identifier)
else ->resources.getDrawable(id)
}
}
...
}