天天看點

實作淘寶和QQ ToolBar透明漸變效果

哎,好久都沒寫部落格了,最近有點懶惰了,今天端午節,在學校也是無聊的蛋疼啊,正好今天玩玩一些在其他app中常見的一些功能。

來看看效果圖吧!

實作淘寶和QQ ToolBar透明漸變效果

之前是在簡書上面看了一篇實作的這種功能,他是重寫coordinatorlayout的behavior類來達到效果,也确實了解到了coordinatorlayout的強大之處啊,但是自己跟着他的效果走的時候 ,感覺好像不是太理想的樣子。

今天我來自己 寫個

來看看我的效果圖:

實作淘寶和QQ ToolBar透明漸變效果

哇塞,好牛逼的樣子,額,其實也就那麼回事。

來講講思路吧

實作淘寶和QQ ToolBar透明漸變效果

草稿畫。。。。這個應該看的懂吧,就是一些控件的分布

實作淘寶和QQ ToolBar透明漸變效果

自己用畫圖軟體畫的,自己看的都心醉心醉的。

從圖中我們應該就能了解到,其實這些好像就那麼回事,拿到高度,然後設定透明度就行了,其實,是這個樣子的

首先,我們要知道設定view的透明度的代碼

參數設定的是透明度的變化值為0~255,顔色數嘛是吧。

然後看看擷取變化距離區間的代碼

這樣,我們就拿到距離的代碼了,現在兩樣都齊全了,怎樣才能将他們關聯起來呢,我們想想,目前滾動的scrollview的y值去減去這個headheight,這個相內插補點隻允許他在headheight的高度去變化,如果scrollview滑動的距離超出這個高度的話,那麼我們直接設定alpha為255直接顯示變透明,如果這個scrollview滑動的到頂部時,我們直接設定alpha為0為透明,我們首先拿到這個變化的距離,然後去除以這個headheight高度拿到這個百分比,然後去乘上255拿到同等比例中的透明度的值,記得這個數值都得是float類型,高度也是,要是int的話這樣相除的話就變成0了。

拿到這個透明度後就可以設定進去了,思路就是這麼簡單,現在來貼下代碼。

主要呢還是重寫scrollview,将需要變化的布局傳遞給他,然後重寫scrollview的onscrollchanged方法,裡面的參數看看應該明白了,那是目前scrollview的坐标距離頂部的top距離和左邊left距離,和之前分析的一樣,隻不過getscrolly()的值變成了t而已,方法中的高度都給傳給你了,那就更簡單了。

來說說做的時候的誤區和不解。

①、之前來改變這個透明度的時候我是重寫了ontouchevent方法,手指在滑動的時候來擷取距離差來設定透明度,這樣做确實是能做出來,但是在手指離開螢幕,scrollview還在滑動的時候,就不走move方法,這個比例值也就不再變化了,到達頂部的時候透明度都沒有什麼變化,是以,不能從這裡入手,我上面說那位簡書哥們給的方法,我體驗的就是這樣的,是以不是太好。

②、 mslop=viewconfiguration.get(context).getscaleddoubletapslop();

這個值好坑爹啊,之前看大神們寫說是觸動滑動事件最好是超過這個距離再來觸發,我就用了這個,發現不對,log出來一下mslop是300px,總共這個頭部才沒多少,是以就不用他了,直接自己定義為10px就差不多了,設這個主要是為了到達這個值的時候直接設定為全透明了,免得還要使勁滑到0才設定透明度的話,那樣體驗就不好了,給個緩沖值會更好點。

③、喜歡給距離設定dp的我也是醉了,200dp被我log出來是600,要好好注意點了,雖然這個沒什麼,不影響代碼,但是還是要注意的。

繼續閱讀