如何在 Android 上的 TextView 或 ImageView 上设置涟漪效果

背景

产品经理:我们的按钮点击的时候要有按压效果,我们要提升用户体验。

安卓开发:想要什么样的按压效果呀?

产品经理: 都行,反正要有按压效果,让用户能看出来我点击了这个按钮。


以上纯属虚构,如有雷同,纯属巧合。


实现方案

  • 找 UI 切两套图,普通状态 和 press 状态的。
  • 设置监听,按下的时候改变 View 的透明度。
  • 使用第三方库,如轮子哥的 ShapeView ,可以在 xml 布局中就能直接设置 普通状态 和 press 状态的颜色,省去了创建 drawable 文件的步骤。
  • 使用系统默认的 drawable 资源。

综上,最后一条是最简单的。


我们都知道,系统自带的一部分按钮(比如:TabLayoutBottomNavigationView ,如下图所示效果)按下后是会有从按下的地方往外扩散的效果,这在安卓中被称为 Ripple(译:涟漪,波纹)。

图片描述

于是我去 Android 官网文档找了一番,发现有默认的资源可以用。


自定义轻触反馈

官网文档传送门


Material Design 中的轻触反馈可在用户与界面元素互动时,在接触点上提供即时视觉确认。按钮的默认轻触反馈动画使用新的 RippleDrawable 类以波纹效果实现不同状态间的过渡。

在大多数情况下,您应在视图 XML 中应用此功能,方法是将视图背景指定为:

  • ?android:attr/selectableItemBackground,表示有界的波纹。
  • ?android:attr/selectableItemBackgroundBorderless,表示越过视图边界的波纹。它将在该视图的最近父视图(具有非空背景)上进行绘制并由该父视图设定边界。

注意selectableItemBackgroundBorderless 是在 API 级别 21 中引入的新属性。

或者,您可以使用 ripple 元素将 RippleDrawable 定义为 XML 资源。

您可以为 RippleDrawable 对象指定一种颜色。如需改变默认轻触反馈颜色,请使用主题背景的 android:colorControlHighlight 属性。

如需了解详情,请参阅 RippleDrawable 类的 API 参考文档。

如:

1
android:background="?attr/selectableItemBackground"

1
android:background="?attr/selectableItemBackgroundBorderless"

特殊情况

当你设置了一些背景或背景颜色属性时,selectableItemBackgroundBorderless 将不起作用。


不过好消息是你可以将它设置为 foreground。


如:

1
android:foreground="?attr/selectableItemBackgroundBorderless"

结尾

以上就是本篇文章的全部内容啦!又是一个安卓开发小技巧,你学废了吗?


如果对你有帮助的话,欢迎一键三连+关注哦~


如何在 Android 上的 TextView 或 ImageView 上设置涟漪效果
https://blog.funkt.cn/2022/10/31/1587109090720669697/
作者
anjiemo
发布于
2022年10月31日
许可协议
未经作者授权,禁止转载