Prism（棱镜） 是一个全新的 Android 动态主题切换框架，虽然是头一次发布，但它所具备的基础功能已经足够强大了！本文介绍了 Prism 的各种用法，希望对你会有所帮助，你也可以对它进行扩展，来满足开发需求。
先说一下 Prism 的诞生背景。其实我没打算一上来就写个框架出来，当时在给 Styling Android 博客写一些使用 ViewPager 来实现 UI 动态着色的系列文章，文中用到的代码被我重构成适合讲解用的组件，然后我发现这些代码可以整理成一个简洁的 API，于是乎便有了做 Prism 框架的想法。我把 Prism 拿给我比较认可的几个人看，他们都觉得不错，这样我就一点点把它做成了库。经过反复使用，我觉得这个 API 在保持架构简洁的同时已经具备了很多的功能，就决定把它发布出来了跟大家分享。
Prism 分为三个独立库：
- prism 是 Prism 的核心库
- prism-viewpager 实现了 ViewPager 与核心库的对接
- prism-palette 实现了 Palette 调色板与核心库的对接
将它们拆分开的原因是核心库 prism 没有外部依赖，身量轻巧，很容易添加到项目中去，而 prism-viewpager 和 prism-palette 要依赖于外部相关的支持库。如果项目不需要这两个扩展库，就没有其他依赖了；假如应用程序用到了 ViewPager，那该项目就包含了 ViewPager 所依赖的支持库，这时再引入 prism-viewpager 库，其所带来的系统开销大可忽略不计。
Prism 已发布到 jCenter 和 Maven Central 上，如果你的项目已使用了其中一个做为依赖仓库，那只要在 build.gradle 的 dependencies 选项下添加 Prism 库就好。以下是添加了 prism 和 prism-viewpager 两个库的代码（最后两行）：
apply plugin: 'com.android.application'
android {
compileSdkVersion 22
buildToolsVersion "23.0.0 rc3"
defaultConfig {
applicationId "com.stylingandroid.prism.sample.palette"
minSdkVersion 7
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:support-v4:22.2.0'
compile 'com.stylingandroid.prism:prism:1.0.1'
compile 'com.stylingandroid.prism:prism-viewpager:1.0.1'
}
目前已发布的版本是 1.0.1，最新版本的链接是https://bintray.com/stylingandroid/maven/prism/_latestVersion。
添加好必要的依赖就可以使用 Prism 了。
Prism 基本上由三种对象类型构成：Setter、Filter 和 Trigger。
Setter 用来设置 UI 对象的颜色，一般是 View 但也可以是其他元素，后面会讲到。它的基本用法是将setColour(int colour)（或 setColor(int color)）映射到 View 封装的某个方法上。例如，内置的 ViewBackgroundSetter 会映射到 setBackgroundCOLOR(int color) 上。有时 Setter 在不同版本的 Android 上会产生不同的效果，例如 StatusBarSetter 在 Android Lollipop (5.0) 之前的系统上不起作用，因为 Lollipop 之前的版本不支持改变 StatusBar 的颜色。不过 Prism 会随机应变，不会引起程序崩溃，请放心使用，一切交由 Setter 搞定。
Prism 内置有如下几个基本的 Setter：
-
FabSetter(FloatingActionButton fab)
为 Android Design Support Library 中的 FloatingActionButton（简写 FAB）设置背景色。 -
StatusBarSetter(Window window)
设置指定窗体的状态栏颜色，注意它的操作对象并不是 View。 -
TextSetter(TextView textView)
设置 TextView 中的文本颜色。 -
ViewBackgroundSetter(View view)
设置 View 的背景颜色。
当然，你也可以创建新的 Setter 给自定义 View 中的不同组件设置颜色，或者给同一个 View 创建多个 Setter 来设置不同的属性，同时对不同组件进行着色。只要把自定义的 Setter 添加到 Prism 中即可生效。
Filter 可以对颜色进行转化处理。一般向 Prism 传入的是一个颜色值，有时我们可能需要把该颜色的不同色度应用到不同的 UI 组件上，这时要用 Filter 将颜色进行一下转换再输出。内置的基本 Filter 有：
-
IdentifyFilter()
返回与输入相同的颜色。 -
ShadeFilter(float amount)
将输入颜色与黑色混合进行加深处理。amount 为 0 到 1 之间的浮点数，代表黑色的混合比率。当 amount 为 0 时，输出颜色就是输入颜色；为 1 时，则输出纯黑色。 -
TintFilter(float amount)
将输入颜色与白色混合进行加亮处理。amount 为 0 到 1 之间的浮点数，代表白色的混合比率。当 amount 为 0 时，输出颜色就是输入颜色；为 1 时，则输出纯白色。
Trigger 是颜色变化时所触发的事件。通常它会调用 Prism 实例上的 setColour(int colour)，将颜色变化的消息传递给在该实例上注册过的所有 Setter 方法。
因为 Trigger 需要额外的依赖库，所以 Prism 核心库没有将它包含进去，但在 ViewPager 和 Palette 的扩展库中都有提供。
接下来我们要将 Prism 这三个组件整合起来，其实每个 Prism 实例的作用就是如此。每个实例可以有多个 Trigger 或者一个都没有，同样也可以有一个或多个 Setter。每个 Setter 可以绑定一个 Filter，Filter 把 Trigger 发过来的颜色转换后再交还给 Setter。
Prism 还提供了一些智能的工厂方法，它们会为传入的数据自动创建 Setter 方法，比如向Prism.Builder.background() 传入 FloatingActionButton，Prism 会自动创建出 FabColourSetter。
每个 Prism 实例会使用 builder 模式来构建和整合组件，然后与 Trigger 绑定，对触发事件做出响应。下面来看一下如何创建一个 Prism 实例：
// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textView = (TextView) findViewById(R.id.text_view);
AppBarLayout appBar = (AppBarLayout) findViewById(R.id.app_bar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
setSupportActionBar(toolbar);
// --- 创建 Prism 实例 ---------------------
Filter tint = new TintFilter(TINT_FACTOR_50_PERCENT);
prism = Prism.Builder.newInstance()
.background(appBar)
.background(getWindow())
.text(textView)
.background(fab, tint)
.build();
// ----------------------------------------
fab.setOnClickListener(this);
setColour(currentColour);
}
@Override
protected void onDestroy() {
if (prism != null) {
prism.destroy();
}
super.onDestroy();
}
上面的代码大部分都是基本的 Android 开发操作，不需要特别的解释。重点看一下创建 Prism 实例的部分——先创建一个将输入颜色加亮 50% 的 Filter（TintFilter），然后创建 Prism.Builder 实例，并添加 AppBar 实例（这会为 AppBar 创建一个 Setter 来设置背景色）、Window（为 StatusBarColour 创建 Setter 来设置状态栏颜色）、TextView（使用 text(TextView) 来设置文字颜色），以及 FloatingActionButton（设置 FAB 背景色并应用第一步中的 TintFilter）。最后用 build() 来完成 Prism 实例的构建。
现在所有组件都被串联了起来，此时只要调用该实例上的 setColour(int colour) 就可以同时改变这些组件的颜色：
prism.setColour(0xFF0000);
代码最后明确使用了 onDestroy() 来清除 Prism 实例。其实严格来说这一步并不是必须要有，因为等到 Activity 被清除后，系统不会保留对 Prism 实例的引用，垃圾回收器会将 Prism 实例处理掉。不过如果后面真不会再用的话，及时做下手工清理也无妨。
Prism 的基本用法就是这样，只要在 onCreate() 中增加六行代码，就能同时改变各组件的颜色（下面使用了 FloatingActionButton 来触发颜色切换）。
把 Setter 和 Filter 配合起来使用省去了大量的样板代码，让事情简单好多，实际上它们完成的工作并不复杂，但如果搭配 Trigger 使用，情况就不一样了。
首先将 prism-viewpager 做为依赖添加到项目中来，对应的 build.gradle 内容如下：
...
dependencies {
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.stylingandroid.prism:prism:1.0.1'
compile 'com.stylingandroid.prism:prism-viewpager:1.0.1'
}
Trigger 是 Prism 实例最前方的关卡，它来触发主题颜色的改变。我们先来看一下 ViewPagerTrigger 如何根据用户操作来触发 ViewPager 改变颜色。ViewPager 的 Adaptor 要为每个页面位置提供颜色信息，这需要通过 ColourProvider 接口来完成（或 ColorProvider，如果不介意使用这种拼写方式所带来的少许性能损失的话 1）：
// ColourProvider.java
public interface ColourProvider {
@ColorInt int getColour(int position);
int getCount();
}
// ColorProvider.java
public interface ColorProvider {
@ColorInt int getColor(int position);
int getCount();
}
如果你用过 PagerTitleStrip 或 Design Library 中的 TabLayout，那对给每个页面位置提供一个标题的做法就不陌生了。ColourProvider 接口就是这个作用，只不过它把标题的字符串换成了 RGB 颜色值。Adapter 已内置了 getCount() 方法，所以在继承 Adapter 时不用重新定义这个方法，可以按下面的示例来实现自己的 Adaptor：
// RainbowPagerAdapter.java
public class RainbowPagerAdapter extends FragmentPagerAdapter implements ColourProvider {
private static final Rainbow[] COLOURS = {
Rainbow.Red, Rainbow.Orange, Rainbow.Yellow, Rainbow.Green,
Rainbow.Blue, Rainbow.Indigo, Rainbow.Violet
};
private final Context context;
public RainbowPagerAdapter(Context context, FragmentManager fragmentManager) {
super(fragmentManager);
this.context = context;
}
@Override
public Fragment getItem(int position) {
Rainbow colour = COLOURS[position];
return ColourFragment.newInstance(context, getPageTitle(position), colour.getColour());
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
FragmentManager manager = ((Fragment) object).getFragmentManager();
FragmentTransaction trans = manager.beginTransaction();
trans.remove((Fragment) object);
trans.commit();
super.destroyItem(container, position, object);
}
@Override
public int getCount() {
return COLOURS.length;
}
@Override
public CharSequence getPageTitle(int position) {
return COLOURS[position].name();
}
@Override
public int getColour(int position) {
return COLOURS[position].getColour();
}
private enum Rainbow {
Red(Color.rgb(0xFF, 0x00, 0x00)),
Orange(Color.rgb(0xFF, 0x7F, 0x00)),
Yellow(Color.rgb(0xCF, 0xCF, 0x00)),
Green(Color.rgb(0x00, 0xAF, 0x00)),
Blue(Color.rgb(0x00, 0x00, 0xFF)),
Indigo(Color.rgb(0x4B, 0x00, 0x82)),
Violet(Color.rgb(0x7F, 0x00, 0xFF));
private final int colour;
Rainbow(int colour) {
this.colour = colour;
}
public int getColour() {
return colour;
}
}
}
我们得到了一个实现了 ColourProvider 接口的 Adaptor，现在可以把它跟 ViewPagerTrigger 一起使用了：
// MainActivity.java
public class MainActivity extends AppCompatActivity {
private static final float TINT_FACTOR_50_PERCENT = 0.5f;
private DrawerLayout drawerLayout;
private View navHeader;
private AppBarLayout appBar;
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private FloatingActionButton fab;
private Prism prism = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navHeader = findViewById(R.id.nav_header);
appBar = (AppBarLayout) findViewById(R.id.app_bar);
toolbar = (Toolbar) findViewById(R.id.toolbar);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
fab = (FloatingActionButton) findViewById(R.id.fab);
setupToolbar();
setupViewPager();
}
@Override
protected void onDestroy() {
if (prism != null) {
prism.destroy();
}
super.onDestroy();
}
private void setupToolbar() {
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setTitle(R.string.app_title);
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
return true;
default:
return super.onOptionsItemSelected(item);
}
}
private void setupViewPager() {
RainbowPagerAdapter adapter = new RainbowPagerAdapter(this, getSupportFragmentManager());
viewPager.setAdapter(adapter);
Filter tint = new TintFilter(TINT_FACTOR_50_PERCENT);
Trigger trigger = ViewPagerTrigger.newInstance(viewPager, adapter);
prism = Prism.Builder.newInstance()
.add(trigger)
.background(appBar)
.background(getWindow())
.background(navHeader)
.background(fab, tint)
.colour(viewPager, tint)
.build();
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(0);
}
}
在 setupViewPager() 中，我们先创建了一个 RainbowPagerAdapter 实例，并把它应用到 ViewPager 上，然后又创建了一个加亮 FAB 背景色的 TintFilter, 以及与 ViewPager 和 Adaptor 相关联的 Trigger。
接着以同样的方式再创建一个 Prism 实例，这次我们为 Prism 绑定了更多的组件，并添加了刚才做好的 Trigger。你可能注意到 ViewPager 实例被设置了颜色，这会改变 ViewPager 滑动到边界时产生的发光效果的颜色（因为不同版本的系统会用不同的方式来处理发光效果，但 Prism 内部会处理好这些差异）。
然后把 TabLayout 和 ViewPager 进行绑定（TabLayout 要求这样做，但 Prism 并不需要这样），最后把 ViewPager 的初始页面设为第一页。好了大功告成，现在主题色会随着标签页的切换而改变，请看 Demo：
细心的人可能会发现其间的颜色过渡看起来并不生硬，颜色是随着用户的拖拽而逐渐产生变化：
还有一些更微妙的细节。如果用户选择了间隔很远的标签页面，正常情况会过渡显示从开始到结束标签之间的每种颜色，从视觉上说会略显唐突和不自然，而 ViewPagerTrigger 只选择开始和结束标签的两种颜色来做平滑过渡（也就是黄色 YELLOW 和紫色 VIOLET，跳过 GREEN、BLUE 和 INDIGO）：
这是 ViewPager 滑动到边界时的动画效果：
最后我们来说一下 prism-palette 的用法。先将它做为依赖添加到项目中来，对应的 build.gradle 内容如下：
...
dependencies {
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.stylingandroid.prism:prism:1.0.0'
compile 'com.stylingandroid.prism:prism-palette:1.0.0'
}
PaletteTrigger 使用起来非常简单，只要创建一个 PaletteTrigger 实例，再把它添加到 Prism.Builder 上：
paletteTrigger = new PaletteTrigger();
prism = Prism.Builder.newInstance()
.add(paletteTrigger)
.
.
.
.build();
接下来，我们可以通过调用 PaletteTrigger 的 setBitmap(Bitmap bitmap) 方法来触发颜色变化。这会创建一个新的 Palette 实例，等到 Palette 从图像中提取完色样后就去触发 Prism。
要想正确地为相关联的 UI 组件着色，我们需要了解 Palette 的工作原理。
Palette 可以从一张图片中提取出最多 6 种不同的色样：
- 鲜艳
- 鲜艳浓
- 鲜艳淡
- 柔色
- 柔色浓
- 柔色淡
每种色样又可以分离出 3 种色值：
- 原色
- 适用于以原色为背景色的标题文本的色值
- 适用于以原色为背景色的正文的色值
这样从 Palette 中我们可以获取最多 18 种不同的颜色。
PrismTrigger 提供了许多工厂方法，以 Filter 的形式返回不同的色样，通过使用 modifier 让 Filter 决定要不要使用原色、标题颜色和正文颜色。实际上这是利用 Filter 机制为每一个与 Prism 关联起来的 UI 组件找到合适的颜色。
例如要给标题使用「鲜艳浓」的颜色，只要将有效的工厂方法链式连接起来组成所需的 Filter：
Filter darkVibrantTitle = paletteTrigger.getDarkVibrantFilter(paletteTrigger.getTextFilter());
如果不设置 Filter 那么 Palette 会默认使用「鲜艳」的原色色值，但建议按需要设置好 Filter。目前，如果 Palette 没找到指定色样，就会应用透明效果，即把被着色的 UI 组件完全隐藏起来。这种处理方法并不理想，我们会在以后版本中做出改进。
至此 PaletteTrigger 跟 Prism 完全绑定好了：
View vibrant = findViewById(R.id.swatch_vibrant);
View vibrantLight = findViewById(R.id.swatch_vibrant_light);
View vibrantDark = findViewById(R.id.swatch_vibrant_dark);
View muted = findViewById(R.id.swatch_muted);
View mutedLight = findViewById(R.id.swatch_muted_light);
View mutedDark = findViewById(R.id.swatch_muted_dark);
titleText = (TextView) findViewById(R.id.title);
bodyText = (TextView) findViewById(R.id.body);
paletteTrigger = new PaletteTrigger();
prism = Prism.Builder.newInstance()
.add(paletteTrigger)
.background(vibrant, paletteTrigger.getVibrantFilter(paletteTrigger.getColour()))
.background(vibrantLight, paletteTrigger.getLightVibrantFilter(paletteTrigger.getColour()))
.background(vibrantDark, paletteTrigger.getDarkMutedFilter(paletteTrigger.getColour()))
.background(muted, paletteTrigger.getMutedFilter(paletteTrigger.getColour()))
.background(mutedLight, paletteTrigger.getLightMutedFilter(paletteTrigger.getColour()))
.background(mutedDark, paletteTrigger.getDarkMutedFilter(paletteTrigger.getColour()))
.background(titleText, paletteTrigger.getVibrantFilter(paletteTrigger.getColour()))
.text(titleText, paletteTrigger.getVibrantFilter(paletteTrigger.getTitleTextColour()))
.background(bodyText, paletteTrigger.getLightMutedFilter(paletteTrigger.getColour()))
.text(bodyText, paletteTrigger.getLightMutedFilter(paletteTrigger.getBodyTextColour()))
.add(this)
.build();
6 个 View 对象各自采用了上述 6 种色样的一种，2 个 TextView 中标题使用了「鲜艳」，正文了使用「柔色浅」。
你可能还注意到我们把 Activity 注册成一个 Setter，这是为了在 Palette 完成色样提取后收到回调，因为处理较大图像时速度可能会慢。这样只有等色样提取完成后 ImageView 中的图像才会被更新，用户体验会稍稍好一点，图像更新和 UI 颜色刷新同步进行。请看 Demo：
在上面的示例中我们实际并没绑定 UI，只是演示一下怎样提取各种色样以及如何应用。但根据前面讲过的内容，相信加入绑定也不是难事。
这些就是 Prism 的基本用法。如果 Prism 开发还会继续，我们会带来更多的内容。文中的所有例子可以从 Github- Prism 源码 中的 sample 中找到。