水波纹特效—Ripple

    说到水波纹特效,就要讲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>
    点击的效果如下:

这里写图片描述

    不会做gif图,copy的别人的。就是想说的是这里是无边框的涟漪效果。如果你的点击没有效果
    1.仔细看一下xml,有没有问题,
    2.background有没有设置
    3.clicable有没有设置
    4.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>
    点击效果如下:

这里写图片描述

    这里你会发现item设置的颜色没用,因为你涟漪效果的颜色是在根节点设置的,但是,你item的颜色,你又要必须设置,不设置会崩溃,后面的id死
    1.item的color跟id必须要写
    2.涟漪效果的颜色是根节点设置的
    3.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>
    2.可以换成我们自己的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显示,点击前,后的控件形状。

项目链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海晨忆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值