正文

ripple水波纹效果

白乾涛  白乾涛  2022-08-20  188

关键词：

背景+波纹

对于有边界限制的Ripple，我们就需要给他提供一个范围，即添加一个item标签。

如果在一个ripple标签中，添加一个item标签，在item中添加如下属性：

【android:drawable="@color/***"】水波效果会限定在本身矩形区域内部
【android:drawable="@drawable/png等"】水波效果会限定在图片中非透明部分对应的区域内部
【android:drawable="@color/shape"】水波效果会限定在shape对应的区域内部

如果在一个ripple标签中，添加一个item标签，在item中添加一个selector标签，那么将同时具有水波效果和selector效果

item带不带id的区别

添item时，如果不指定id为@android:id/mask，那么不点击时会显示出该item指定的drawable

添item时，如果指定id为@android:id/mask，那么不点击时不会显示出该item指定的drawable，而仅仅在点击的时候才出现

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android"

android:color="#F00" >

<item

android:id="@android:id/mask"

android:drawable="@drawable/ic_launcher"/>

</ripple>

实践中发现，这两个属性都是一样的，且和没设置时的效果一样

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

以下参考http://blog.csdn.net/sodino/article/details/53910068?utm_source=tuicool&utm_medium=referral

当ripple标签内只指定一个android:color属性时，则该ripple效果的绘制会溢出其所在View的边界，直接绘制在父控件的背景之上。

如果父控件没有设置背景，则会进一步绘制在父控件的上一级父控件的背景之上。

Ripple生效条件

当 View 有设置 OnClickListener 的情况下被点击，或者获得/失去焦点变化时，将出现Ripple效果

如果点击效果没有，很可能是该控件本身点击没开启，设置如下属性即可【android:clickable="true"】

不适用Ripple的场景

点击之后就立马消失的组件(setVisibility:gone invisible 或 remove)不适合使用

因为当组件恢复为visiable后，未播放完的Ripple动画会继续播放，会产生疑惑

硬件加速开关对无边界Ripple的影响：

在Android 3.0 (API level 11)引入的硬件加速功能默认在application/Activity/View这三个层级上都是开启的。

但如果手动关闭了，则无边界Ripple不会生效。

子层(Child Layer)

由于View在不同的交互下有不同的state，常见的为pressed、focused或normal这三种状态。

所以Ripple通过多个item来表示不同state下的显示，每个item都是一个子层(Child Layer)，能够直接显示color、shape、drawable/image 及 selector。

当Ripple存在一个或多个子层时，则ripple效果则被限定在当前View的边界内了。无边界效果(unbounded ripple)失效。

Mask层(Mask Layer)

可以设置指定子层item的android:id="@android:id/mask"来设定当前Ripple的Mask。

Mask的内容并不会被绘制到屏幕上，它的作用是限定Ripple效果的绘制区域。

mask所在的的子层限制了Ripple效果的最大范围只能是View的边界，不会扩散到父组件。

与ClickableSpan冲突

如果Layout有包含ClickableSpan的TextView，则发现该Layout设置Ripple的效果无法响应。

这个现象可以推断出MotionEvent这个事件在TextView这一层级被消耗了，下一步应该为找出该事件为什么被消耗?

通过debug源码，发现当点击事件传递到TextView时，会进一步传递给LinkMovementMethod::onTouchEvent()，如果点击位置处于ClickableSpan以外，则返回Touch.onTouchEvent(widget, buffer, event);

该方法在处理MotionEvent::ACTION_DOWN时默认返回true，导致Ripple失效。

那么解决思路也就简单了，重写LinkedMovementMethod::onTouchEvent()方法，当且仅当点击到ClickableSpan时，才返回true即可。

具体详见https://github.com/sodino/Ripple/blob/master/app/src/main/java/com/sodino/ripple/RippleTextView.java

布局

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_horizontal"

android:orientation="vertical" >

<Button

style="@style/textview"

android:text="在5.0以上，Button默认自带Ripple点击效果" />

<Button

style="@style/textview"

android:background="@drawable/ic_launcher"

android:text="但是如果设置了其他的background Ripple点击效果就没了" />

<TextView

style="@style/textview"

android:text="TextView默认是没有Ripple点击效果的" />

<TextView

style="@style/textview2"

android:background="@drawable/_1_default"

android:text="默认是圆形的、超出边界的波纹波纹的直径为控件宽高中的最大值" />

<TextView

style="@style/textview2"

android:background="@drawable/_1_default2"

android:text=" 但当波纹遇到其他控件的背景时，不会遮挡住其他控件的背景(比如不会挡住下面控件的背景)" />

<TextView

style="@style/textview"

android:background="@drawable/_2_color_without_id"

android:text="用颜色作为Mask，不指定id 此时item中的颜色会被用来作为点击前的背景颜色" />

<TextView

style="@style/textview"

android:background="@drawable/_2_color_with_id"

android:text="用颜色作为Mask，指定id 此时item中的颜色没任何卵用，但可以用来限定边界" />

<TextView

style="@style/textview3"

android:background="@drawable/_3_pic_without_id"

android:text="用图片作为Mask 不指定id" />

<TextView

style="@style/textview3"

android:background="@drawable/_3_pic_with_id"

android:text="用图片作为Mask 指定id" />

<TextView

style="@style/textview3"

android:background="@drawable/_4_shape_without_id"

android:text="用shape作为Mask 不指定id，矩形" />

<TextView

style="@style/textview3"

android:background="@drawable/_4_shape_with_id"

android:text="用shape作为Mask 指定id，圆形" />

<TextView

style="@style/textview"

android:background="@drawable/_5_selector_without_id"

android:text="搭配selector使用，不指定id 将同时具有水波效果和selector效果" />

<TextView

style="@style/textview"

android:background="@drawable/_5_selector_with_id"

android:text="搭配selector使用，指定id 和上面的一样，指定id后选择器效果将丢失" />

<TextView

style="@style/textview"

android:background="@drawable/_5_selector_fuza"

android:text="这是一种负责的情况" />

</LinearLayout>

</ScrollView>

样式

<item name="android:layout_width">match_parent</item>

<item name="android:gravity">center</item>

</style>

<item name="android:gravity">center</item>

</style>

<item name="android:gravity">center</item>

</style>

<item name="android:layout_width">match_parent</item>

</style>

</resources>

null

附件列表

android-如何给imageview设置水波纹效果(代码片段)

1.btn_ripple_mask.xml<?xmlversion="1.0"encoding="utf-8"?><ripplexmlns:android="http://schemas.android.com/apk/res/android"android:color="@andro 查看详情

canvas水波纹效果

先看效果演示效果自然界中水波纹效果十分麻烦，我这里只是根据水波纹的几个特性，在理想环境下模拟水波纹的扩散效果。这里应用到的属性有：扩散、波动、折射。扩散：很好理解，水波纹会从触发原点开始向周围扩散... 查看详情

动态壁纸水波纹效果

】动态壁纸水波纹效果【英文标题】：LiveWallpaperWaterRippleEffect【发布时间】：2012-05-0618:00:07【问题描述】：我正在制作一个动态壁纸，它在触摸屏幕时加入了一些水波纹效果，但我有点卡住了。创建多个图像并循环播放它们以创... 查看详情

点击水波纹效果

...und属性的时候给其布局中加入一下代码就是系统默认的水波纹效果比如在recyclerview的item布局中，或者其他任意布局中。android:background="?android:attr/selectableItemBackground"android:clickable="true"android:focusable="true"当UI有要求布局、按钮等的... 查看详情

Pygame 水波纹效果

】Pygame水波纹效果【英文标题】：Pygamewaterrippleeffect【发布时间】：2011-11-3016:12:55【问题描述】：我在Google上搜索过，但没有现成的脚本-与Flash上的效果相反。我检查了TheWaterEffectExplained上的算法，还测试了PerlinNoise的实现，它可... 查看详情

如何给imageview设置水波纹效果

水波纹效果：1.标准正余弦水波纹；2.非标准圆形液柱水波纹；虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到图像的混合模式（PorterDuffXfermode）；先看效果：自定义Vi... 查看详情

水波纹的动态效果

就像这样：http://bbs.nj999.com/attachment/52_12663.gif谁有这种图的教程，或者文字教程也可以，请帮帮忙~~~~~~参考技术Awww.blueidea.com上好像看到过,你找下吧查看详情

css实现水波纹效果

1.HTML代码：<divclass="example"><divclass="dot"></div></div>2.CSS样式：设置animation属性.dot:before{content:‘‘;position:absolute;z-index:2;left:0;top:0;width:10px;height:10px;background- 查看详情

materializecss的水波纹效果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>p{height:100px;line-height:100px;text-align:center;width:100px;backgroun 查看详情

按钮点击效果(水波纹)

原文地址：http://www.cnblogs.com/ys-ys/p/5874343.html<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1,minimum-s 查看详情

css3+jquery实现按钮水波纹效果

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>水波纹按钮< 查看详情

自定义view实现水波纹效果

今天看到一篇自定view实现水波纹效果觉得真心不错学习之后再次写下笔记和心得.但是感觉原作者写得有些晦涩难懂,也许是本人愚笨所以重写此作者教程.原作者博文大家可以去看下,感觉他在自定义view方面非常厉害,本文是基于... 查看详情

android水波纹显示进度效果

关于水波纹的效果想必大家见的已经很多了，我就在这里再啰嗦一次，为了加深自己的印象。先来看看效果图关于这个效果的实现不必想的太过复杂了，要想实现这个效果，我们还需要了解一下PorterDuff及Xfermode关... 查看详情

android按钮实现按压水波纹效果(代码片段)

...android:foreground="?selectableItemBackground"即可实现水波纹的效果。但是这需要在API23也就是说需要在Android6.0系统的手机上面，才会有效果。方法二：给Button按钮设置背景<?xmlversion="1.0"encoding 查看详情

如何让所有view都可以带上点击的水波纹效果

参考技术APF的话可以用表达式当撞击事件发生时动态创建一个面片赋予一个水波纹的动画材质查看详情

超好的水波纹效果(代码片段)

html<aclass="home_user_head"href="javascript:;"><imgsrc="//static.eimoney.com/diamonds/mobile/imoney_v6/img/iMoneyNewLogoColor.png"></a>css:.home_user_headdisplay:inline-block;posit 查看详情

android默认水波纹的使用和去除

actionBarItemBackground5.0以上超出边界圆形水波纹selectableItemBackground5.0以上边界内圆形水波纹style=”?android:attr/borderlessButtonStyle”无效果这两个属性在5.0以下是默认的灰色效果,个人觉得也很唯美大笑用法Android:background=”?android:a... 查看详情

android——实现渐变色水波纹效果源码(代码片段)

项目中使用到的效果，效果图如下：代码实现：publicclassWaveViewextendsViewprivatePaintmPaint,mCriclePaint,mTextPaint;//倾斜或旋转、快速变化,当在屏幕上画一条直线时,横竖不会出现锯齿,//但是当斜着画时,就会出现锯齿的效果,所... 查看详情