Android 为控件添加点击涟漪效果

Posted 微啊微末

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android 为控件添加点击涟漪效果相关的知识,希望对你有一定的参考价值。

      android在5.0版为Button默认添加了点击时的涟漪效果,而且在其他的控件上也可以轻松的实现这种炫酷的效果。涟漪效果可以分为两种,一种时有边界的涟漪,另一种时无边界的涟漪。所谓的有边界,即涟漪的效果展现不会超过控件的大小;另一种无边界效果,涟漪在越过控件边界之后还会继续扩散,然后逐渐消失。

实现涟漪效果,我们只需要在控件的android:backgroud 属性上进行设置即可。两种效果的设置如下 :

有边界的涟漪效果:

android:background="?android:attr/selectableItemBackground"

无边界的涟漪效果:

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

除了进行上面的设置之外,还要记得设置控件为可点击的

android:clickable="true"

     

       如果控件已经使用了android:background属性去设置背景色或者背景图片,但是有想要有点击时的涟漪效果。那么我们可以考虑在android:foreground属性中设置涟漪效果,这样同样可以达到点击时产生涟漪,也不会影响我们对控件背景的设置。不过对于默认无法点击的控件,还要记得设置android:clickable为true。另外还要注意,如果Android版本过低,无边界的涟漪效果可能无法很好的展现。

 

除了使用上述方法设置涟漪效果外,我们也可以考虑自定义涟漪效果,比如自定义涟漪的颜色,自定义涟漪的边界等,使UI的展现更加丰富。

想要自定义涟漪效果,就要使用到Ripple。我们可以在xml中使用ripple标签来设置涟漪的效果 :

1)自定义涟漪的颜色:

创建xml文件custom_bg.xml,内容如下:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
</ripple>

这里指定了涟漪的颜色为 #000000,即黑色。使用该xml文件作为背景后,当点击控件时,涟漪的颜色就会变为黑色。

也就是说,我们在ripple标签的color中指定的颜色,就是涟漪的颜色。

 

2)自定义涟漪的边界:

假设我们想要涟漪的边界为一个椭圆,对上面的custom_bg.xml文件进行修改,我们只需要在ripple标签里再添加一个item标签,再在item标签里设置边界的形状(shape)大小即可。item里的设置和我们平常为drawable设置形状大小的操作类似:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item >
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</ripple>

在item标签中指定了一个oval(椭圆),它的颜色为白色,大小不超过控件(和控件四边相切)。当我们设置该xml为控件背景后,控件上面会显示一个白色的椭圆,当我们点击之后,会在椭圆上产生一个逐渐扩散的黑色涟漪,这个涟漪慢慢扩散消失,但不会超出椭圆的范围。

虽然涟漪有边界了,但这不是我们想要的效果,我们只希望为涟漪指定一个椭圆的边界,但不希望这个白色的椭圆会显示在控件上。那么如果我们去掉里面的

<solid android:color="#ffffff"/>

这一行就可以了吗?答案是不行的。当我们不为椭圆填充颜色之后,就没有涟漪效果了。原因是如果不为椭圆设置颜色,那么椭圆就默认没有大小,这样涟漪的显示范围就为零。想要只设定涟漪的边界,而不影响控件的显示,可以为item标签设置id为@android:id/mask 。如下:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</ripple>

这样设置之后,相当于设置了一个椭圆的遮罩,点击控件之后,涟漪扩散的边界就是一个椭圆。

 

3)为涟漪设定更复杂的边界

我们用shape为涟漪设置边界形状,只有rectangle,oval等几个基本形状。想要使涟漪的效果更加炫酷,可以使用图片来作为涟漪的边界,显示时,图片的不透明部分就是涟漪的可扩散区域。当我们点击控件时,可以清楚的显示出图片的轮廓,能得到更好的视觉效果。

修改custom_bg.xml文件,如下:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item android:id="@android:id/mask" android:drawable="@drawable/ic_launcher">
    </item>
</ripple>

我们设定涟漪的颜色为#000000(黑色),在item标签中通过android:drawable指定了涟漪的边界为ic_launcher这张图片,即涟漪以该图片的轮廓作为边界,只会在该图片不透明部分扩散。另外设置了android:id/mask,表示图片只作为蒙版,不显示出来。当我们点击控件时,可以看到一个炫酷的安卓的涟漪效果。


以上是关于Android 为控件添加点击涟漪效果的主要内容,如果未能解决你的问题,请参考以下文章

Android,设置按钮的背景颜色会失去涟漪效果

如何在android中为首选项添加涟漪效果?

在 Android 和 iOS 上点击自定义按钮时,实现“突出显示效果”而不是“涟漪效果”

带有自定义可绘制xml的涟漪效应?

如何在带有圆角的布局上添加涟漪效果? [复制]

如何在 Android 上的 textview 或 imageview 上设置涟漪效果?