作者 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

如以上程式碼中的高亮部分，在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主題設定應用色調的功能，降低程式碼和美工的工作量，提高效率。