模仿Toolbar返回按钮点击水波效果-圆形波圈圈

效果图

水波效果.gif

今天项目说按钮要做成有点击效果,然后我翻看一下各大app发现还是Toolbar的还回按钮的效果好,如上图!要求就是有个圈圈而且是不停的放大!

上图的效果是Toolbar自带效果,所以决定分析ToolBar的这一效果源码

废话不多说,开始

image.png
上面是用系统自带的返回按钮图标,亲切自然舒服.最关键的一步就是:
supportActionBar.setDisplayHomeAsUpEnabled(true);
很明显这一步就是设置返回按钮图像的,跟进去查看: image.png

原来是抽象方法,子类是:ToolbarActionBar,看看重写方法:

image.png image.png
调用ToolbarWidgetWrapper的setDisplayOptions方法,跟进 image.png

箭头所指的地方就是默认设置返回的那个图标

image.png

由于没有设置返回图标,所以就会用默认的图标,我们看看默认图标是哪个,

image.png
ActionBar的属性是SDK下的D:/AndroidSDK/platforms/android-25/data/res/values/attrs.xml image.png image.png

是吧,这样很容易的找到了ActionBar_homeAsUpIndicator的属性,那么因为是默认用系统的Style,找到Widget.Toolbar

image.png

同样在value目录下可以找到值:

image.png
我们要的就是这个:@drawable/abc_ic_ab_back_material image.png image.png

这样就找到了这个矢量图,那么回到最初的位置.

image.png

看看mToolbar是如何设置的

image.png
这个地方就创建一个mNavButtonView然后设置图片给他,从这地方可知,水波效果肯定是来自这个mNavButtonView.

ensureNavButtonView()当然就是创建了mNavButtonView:

image.png
果然是创建了一个AppCompatImageButton,水波效果当然是这里R.attr.toolbarNavigationButtonStyle设置的,在appcompat引用包的style下,一路跟随就可以找到controlBackground,这就背景效果图了 image.png
*control_background_40dp_material这个文件就是我们要找的东西,问价的位置:D:/AndroidSDK/platforms/android-25/data/res/drawable/control_background_40dp_material.xml image.png

打开看看代码:

image.png

很熟悉很简单,原来就是加了个半径!怪我没看文档,官方文档上面应该有这个说明!,下面测试这个效果是不是如此,复制这个文件改个名字为control_background_80dp_material(搞大点),并修改颜色

image.png

证实效果

布局XML文件加上一个控件

image.png

运行然后点击看看效果:

效果red.gif

果然达到了想要的效果!

总结

系统里面有很多很漂亮的效果,查看源码就可以加以应用,不用花费时间去自定义这些效果,多看官方文档更是重要!