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给控件添加触摸回调 脑补一个场景,一个页面点击某个按钮会弹出PopupWindow,然后点击PopupWindow以外的任意位置关闭 效果图 实现方法 可以在布局的最外层容器监听触摸事件 ...
- Android给控件添加默认点击效果
Android控件点击效果 Android中Button控件是有点击效果的,但是像TextView.ImageView.各种Layout是没有点击效果的,给TextView设置点击事件后,加个点击效果 ...
- 【MAUI】为 Label、Image 等控件添加点击事件
一.前言 已经习惯了 WPF.WinForm 中"万物皆可点击"的方式. 但是在 MAUI 中却不行了. 在 MAUI 中,点击.双击的效果,是需要通过"手势识别器&qu ...
- 继承UIView的子控件添加点击事件
UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...
- ios 给移动的控件添加点击事件
前言: 给一个UIView做移动动画,虽然看起来frame在持续改变,但是它的frame已经是最终值了. 也就是说表面看到的动画都是假象,它的真实位置已经是固定的了.所以只有点击在他的真实frame范 ...
- android中RecyclerView控件实现点击事件
RecyclerView控件实现点击事件跟ListView控件不同,并没有提供类似setOnItemClickListener()这样的注册监听器方法,而是需要自己给子项具体的注册点击事件. 本文的例 ...
- JCameraView 仿微信拍照Android控件(点击拍照,长按录小视频)
JCameraView 控件介绍 这是一个模仿微信拍照的Android开源控件,主要的功能有如下: 点击拍照. 前后摄像头的切换. 长按录视频(视频长度为10秒内). 长按录视频的时候,手指上滑可以放 ...
- android 组合控件接收不到点击事件的问题
android点击事件的传播是有子控件传给父控件,如果子控件处理过了,父控件不再处理,所以要想让组合控件接收点击事件,必须屏蔽子控件的点击事件. 设置组合控件的clickable和focusable属 ...
- Android 使用代码主动去调用控件的点击事件(模拟人手去触摸控件)
使用代码主动去调用控件的点击事件(模拟人手去触摸控件) //View 可以是LinearLayout,Button,TextView View.performClick();
随机推荐
- MAC Matlab 中文乱码
环境:macOS High Sierra 10.13.4 问题:文件中文注释乱码(再次打开文件时) / 控制台输出中文乱码 解决方法: 官网下载补丁(https://ww2.mathworks.cn/ ...
- MAC 安装 pygraphviz 找不到头文件
networkx的有向图只能通过箭头来区别两点之间的两条边,但是我在复现snake论文的时候,需要绘制两个交叉口之间的两条不同方向的路段,最后选择了pygraphviz 直接通过anaconda打开对 ...
- 「POI2015」KIN
传送门 Luogu 解题思路 想要做这道题,只要会维护区间最大子段和就好了. 而这个可以用线段树维护模板点这里 对于重复的情况,我们可以对每一个位置记一个前驱表示和当前位置种类相同的前一个位置. 然后 ...
- sklearn调用分类算法的评价指标
sklearn分类算法的评价指标调用#二分类问题的算法评价指标import numpy as npimport matplotlib.pyplot as pltimport pandas as pdf ...
- Eclipse创建一个动态maven项目详细步骤
新建maven项目,new一个Dynamic Web Project 项目 输入完项目名直接finish 配maven,右键项目configure,选择Convert to Plug-in Proje ...
- [DllImport("kernel32.dll")]
这叫引入kernel32.dll这个动态连接库. 这个动态连接库里面包含了很多WindowsAPI函数,如果你想使用这面的函数,就需要这么引入.举个例子: [DllImport("kerne ...
- Doxygen 注释语法规范
背景 这一块的内容更多的是作为了解,但是可以以这样的规范作为自己的编程注释习惯,提高自己的软实力. Doxygen注释语法 注释格式 块注释建议统一使用 /** -- ***/ 行注释建议统一使用 / ...
- C++ 类 与 static
背景 从学习C++到使用现在,发现很多新的东西,正好整理一下. static 为静态,指是当类编译加载的时候,内存就会开辟存储空间的. static 数据成员 在类中,static 可修饰 类中的成员 ...
- 05.swoole学习笔记--定时器
<?php //循环执行的定时器 swoole_timer_tick(,function($timer_id){ echo "执行 $timer_id \n"; }); sw ...
- HashMap之Hash碰撞源码解析
转自:https://blog.csdn.net/luo_da/article/details/77507315 https://www.cnblogs.com/tongxuping/p/827619 ...