作者 Yongquan.Xu

1、概述

本文針對目前FreelyUI 應用的主題色定制，利用Material design的主題顏色和tint著色特性，實現(xiàn)快速定制app主題顏色。

2、Material design的主題顏色控制

如下圖所示，Material Design定義了一系列的顏色用以控制應用的各種色調(diào)，本文使用主題顏色用于定義應用的各種色調(diào)。

ColorPRimary，定義應用的主色調(diào)

colorPrimaryDark，定義按鈕點擊后的顏色（由于狀態(tài)使用半透著色實現(xiàn)漸變效果，該屬性在原先主題中已失效）

colorBackground，定義標題欄漸變色的結(jié)束顏色

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靜態(tài)圖片

對于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
在著色的同時實現(xiàn)水波功能
<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>
 
運行結(jié)果
7、總結(jié)
通過本文的方法，實現(xiàn)了使用Material Design主題設置應用色調(diào)的功能，降低代碼和美工的工作量，提高效率。