Android 水波纹点击效果(Ripple Effect)

本文介绍的是Android5.0中其中一个炫酷的效果,点击水波纹扩散效果(Ripple Effect).

以下介绍的实现方式都是调用Android5.0的新API,并非自定义实现,所以只支持在Android5.0及以上的设备.

而大家想兼容低系统版本的话,就需要新建v21(即Android5.0)的Resource Directory.

效果如下图所示：

圆角背景的水波纹效果(如上图)

1. 定义一个普通圆角背景的xml;

rounded_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <corners android:radius="4dp" />
</shape>

2. 这里是重点,<ripple>是API 21才有的新Tag,正是实现水波纹效果的;

    其中<ripple android:color="#FF21272B" .... />这个是指定水波纹的颜色.

    而<item />里面的东西,我们都很熟悉,就是普通的定义一个带圆角的背景.

ripple_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF21272B">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/rounded_corners" />
</ripple>

3. 这是Activity的布局xml;

<Button android:background="@drawable/ripple_bg"... />直接使用ripple_bg作为背景.

activity_main.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:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_bg"
        android:text="@string/hello_world" />
</LinearLayout>

原文URL: http://www.cnblogs.com/wingyip/p/4548093.html

===================================================================================================================

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 callingsetHotspot(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 from XML by specifying its android:id value as mask. At run time, a single layer may be set as the mask using setId(..., android.R.id.mask) or an existing mask layer may be replaced using setDrawableByLayerId(android.R.id.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" />