AndroidMaterialDesign动画之RippleDrawable

1，Material Design简介
2，MaterialDesign主题Theme
3，android:elevation的使用
4，AndroidMaterialDesign动画之RippleDrawable
5，AndroidMaterialDesign动画之CircularReveal
6，AndroidMaterialDesign动画之Activity Transitions
7，AndroidMaterialDesign动画之Curved Motion
8，AndroidMaterialDesign动画之Animate View State Changes

官网地址：http://developer.android.com/training/material/animations.html
Material Design 中提供的动画有5种：
Touch feedback（触摸反馈）
Circular Reveal(揭露效果)
Activity transitions(转场动画)
Curved motion(曲线运动)
View state changes(视图状态改变)

今天就介绍
Touch feedback（触摸反馈）。简单点来说如果你使用了
Material Design Theme，自带的button就已经有了这种效果Ripple effect。其他控件默认没有，貌似设置了也没用。很衰很衰！！！

Ripple effect 的展现效果： 1，波纹颜色。2 波纹矩形颜色(混合色)。3，view 背景颜色。
问题来了，如何设置这种效果。
google给出了2种方式：
1，
?android:attr/selectableItemBackground 有边界
?android:attr/selectableItemBackgroundBorderless 无边界。
2，通过RippleDrawable

关于如何修改主题中点击时候的波纹颜色。最后讲解。

2种效果：有边界和无边界说明。看效果图吧。
有边界：波纹不会超过button的宽高。


无边界：默认圆形波纹效果。

浅谈遇到的问题：使用第一种方式，如果父布局或者依次向上找父布局都没有设置背景，就没有对应的效果。昨天出现，今天就复现不了了。如果没有更好，碰到这种情况，就加个背景吧。

默认点击button的时候，这种效果是白色波纹+矩形色或者灰色波纹+矩形色。根据主题而定。

android:Theme.Material.Light 主题：

android:Theme.Material 主题：

xml布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_marginTop="15dip"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:padding="10dip" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1" >            <Button                android:id="@+id/btn_ripple"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/ripple_test"                android:clickable="true"                android:text="rippledrawable" />        </LinearLayout>        <Button            android:id="@+id/btn_ripple2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="?android:attr/selectableItemBackground"            android:clickable="true"            android:text="selectable\nItemBackground" />        <Button            android:id="@+id/btn_ripple3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="?android:attr/selectableItemBackgroundBorderless"            android:clickable="true"            android:text="selectable\nItemBackground\nBorderless" />    </LinearLayout>    <!-- 没有效果 -->    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/ripple_test"        android:gravity="center"        android:text="TextView" />    <!-- 没有效果 -->    <ImageView        android:id="@+id/imageView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="?android:attr/selectableItemBackground"        android:src="@drawable/ic_launcher" /></LinearLayout>

drawable文件：通过该方法可以修改波纹颜色。另外一种是覆盖theme中的属性。

<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="@android:color/white" ><!--**id mask类似一个标记，如果没有mask，android:drawable就作为了button的背景。如果有背景就被忽略了。自己更换颜色和隐藏mask尝试下**。 -->    <!--holo_green_dark  android:drawable="@android:color/holo_orange_dark"  android:id="@android:id/mask"-->    <item        android:drawable="@drawable/con_time_tc"/></ripple>

该item还可以是个shape 或者是一个inset。 这个是源码里面的。

<inset xmlns:android="http://schemas.android.com/apk/res/android"       android:insetLeft="@dimen/button_inset_horizontal_material"       android:insetTop="@dimen/button_inset_vertical_material"       android:insetRight="@dimen/button_inset_horizontal_material"       android:insetBottom="@dimen/button_inset_vertical_material">    <shape android:shape="rectangle"           android:tint="?attr/colorButtonNormal">        <corners android:radius="@dimen/control_corner_material" />        <solid android:color="@color/white" />        <padding android:left="@dimen/button_padding_horizontal_material"                 android:top="@dimen/button_padding_vertical_material"                 android:right="@dimen/button_padding_horizontal_material"                 android:bottom="@dimen/button_padding_vertical_material" />    </shape></inset>

id mask类似一个标记，
如果有该属性button背景就被忽略了。
如果没有该属性，android:drawable就作为了button的背景，在你点击button 的时候，会有一个混合色的矩形。

android:color 波纹颜色
android:id=”@android:id/mask” 一个标记属性
android:drawable=”@drawable/con_time_tc” 矩形颜色

如果你想整体修改波纹颜色，就自定义一个style然后覆盖android:colorControlHighlight 属性。

<style name="ripple" parent="**android:Theme.Material**"> <!-- 修改波纹颜色 --><itemname="android:colorControlHighlight">@color/holo_orange_dark</item><!-- 如果你使用?android:attr/selectableItemBackground 这样的设置，直接会调用 @drawable/ripple_test--><item name="selectableItemBackground">@drawable/ripple_test</item><!-- 修改状态栏颜色 --><item name="android:colorPrimary">@color/holo_orange_dark</item> </style>

RippleDrawable 的说明： 英语好的就翻译翻译吧。

Drawable that shows a ripple effect in response to state changes. The anchoring position of the ripple for a given state may be specified by calling setHotspot(float, float) with the corresponding state attribute identifier.A touch feedback drawable may contain multiple child layers, including a special mask layer that is not drawn to the screen. A single layer may be set as the mask by specifying its android:id value as mask. <!-- A red ripple masked against an opaque rectangle. --/> <ripple android:color="#ffff0000">   <item android:id="@android:id/mask"         android:drawable="@android:color/white" /> </ripple>If a mask layer is set, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers.If no mask layer is set, the ripple effect is masked against the composite of the child layers. <!-- A green ripple drawn atop a black rectangle. --/> <ripple android:color="#ff00ff00">   <item android:drawable="@android:color/black" /> </ripple> <!-- A blue ripple drawn atop a drawable resource. --/> <ripple android:color="#ff0000ff">   <item android:drawable="@drawable/my_drawable" /> </ripple>If no child layers or mask is specified and the ripple is set as a View background, the ripple will be drawn atop the first available parent background within the View's hierarchy. In this case, the drawing region may extend outside of the Drawable bounds. <!-- An unbounded red ripple. --/> <ripple android:color="#ffff0000" />