Skip to content

Latest commit

 

History

History
132 lines (94 loc) · 7.29 KB

Android主题动态切换开源库Prism基本原理3-搭配Palette使用.md

File metadata and controls

132 lines (94 loc) · 7.29 KB

#Android主题动态切换开源库Prism基本原理3-搭配Palette使用


译者注:在阅读本章之前你应该确定你已经了解Android Palette

关于Palette,这里有一篇参考文章写得不错:Extracting Colors to a Palette with Android Lollipop (我后续会翻译这篇文章)


重要提示:Prism源码目前停止更新了(你可以在Prism-Github 描述文件中看到)。不过我还是决定写出这一系列的文章来介绍Prism现在的版本,因为它很可能还有用。

在前面一章中我们介绍了怎么使用Prism和ViewPager结合起来。在Prism 1.0.0版本中同样也有和Palette相结合的库,我们现在就来看看怎么去使用它。

首先我们向build.gradle中添加相关的依赖:

	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.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)
        /* 添加其他组件到Prism */
        .build();

当加入PaletteTrigger后我们就可以通过调用PaletteTrigger.setBitmap(Bitmap bitmap)来提取目标Bitmap的特征颜色。这个函数会新建一个Palette实例来处理支持的图片格式,并在处理结束后触发Prism颜色变换。

由于Palette的特殊机制我们需要用一点手段将UI组件和Prism结合起来,从而它们能够被正常染色。首先让我们回顾一下Palette是怎么工作的:

Palette从图片中抽取出6种不同的颜色样本Swatch:vibrant(鲜艳色)、dark vibrant(鲜艳色中的暗色)、light vibrant(鲜艳色中的亮色)、muted(柔和色)、dark muted(柔和色中的暗色)、light muted(柔和色中的亮色)。 你可以通过颜色样本Swatch获取三个颜色值:

  • 抽取出的初始颜色(Swatch.getRgb()Swatch.getHsl())
  • 与抽取出颜色搭配的标题字体色(Swatch.getTitleTextColor())
  • 与抽取出颜色搭配的正文字体色(Swatch.getBodyTextColor())

所以我们一共能从Palette中获取到18个颜色值。

PaletteTrigger提供了一系列工厂方法来获取Swatch,并返回一个Filter。这个Filter会告诉Setter要给View设置的颜色是初始颜色、标题字体色、正文字体色中的哪一个。所以我们使用Filter来帮助Prism链接UI组件是非常必要的。

要获取与图片中dark vibrant色相搭配的正文色,只需要下面这一行代码就可以实现:

	Filter darkVibrantTitle = paletteTrigger.getDarkVibrantFilter(paletteTrigger.getTextFilter()); 

如果不为View设置Filter的话,那么会默认使用初始颜色(不过我还是建议你根据使用目的进行设置)。目前的版本中如果对应的颜色种类在Palette中没有抽取到的话会使用透明色(即绑定的UI组件会在屏幕上暂时消失),这点还不是很令人满意,我会在后续的开发中进行改进。

那么我们已经清楚了PaletteTrigger是怎么使用的了,为了有个更具体的理解,下面这段onCreate()中的代码片段中展示了整个使用过程:

	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();

这段代码将六个View组件分别赋予了Palette解析后的六种初始颜色,并分别为两个TextView的文本赋予了 鲜艳色搭配的标题文本色亮柔和色搭配的正文文本色

你可能注意到了我们将Acitivty实现成了Setter(通过add(this)这一行看出)。这是为了实现在Palette处理好图片后的回调函数(即setColour(int colour))中设置ImageView的图片,由于Palette在解析大图片的时候需要花费一些时间,这么做可以让解析颜色与显示图片的结果同时显示到屏幕上,用起来更加舒服。

我们来看看运行起来是什么效果吧:

Demo

你也可以看到,我们实际上没有将其他UI组件(Toolbar等)加入到这个Demo中,只是为获取颜色样本做了示例。如果你已经阅读并理解了前面几篇文章的话,你能够很容易地掌握如何将PaletteTrigger结合到主题颜色变换的应用中。

那么基础的部分就介绍完毕了,现在我们会把Prism的开发告一段落。当Prism恢复开发之后,我会再写更多的东西来介绍它的更多应用。

这里面所有的例子都会在源码Github中的示例代码 中看到。