效果图
水波效果.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
果然达到了想要的效果!
总结
系统里面有很多很漂亮的效果,查看源码就可以加以应用,不用花费时间去自定义这些效果,多看官方文档更是重要!
