轻听是一款小而美的Android本地音乐播放器，而它的特点之一就是拥有多彩的外衣，
其中，左边6张是白天模式下的几种不同主题色的样式，右边是夜间模式。
那么轻听是如何实现变色的呢？
主要是结合以下两种方式：
自定义Style和Theme
动态配置主题色
自定义Style和Theme
Style和Theme主要用来实现白天模式和夜间模式。
一个Style是一系列属性的集合，用来指定View或者Window的外观和格式。它可以指定的属性包括高度, Padding, 文字颜色，文字尺寸，背景颜色等等。
Style是在Xml资源文件中定义的，比如：
<style name="ListItemTitleStyle" parent="TextAppearance.AppCompat.Body1"> <item name="android:singleLine">true</item> <item name="android:ellipsize">end</item> <item name="android:textColor">?android:attr/textColorPrimary</item> </style>
在布局文件中是这样使用的：
<TextView android:id="@+id/text_item_title" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/ListItemTitleStyle" />
这样一个Style就可以运用在多个地方，既可以统一样式，又可以减少代码量。
而Theme，其实就是一个Style，不同于我们上面提到对单一View的应用，Theme是应用于整个Activity或Application的。各位Android开发同学一定不陌生，在Manifest的Activity声明中就会经常看到。
<activity android:theme="@style/AppLightTheme.NoActionBar"/>
这样，AppLightTheme.NoActionBar中的所有属性都会应用在整个Activity中。
轻听这里，实现夜间模式分三步：
自定义Style
应用Style中的属性
设置Theme
自定义Style
我们这里，就是写两个Style，然后各自有一套对应的颜色值。
简单介绍一下几个主要的颜色值：
colorPrimary: 主题色
colorAccent: 辅助色（或强调色）
textColorPrimary: 主要的文字颜色，一般TextView的文字都是这个颜色
textColorSecondary: 辅助的文字颜色，一般比textColorPrimary的颜色弱一点，用于一些弱化的表示
windowBackground: Window的背景色
我们在资源文件中写对应的两套Style:
<style name="AppLightTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/colorPrimaryTextBlack</item> <item name="android:textColorSecondary">@color/colorSubTextBlack</item> <item name="android:windowBackground">@color/white</item> </style> <style name="AppDarkTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <item name="colorPrimary">@color/darkColorPrimary</item> <item name="colorAccent">@color/darkColorAccent</item> <item name="android:textColorPrimary">@color/white</item> <item name="android:textColorSecondary">@color/colorSubTextWhite</item> <item name="android:windowBackground">@color/dark_bg</item> </style>
细心的同学会发现，Style里的属性，有的前面会以“android:”开头，如android:textColorPrimary，有的则没有，如colorPrimary。
以“android:”开头的属性，是系统的属性。而另一种属于自定义的属性，在资源文件中声明如下：
<attr name="minibar_background" format="color" />
format包括boolean, color, dimension, enum, flag, float, fraction, integer, reference, string。 在此就不赘述了，这是它们的一个相当灵活的使用方式。
应用Style中的属性
比如，colorAccent是在design包中定义的，属于自定义属性，在使用的时候，直接“?attr/”+属性名就可以了。
<ImageView android:tint="?attr/colorAccent" />
系统属性要多加一个”android:”, 是”?android:attr/”+属性名。
<TextView android:textColor="?android:attr/textColorPrimary"/>
这样，当指定了Theme之后，就会去相应的Style下面取对应的颜色值，从而呈现出不同的色彩。
设置Theme
在Manifest中设置是常见的方式。
<activity android:theme="@style/AppLightTheme.NoActionBar"/>
不过为了实现模式的切换，我们是在Activity的onCreate中进行的设置
protected void initTheme() {
if (MusicPreferences.getInstance().isNightMode()) {
setTheme(R.style.AppDarkTheme_NoActionBar);
} else {
setTheme(R.style.AppLightTheme_NoActionBar);
}
}这样，通过给Activity设置不同的Theme，页面就能呈现出不同的颜色搭配。
问题
Style和Theme的方式实现简单，非常适用于模式较为固定的场景，如白天模式和夜间模式。
但是，轻听在白天的模式的时候的基础之上还有几种不同的主题色。
简单聊一下主题色。
主题色，即colorPrimary，是根据品牌形象，为App定义的一个主色调，一般应用于AppBar。
同时，有一个强调色，即colorAccent，是用在Checkbox或下划线等需要给人以提示作用的地方，起辅助的作用。
还有一个颜色是colorPrimaryDark，就是比colorPrimary稍微深一些，主要用在状态栏。
比如上图中，“蓝色”就是主题色，“红”色就是强调色。
主题色和强调色的色值可以不一样，也可以一样。在一般的设计中都是不同的。在轻听的设计中，为了突出品牌色，将强调色跟主题色统一设计成了一个颜色，所以你会看到，到处都是“绿”色。
在强调色跟主题色统一的情况下，6个主题色，6套Style，似乎还可以接受。
但是，万一以后设计同学良心发现了呢？6在6套主题色的基础之上再出6套强调色，那可就是36个Style。如果以后的调色方式再更为灵活，如：
我数学不好，谁帮我算算，别忘了加上强调色还得再平方一下……
如果给每一个主题色都写一套Style，工作量会很大，而且不灵活。这个时候Style就玩不转了。
我们需要一种更为灵活的方案。
动态配置主题色
动态配置主题色是借鉴了github开源控件app-theme-engine。在gradle中引入方式是:
compile('com.github.naman14:app-theme-engine:0.5.1@aar') {
transitive = true
} 由于找不到这个项目维护的地址，所以我们自己进行了扩展和优化。
主要由三个模块组成
颜色配置
颜色处理器
遍历逻辑控制器
颜色配置
颜色配置主要负责存储颜色值。
因为这里存储数据较小，而且简单，所以用SharedPreference来存储，稍加封装就可以。
颜色处理器
颜色处理器Processor主要负责对每一个View的各种颜色进行设置。
首先，定义一个接口
public interface Processor<T extends View, E> {
void process(@NonNull Context context, @Nullable String key, @Nullable T target, @Nullable E extra);
} process方法就是来处理视图颜色的。
其中target就是要传入的视图，这里使用泛型，在各个派生的Processor中具体实现。
以下是几个主要的Processor。
其中DefaultProcessor是默认Processor，可以处理绝大部分的变色情况。其他几种，如他们的名字一样，会额外再处理他们特定的情况。
Processor的处理方式分三步：
给View设置tag
解析View的tag
根据具体的tag进行颜色的设置
以DefaultProcessor为例。有一个TextView，我们要使他的文字颜色为强调色。
首先，给View设置一个tag，”text_accent_color”。如果有多个tag，以逗号分隔。
<TextView android:tag="text_accent_color" />
然后在process方法中将tag解析出来
public void process(@NonNull Context context, @Nullable String key, @Nullable View view, @Nullable Void extra) {
if(view != null && view.getTag() != null && view.getTag() instanceof String) {
String tag = (String)view.getTag();
if(tag.contains(",")) {
String[] splitTags = tag.split(",");
int len = splitTags.length;
for(int i = 0; i < len; ++i) {
String part = splitTags[i];
processTagPart(context, view, part, key);
}
} else {
processTagPart(context, view, tag, key);
}
}
} 这里会根据分隔符（逗号）来对tag的数量进行解析，然后依次根据每个tag依次处理。
在处理方法processTagPart中，会找到”text_accent_color”相对应的处理逻辑
if (view instanceof TextView) {
((TextView) view).setTextColor(Config.accentColor(context, key));
} Config.accentColor(context, key)的作用就是从颜色配置模块中读取当前的强调色。
其他一些稍微复杂一点的情况，则可以使用相对应的Processor去进行特殊的处理。
例如，ViewPagerProcessor。ViewPager在滑动边界的时候会有一个边界反馈的效果，
这里需要特殊处理一下。ViewPager中，负责两个边缘效果的是EdgeEffectCompat。
private EdgeEffectCompat mLeftEdge; private EdgeEffectCompat mRightEdge;
EdgeEffectCompat是一个对系统版本做兼容性处理的类，里面有真正的边缘效果模块EdgeEffect
public final class EdgeEffectCompat {
private Object mEdgeEffect;
} 注意到，这两处都是私有的，所以我们必须通过两次反射来获取EdgeEffect，然后更改颜色。
首先，通过反射获取ViewPager的左右EdgeEffectCompat。
public static void setEdgeGlowColor(@NonNull ViewPager viewPager, @ColorInt int color) {
if(Build.VERSION.SDK_INT >= 21) {
try {
Field edgeLeft = ViewPager.class.getDeclaredField("mLeftEdge");
edgeLeft.setAccessible(true);
Field edgeRight = ViewPager.class.getDeclaredField("mRightEdge");
edgeRight.setAccessible(true);
EdgeEffectCompat ee = (EdgeEffectCompat)edgeLeft.get(viewPager);
if (ee != null) {
setEdgeGlowColor(ee, color);
}
ee = (EdgeEffectCompat)edgeRight.get(viewPager);
if (ee != null) {
setEdgeGlowColor(ee, color);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}然后再获取真正的EdgeEffect，并更改颜色。
private static void setEdgeGlowColor(@NonNull EdgeEffectCompat edgeEffect, @ColorInt int color) throws Exception {
if(Build.VERSION.SDK_INT >= 21) {
Field field = EdgeEffectCompat.class.getDeclaredField("mEdgeEffect");
field.setAccessible(true);
EdgeEffect effect = (EdgeEffect) field.get(edgeEffect);
if (effect != null) {
effect.setColor(color);
}
}
}这样边缘效果的颜色就修改好啦。
遍历逻辑
遍历逻辑控制器主要负责对整个页面的所有View进行遍历，并进行颜色处理。
以下是遍历逻辑：
1.初始化Processor
private static void initProcessors() {
mProcessors = new HashMap();
mProcessors.put("[default]", new DefaultProcessor());
mProcessors.put(ScrollView.class.getName(), new MusicScrollViewProcessor());
mProcessors.put(ListView.class.getName(), new MusicListViewProcessor());
mProcessors.put(RecyclerView.class.getName(), new MusicRecyclerViewProcessor());
mProcessors.put(Toolbar.class.getName(), new MusicToolbarProcessor());
mProcessors.put(NavigationView.class.getName(), new MusicNavigationViewProcessor());
mProcessors.put(TabLayout.class.getName(), new MusicTabLayoutProcessor());
mProcessors.put(ViewPager.class.getName(), new MusicViewPagerProcessor());
}将各Processor实例化后存入HashMap，key为类名。
2.开始刷新的时机是onStart，因为这个时候布局已经基本初始化完毕。我们会判断Activity之前是否start过，避免重复的进行处理。至于在此之后生成的布局，会单独对其进行一次刷新。
3.从流程图中可以看出，在处理ContentView之前，我们会单独处理几个特殊的布局。
StatusBar是顶部状态栏，NavigationBar是底部导航栏，有时我们会希望让这两处也兼容主题色。
如果用到ActionBar，也需要处理一下。不过MD的实现中，一般都是NoActionBar的，而用我们自己布局的ToolBar来代替。
在有侧边栏的页面中，根布局一般都是DrawerLayout，在侧边栏滑出的时候，可以设置DrawerLayout的状态栏颜色。
4.找我们自己的根布局：ContentView
ContentView就是我们用setContentView设置的布局，它上面还有ContentParent，DecorView，Window。
直接根据资源id找？不现实，因为每个Activity的ContentView资源id基本都不一样的。
这里采取一种迂回的方式，先找到ContentView的父布局ContentParent。
我们看setContentView的代码：
@Override
public void setContentView(int resId) {
ensureSubDecor();
ViewGroup contentParent = (ViewGroup) mSubDecor.findViewById(android.R.id.content);
contentParent.removeAllViews();
LayoutInflater.from(mContext).inflate(resId, contentParent);
mOriginalWindowCallback.onContentChanged();
} 可以看到，实际上ContentParent的资源id是固定的：android.R.id.content。
系统会先把ContentParent的子视图清除，然后通过LayoutInflater的inflate方法将我们指定布局的视图解析出来并添加到ContentParent中。
那么我们就可以根据android.R.id.content先找到ContentParent，进而找到ContentView
ViewGroup contentView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
5.获取Processor
根据View的类名获取Processor
Processor processor = mProcessors.get(viewClass.getName());
if(processor != null) {
return processor;
} else {
Class current = viewClass;
do {
current = current.getSuperclass();
if(current == null) {
break;
}
processor = mProcessors.get(current.getName());
} while(processor == null);
if (processor == null) {
mProcessors.get("[default]")
}
return processor;
}从HashMap中获取对应的Processor，如果找不到则根据父类的名字查找。找到之后就可以调用process方法进行处理。
6.遍历
这里会从ContentView开始进行深度优先遍历，处理所有的视图。
有一些特殊的ViewGroup不需要遍历其子布局，例如TabLayout，因为其自己的方法已经满足绝大部分的情况。
结语
以上，就是两种变色方案的具体实现。
自定义Style和Theme实现简单，整洁，适用于模式较为固定的场景。
动态配置主题色实现起来略微复杂，但是比较灵活，适用于主题色较多的场景。
将这两种方案结合，就实现了轻听的变色。
随时随地看视频
