效果圖
水波效果.gif
今天項目說按鈕要做成有點擊效果,然后我翻看一下各大app發(fā)現(xiàn)還是Toolbar的還回按鈕的效果好,如上圖!要求就是有個圈圈而且是不停的放大!
上圖的效果是Toolbar自帶效果,所以決定分析ToolBar的這一效果源碼
廢話不多說,開始
image.png
上面是用系統(tǒng)自帶的返回按鈕圖標(biāo),親切自然舒服.最關(guān)鍵的一步就是:
supportActionBar.setDisplayHomeAsUpEnabled(true);
很明顯這一步就是設(shè)置返回按鈕圖像的,跟進(jìn)去查看:
image.png
原來是抽象方法,子類是:ToolbarActionBar,看看重寫方法:
image.png
image.png
調(diào)用ToolbarWidgetWrapper的setDisplayOptions方法,跟進(jìn)
image.png
箭頭所指的地方就是默認(rèn)設(shè)置返回的那個圖標(biāo)
image.png
由于沒有設(shè)置返回圖標(biāo),所以就會用默認(rèn)的圖標(biāo),我們看看默認(rèn)圖標(biāo)是哪個,
image.png
ActionBar的屬性是SDK下的D:/AndroidSDK/platforms/android-25/data/res/values/attrs.xml
image.png
image.png
是吧,這樣很容易的找到了ActionBar_homeAsUpIndicator的屬性,那么因為是默認(rèn)用系統(tǒng)的Style,找到Widget.Toolbar
image.png
同樣在value目錄下可以找到值:
image.png
我們要的就是這個:@drawable/abc_ic_ab_back_material
image.png
image.png
這樣就找到了這個矢量圖,那么回到最初的位置.
image.png
看看mToolbar是如何設(shè)置的
image.png
這個地方就創(chuàng)建一個mNavButtonView然后設(shè)置圖片給他,從這地方可知,水波效果肯定是來自這個mNavButtonView.
ensureNavButtonView()當(dāng)然就是創(chuàng)建了mNavButtonView:
image.png
果然是創(chuàng)建了一個AppCompatImageButton,水波效果當(dāng)然是這里R.attr.toolbarNavigationButtonStyle設(shè)置的,在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
很熟悉很簡單,原來就是加了個半徑!怪我沒看文檔,官方文檔上面應(yīng)該有這個說明!,下面測試這個效果是不是如此,復(fù)制這個文件改個名字為control_background_80dp_material(搞大點),并修改顏色
image.png
證實效果
布局XML文件加上一個控件
image.png
運行然后點擊看看效果:
效果red.gif
果然達(dá)到了想要的效果!
總結(jié)
系統(tǒng)里面有很多很漂亮的效果,查看源碼就可以加以應(yīng)用,不用花費時間去自定義這些效果,多看官方文檔更是重要!
