Material Design实现应用动态改变色调的方法

作者 Yongquan.Xu

1、概述
本文针对目前FreelyUI 应用的主题色定制，利用Material design的主题颜色和tint着色特性，实现快速定制app主题颜色。

2、Material design的主题颜色控制
如下图所示，Material Design定义了一系列的颜色用以控制应用的各种色调，本文使用主题颜色用于定义应用的各种色调。
ColorPrimary，定义应用的主色调
colorPrimaryDark，定义按钮点击后的颜色（由于状态使用半透着色实现渐变效果，该属性在原先主题中已失效）
colorBackground，定义标题栏渐变色的结束颜色



3、tint特性
tint是Material Design中的新特性，可以理解为着色，把一张图片渲染成另外一种颜色。在Android L中，EditText的下划线背景和光标颜色变化，就是使用这种特性。

4、定义主题theme
<style
name="AppTheme"
parent="android:Theme.Material.Light">

<item name="android:windowActionBar">false</item>

<item name="android:windowNoTitle">true</item>

<item name="android:colorPrimary">#FF0000</item>

<item name="android:colorPrimaryDark">#FF99CC</item>

<item name="android:colorBackground">@android:color/white</item>

<item name="android:colorAccent">?android:attr/colorPrimary</item>

<item name="android:alertDialogTheme">@style/AppDialog</item>

</style>

<style name="AppTheme.Yellow">

<item name="android:colorPrimary">#FFFF00</item>

<item name="android:colorPrimaryDark">#0000FF</item>

<item name="android:alertDialogTheme">@style/AppDialog.Yellow</item>

</style>

<style name="AppTheme.Blue">

<item name="android:colorPrimary">#0000FF</item>

<item name="android:alertDialogTheme">@style/AppDialog.Blue</item>

</style>
如以上代码中的高亮部分，在theme中定义需要用到的颜色表

5、Tint设置
5.1静态图片
对于ImageView，可以设置 tint和BackgroundTint分别控制前景和背景的着色

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/music_button_round_song"
android:src="@drawable/music_loading_icon"
android:scaleType="centerInside"
android:layout_marginTop="100dip"
android:layout_centerHorizontal="true"
android:tint="?android:attr/colorPrimary"/>

5.2selector
在selector中嵌入着色功能设置Drawable的属性，主要用到的属性有tint和alpha，支持的类型可以是bitmap和nine-patch

<ImageView
android:layout_marginStart="50dip"
android:id="@+id/btn_selector_indicate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/btn_selector"
android:layout_toEndOf="@id/btn_selector"
android:src="@drawable/bg_selector"/>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<bitmap android:alpha="?android:attr/disabledAlpha"
android:src="@drawable/music_icon_suspended"
android:tint="?android:attr/colorControlActivated"/>
</item>

<item android:state_pressed="true">
<bitmap android:src="@drawable/music_icon_suspended"
android:tint="?android:attr/colorPrimaryDark"/>
</item>

<item>
<bitmap android:src="@drawable/music_icon_suspended"
android:tint="?android:attr/colorPrimary"/>
</item>
</selector>

5.3 layer-list + ripple
在着色的同时实现水波功能

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="@drawable/playing_next"
android:tint="?android:attr/colorPrimary"/>
</item>
<item>
<ripple android:color="#80D0D0D0">
</ripple>
</item>
</layer-list>

运行结果



7、总结
通过本文的方法，实现了使用Material Design主题设置应用色调的功能，降低代码和美工的工作量，提高效率。