Android Material Design之ripple水波纹使用

我们知道在5.0以上的机型,例如button点击的时候会有一种涟漪的水波纹效果,当让我们通常的做法是通过设置andrid:background来给这个控件加一个selector,但是这样做并没有达到我们想要看到的水波纹效果。而在5.0之后Android引入了Ripple水波纹的效果。

基本使用(5.0以上)

button的默认效果

image

1
2
3
4
5
6
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
android:textColor="@color/colorPrimaryDark"
android:textSize="12sp"/>

其实这就是一段很普通的代码,虽然有水波纹效果,但是有没有感觉很难看。

使用系统的点击Ripple效果

这里我们通过设置android:backgroud来设置ripple的点击效果,主要分为2中效果:

  • 有边界的水波纹效果
    这种效果在21以下的机型点击的时候只有普通selector的点击效果
1
android:background="?android:attr/selectableItemBackground"

image

1
2
3
4
5
6
7
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="button1"
android:textColor="@color/colorPrimary"
android:textSize="12sp"/>
  • 超出边界的水波纹效果

    这种超出边界的必须要21以上才可以

1
android:background="?android:attr/selectableItemBackgroundBorderless"

image

1
2
3
4
5
6
7
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:text="button2"
android:textColor="@color/colorAccent"
android:textSize="12sp"/>
  • 更改系统水波纹效果颜色

    有的时候你觉得这种默认的灰色点击的水波纹效果不是你想要的,但是你又不想去设置ripple标签的drawable,那么你只需要在styles-v21主题里面加入

1
<item name = "android:colorControlHighlight">@color/colorAccent</item>

image

1
2
3
4
5
6
7
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="button1"
android:textColor="@color/colorPrimary"
android:textSize="12sp"/>

使用ripple

有的时候你想设置如不同的button点击效果不一样,也就是我想要让它点击的时候显示什么样的颜色的水波纹效果就是啥样的样式,这样一来我们就可以设置ripple标签的drawable

  • 超出边界的ripple点击效果

image

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark">
</ripple>
  • 有边界的ripple点击效果

    我们知道,除了超出边界的效果,还有一种是有边界限制的。既然要限制边界,我们就需要给他提供一个范围,即添加一个item标签的mask。

  1. 使用颜色作为mask

image

1
2
3
4
5
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark">
<item android:drawable="@color/colorAccent">
</item>
</ripple>
  1. 使用shape作为mask

image

1
2
3
4
5
6
7
8
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark">
<item >
<shape android:shape="oval">
<solid android:color="@color/colorAccent"></solid>
</shape>
</item>
</ripple>
  1. 使用图片作为mask

image

1
2
3
4
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark">
<item android:drawable="@drawable/ic_launcher"/>
</ripple>
  1. 给item添加android:id=”@android:id/mask”

image

1
2
3
4
5
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark">
<item android:id="@android:id/mask" android:drawable="@drawable/ic_launcher">
</item>
</ripple>

这里出现了一个有趣的现象,我们可以看到从一开始图片是隐藏的,只有点击的时候才出现图片的轮廓,我们可以总结一下:
1、如果不指定id,那么在显示的时候会显示出item指定的drawable。2、如果指定id为@android:id/mask,那么默认是不会显示该drawable,而是在点击的时候出现该drawable的轮廓。
注意如果使用ripple的话想兼容21以下的版本,必须将ripple设置在drawable-v21目录下,而在drawable目录下则需要存放一个相同命名的xml文件,这样在21以下机型就不会出现crash。