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

作者 Yongquan.Xu


1、概述

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


2、Material design的主题颜色控制

如下图所示,Material Design定义了一系列的颜色用以控制应用的各种色调,本文使用主题颜色用于定义应用的各种色调。

ColorPrimary,定义应用的主色调

colorPrimaryDark,定义按钮点击后的颜色(由于状态使用半透着色实现渐变效果,该属性在原先主题中已失效)

colorBackground,定义标题栏渐变色的结束颜色

Material Design实现应用动态改变色调的方法_第1张图片


3、tint特性

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

 

4、定义主题theme





如以上代码中的高亮部分,在theme中定义需要用到的颜色表

 

5、Tint设置

5.1静态图片

对于ImageView,可以设置 tint和BackgroundTint分别控制前景和背景的着色

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

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"/>

 

 

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

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

  
    android:src="@drawable/music_icon_suspended"
            android:tint="?android:attr/colorPrimary"/>
  

 

5.3 layer-list + ripple

在着色的同时实现水波功能

xmlns:android="http://schemas.android.com/apk/res/android">
  
    android:src="@drawable/playing_next"
      android:tint="?android:attr/colorPrimary"/>
  
  
    android:color="#80D0D0D0">
    
  

 

运行结果

Material Design实现应用动态改变色调的方法_第2张图片

7、总结

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



你可能感兴趣的:(Material Design实现应用动态改变色调的方法)