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

<stylename="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主题设置应用色调的功能，降低代码和美工的工作量，提高效率。