2019-09-25

ImageButtom 实现点击水波纹效果和图标切换

一个简单的点击效果:


这里实现水波纹使用的是ripple标签

一:水波纹的实现

       5.0以上button原生自带水波纹效果,而其他控件或者布局要实现点击时水波纹的效果,我们这里可以使用ripple标签。在Drawable中新建跟标签为ripple的XML文件作为布局或者控件的背景,ripple的具体使用网上已经有很多了,我这里贴两张用法的图。

(1)最简单的用法:


这里是未点击时圆角为6dp,描边为1dp宽绿色,填充色为白色的带绿色水波纹效果的背景

当然你可以直接引用图片。

(2)引用图片的简单用法:


你也可以drawable属性再次引用shap

这就是ripple的简单用法啦,5.0(API21)咋就不说了吧,这里还要提一点的是,button类控件使用ripple做背景不设置点击事件也有点击效果,其他控件则需要设置点击事件水波纹效果才会生效。


二 实现gif 图片效果的布局


imagebutton布局
ripple_btn_bg_collect
ripple_btn_bg_collect2

在布局中加了个阴影效果,背景图片是圆形灰白色背景+绿色水波纹,src是空心图标和实心图标的切换。

以下是代码的实现方式(代码中设置src 和 background):


我的IDE是3.4这个黄色的匿名内部类提示好烦,强迫症患者直接实现这个接口

对于黄色区域:


加上@SuppressLint("Handlerleak")还是有黄色,哈哈

有知道消除内部类标黄的朋友请告诉我,谢谢啦。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容