Android中水波纹使用

我们知道Android5.0比之以前的版本有了很大的改观。引入了Material Design。引入了一种新的设计理念，关于Material Design不做过多的解释，如果不理解，可以看看官方文档。好像有墙，你也可以看看中文的文档。

在引入了Material Design后，也带来了一些动画，而对于View的点击效果-水波纹。是不是特别的酷炫，平时也使用过，但一直没去总结，今天就来总结一下。好，我们进入主题吧。

对水波纹的使用可以通过两种方式来实现，第一种就是xml文件的应用，设置背景为具体的某个xml文件，当然通过主题背景的设置也可以，我将它归为第一种方式里；而第二种就是通过自定义view控件来实现，通过第三方的类库，来实现这种效果。

一、XML方式实现

注意：通过这个设置需要给设置的视图添加可点击事件，才可以出现效果。因为通过xml实现水波纹是在API-21以上才支持，所以xml文件需要建立在drawable-v21文件夹下，其他的同理，比如layout则是layout-v21。

1、通过系统自带的主题，设置xml背景来实现

// 波纹有边界
android:background="?android:attr/selectableItemBackground"  
// 波纹超出边界  
android:background="?android:attr/selectableItemBackgroundBorderless"

在xml布局的视图中通过背景设置来实现。看看效果：

demo

2、通过自定义xml文件来设置

在drawable文件夹下新建文件，然后在background中引用。

<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="@color/colorAccent" xmlns:android="http://schemas.android.com/apk/res/android"> 
</ripple>

这个是无界的水波纹。而有界的自定义水波纹，要在节点ripple下建立子节点，然后给节点设置id为@android:id/mask。

<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="@color/colorPrimary" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent"  android:id="@android:id/mask">
    </item>
</ripple>

看看效果：

以上便是简单的水波纹应用方法。

但有时候我们想给添加水波纹的控件添加背景图片或者自定义水波纹范围的大小、图形样式，我们该怎么做呢？接着看第三点。

3、通过shape、selector、layer-list标签自定义xml文件来设置

①、shape的用法。

shape的子标签（corners、gradient、padding、size、solid、stroke），我们可以通过设置它的子标签来设置图形。

corners

<corners    //定义圆角
   android:radius="dimension"      //全部的圆角半径
   android:topLeftRadius="dimension"   //左上角的圆角半径
   android:topRightRadius="dimension"  //右上角的圆角半径
   android:bottomLeftRadius="dimension"    //左下角的圆角半径
   android:bottomRightRadius="dimension" />    //右下角的圆角半径

gradient
//gradient用以定义渐变色，可以定义两色渐变和三色渐变，及渐变样式

 <gradient
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下 （仅对线性渐变有效）
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1
    android:startColor="color"   //渐变开始点的颜色
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间
    android:endColor="color"    //渐变结束点的颜色
    android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

android:angle
angle值对应的位置如图：
angle

android:centerX与android:centerY
centerX、centerY两个属性用于设置渐变的中心点位置，仅当渐变类型为放射渐变时有效，类型为分数或小数，不接受Dimension。默认值是0.5，有效值是0.0~1.0，超出该范围后会看不出渐变效果。centerX、centerY的取值其实是宽和高的百分比；

android:useLevel
useLevel属性通常不使用。该属性用于指定是否将该shape当成一个LevelListDrawable来使用，默认值为false。

padding
//padding：用来定义内部边距
size
//size:是用来定义图形的大小的。
solid
//solid用以指定内部填充色

<solid  android:color="color" />

stroke
//这是描边属性，可以定义描边的宽度，颜色，虚实线等。

 <stroke
    android:width="dimension"   //描边的宽度
    android:color="color"   //描边的颜色             
    // 以下两个属性设置虚线
    android:dashWidth="dimension"   //虚线的宽度，值为0时是实线
    android:dashGap="dimension" />      //虚线的间隔

Shape自身的属性（rectangle、oval、line、ring）

 android:shape=["rectangle" | "oval" | "line" | "ring"]
 shape的形状，默认为矩形，可以设置为矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring)
 下面的属性只有在android:shape="ring时可用：
 android:innerRadius         尺寸，内环的半径。
 android:innerRadiusRatio    浮点型，以环的宽度比率来表示内环的半径，
 android:thickness           尺寸，环的厚度
 android:thicknessRatio      浮点型，以环的宽度比率来表示环的厚度，例如，如果android:thicknessRatio="2"，
 android:useLevel            boolean值，如果当做是LevelListDrawable使用时值为true，否则为false.

②、selector的用法。

selector就是状态列表（StateList），它分为两种，一种Color-Selector 和Drawable-Selector。

Color-Selector
color-selector 就是颜色状态列表，可以跟color一样使用，颜色会随着组件的状态而改变。
文件的位置存储于/res/color/filename.xml。
在Java中使用是：R.color.filename。
属性：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"               //颜色值，#RGB,$ARGB,#RRGGBB,#AARRGGBB
        android:state_pressed=["true" | "false"]//是否触摸
        android:state_focused=["true" | "false"]//是否获得焦点
        android:state_selected=["true" | "false"]//是否被状态
        android:state_checkable=["true" | "false"]//是否可选
        android:state_checked=["true" | "false"]//是否选中
        android:state_enabled=["true" | "false"]//是否可用
        android:state_window_focused=["true" | "false"] />//是否窗口聚焦
</selector>

Drawable-Selector
drawable-selector 是背景图状态列表，可以跟图片一样使用，背景会根据组件的状态变化而变化。
文件存储于/res/drawable/filename.xml。
Java中调用：R.drawable.filename。
属性：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]//drawable的大小是否当中状态变化，true表示是变化，false表示不变换，默认为false
    android:dither=["true" | "false"]//当位图与屏幕的像素配置不一样时(例如，一个ARGB为8888的位图与RGB为555的屏幕)会自行递色(dither)。设置为false时不可递色。默认true
    android:variablePadding=["true" | "false"] >//内边距是否变化，默认false
    <item
        android:drawable="@[package:]drawable/drawable_resource"//图片资源
        android:state_pressed=["true" | "false"]//是否触摸
        android:state_focused=["true" | "false"]//是否获取到焦点
        android:state_hovered=["true" | "false"]//光标是否经过
        android:state_selected=["true" | "false"]//是否选中
        android:state_checkable=["true" | "false"]//是否可勾选
        android:state_checked=["true" | "false"]//是否勾选
        android:state_enabled=["true" | "false"]//是否可用
        android:state_activated=["true" | "false"]//是否激活
        android:state_window_focused=["true" | "false"] />//所在窗口是否获取焦点
</selector>

③、layer-list

将多个图片或上面两种效果(shape、selector)按照顺序层叠起来。

具体的shape、selector、layer-list我就不过多介绍了，网上有很多的教程，这里只是大概总结了一下用法。

接下来继续进行我们的水波纹效果介绍，先建立一个shape的xml文件，保存在drawable-v21下，命名为custom_shape.xml。如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="10dp"></corners>
    <solid android:color="@color/colorAccent"></solid>
</shape>

然后再在ripple标签中引用，如下：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/custom_shape">
    </item>
</ripple>

通过结果发现，这种方式我们先前设置的填充颜色没有起作用，即

<solid android:color="@color/colorAccent"></solid>

没有起作用。

我们可以通过下面的方式改变:
去掉android:id=”@android:id/mask”，这行代码即可。然后会发现，填充颜色可以使用了。

有了shape的使用，则selector就简单多了，如下：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item>
        <selector>
            <item
                android:drawable="@mipmap/red_bg"
                android:state_pressed="true"></item>
            <item
                android:drawable="@mipmap/yellow_bg"
                android:state_pressed="false"></item>
        </selector>
    </item>
</ripple>

同理layer-list的使用一样：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item>
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#FFFFFF" />
                    <corners
                        android:bottomLeftRadius="0.1dp"
                        android:bottomRightRadius="0.1dp"
                        android:topLeftRadius="10dp"
                        android:topRightRadius="10dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#ffa8abad" />
                </shape>
            </item>
            <item
                android:left="1dp"
                android:right="1dp"
                android:top="1dp">
                <shape>
                    <solid android:color="#FFFFFF" />
                    <corners
                        android:bottomLeftRadius="0.1dp"
                        android:bottomRightRadius="0.1dp"
                        android:topLeftRadius="10dp"
                        android:topRightRadius="10dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#ffffffff" />
                </shape>
            </item>
        </layer-list>
    </item>
</ripple>

看看效果：

xml方式实现水波纹终于介绍完了，下面介绍自定义view实现水波纹。。通过这种方式可以兼容android5.0以下的系统。好，我们来看看。

二、自定义view控件来实现

这里我简单介绍一下github上开源的水波纹实现控件，控件链接。
用法比较简单，把需要实现的视图包围在该控制中即可，比如要实现ImageView的点击水波纹效果，如下：

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  rv_centered="true">

  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>

</com.andexert.library.RippleView>

监控水波纹的扩散效果，通过添加点击监控实现，如下：

 rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

        @Override
        public void onComplete(RippleView rippleView) {
            Log.d("Sample", "Ripple completed");
        }

    });

添加点击事件，如下：

   final RippleView rippleView = (RippleView) findViewById(R.id.rippleView);
    rippleView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //TODO: onRippleViewClick
        }
    });

使用比较简单，作者的兼容性做得也比较好，支持API9+。

Android中水波纹的使用就介绍到这里，后面我会介绍如何具体实现自定义view来实现具体的水波纹效果。Android中水波纹使用之自定义视图实现。欢迎，留言！