水波纹特效—Ripple

2019年6月5日 426次阅读 来源: 海晨忆

说到水波纹特效，就要讲Ripple。自从android5.0开始以后，google就推出了一套UI设计语言materialdesign，俗称：材料设计。其中一个最直观的效果就是涟漪效果（水波纹效果），就是可以点击的控件会有一个波浪的效果。这个效果就是RippleDirawable。今天就来研究下这个RippleDrawable

最大的优点就是方便，简单，只用写一个xml，设置成你需要特效控件的背景即可，不用重写

首先，新建一个项目，在drawable目录下面新建一个xml文件，修改根名称为ripple，并添加颜色，就是你的涟漪效果的颜色。如下：

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

然后再你需要设置的控件设置background即可。如下

<Button
        android:background="@drawable/my_water"
        android:clickable="true"
        android:gravity="center"
        android:layout_height="56dp"
        android:layout_width="match_parent"
        android:text="Hello World!"></Button>

点击的效果如下：

《水波纹特效—Ripple》 无边框的涟漪效果图.gif

不会做gif图，copy的别人的。就是想说的是这里是无边框的涟漪效果。如果你的点击没有效果

  • 仔细看一下xml，有没有问题，
  • background有没有设置
  • clicable有没有设置
  • Android5.0以上才有，看你运行的手机，或者模拟器API是不是21以上

无边框的多丑，一般用的比较少吧？再就来说一说有边框的，很简单，在这个xml文件加一行item

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

点击效果如下：

《水波纹特效—Ripple》 有边框的涟漪效果图.gif

这里你会发现item设置的颜色没用，因为你涟漪效果的颜色是在根节点设置的，但是，你item的颜色，你又要必须设置，不设置会崩溃，后面的id死。如果不指定id为@android:id/mask，那么在显示的时候会首页显示出item指定的drawable。 如果指定id为@android:id/mask，那么默认是不会显示该drawable，而是在点击的时候出现；可以自己尝试一下就知道了。

  • item的color跟id必须要写
  • 涟漪效果的颜色是根节点设置的
  • item里面的id是必须要写的，而且是写死的mask

很多情况下，上面这样的，我们用到的比较少，我们用的比较多的是，我们自己的button的shape作为背景，两者怎么结合呢？首先，这个涟漪效果的形状，我们可以自己定义的，比方说如下两种：

  1. 可以换成我们自己的图片，效果图就不贴了
<ripple  android:color="@color/colorAccent" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/ic_launcher" android:id="@android:id/mask"></item>
</ripple>
  1. 可以换成我们自己的shape，效果图也不贴了
<ripple  android:color="@color/colorAccent" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/my_shape" android:id="@android:id/mask"></item>
</ripple>

这两种在我们项目里面也用的比较少，我们要的是，首先得显示自己的shape，其次点击还要有涟漪效果。怎么写呢？如下：

<ripple  android:color="@color/colorAccent" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" android:id="@android:id/mask"></item>
    <item>
        <selector>
            <item
                android:drawable="@drawable/my_shape"
                android:state_pressed="false">
            </item>
        </selector>
    </item>
</ripple>

就这样，在item里面写一个selector选择器，pressed的true跟false显示，点击前，后的控件形状。

  • 就这样吧，结束
    原文作者：海晨忆
    原文地址: https://www.jianshu.com/p/2357d29678f8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞