android:QQ多種側滑菜單的實現

標籤：rac   qq5.0   todo   變化   分享   翻轉   sla   定義   代碼   

在這篇文章中寫了

自己定義HorizontalScrollView實現qq側滑菜單

然而這個菜單效果僅僅是普通的側拉效果 我們還能夠實現抽屜式側滑菜單 就像這樣

第一種效果

另外一種效果

第三種效果

第四種效果

其他代碼都和上篇文章同樣，僅僅是在MyHorizontalScrollView.class重寫onScrollChanged這種方法

第一種的側滑效果代碼非常easy

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);ViewHelper.setTranslationX(mMenu, l);}

通過setTranslationX方法設定mMenu的x座標位移量 當中的l=getScrollX()

設定完這些就能實現這種側滑效果

另外一種側滑效果代碼和第一種類似。僅僅只是是對mMenu的x座標的位移量再添加1倍，使得mMenu菜單彷彿從右邊出來一樣

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);ViewHelper.setTranslationX(mMenu, 2*l);}

第三種側滑效果，我們發現用到了縮放動畫，所以要有個0~1的變動率，因為初始的l=getScrollX()=mMenuWidth 。終於的l=0 所以從這裡我們能夠得到

//scale 1~0的變動率float scale = l*1.0f/mMenuWidth;

代碼例如以下

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);//scale 1~0的變動率float scale = l*1.0f/mMenuWidth;//Content的縮放比例1~0.7float rightScale=scale*0.3f+0.7f;//設定縮放中心ViewHelper.setPivotX(mContent,0);ViewHelper.setPivotY(mContent,mContent.getHeight()/2);//進行縮放ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);}

至於這裡我為什麼設定縮放中心為mContent  x=0 y=height/2 是為了在側滑後 mContent左側離螢幕右側的距離不變 否則 距離也會進行縮放

第四種效果我們會發現相比著第三種 不過左側的mMenu的效果不同  會發現 進行了縮放 和透明

代碼例如以下

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);//scale 1~0的變動率float scale = l*1.0f/mMenuWidth;//Content的縮放比例1~0.7float rightScale=scale*0.3f+0.7f;//Menu的透明度變化0~1float leftAlpha=1.0f-scale;//Menu的縮放變化0.3-1.0float leftScale=1.0f-scale*0.7f;//mContent設定縮放中心ViewHelper.setPivotX(mContent,0);ViewHelper.setPivotY(mContent,mContent.getHeight()/2);//mContent進行縮放ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);/* * 對mMenu進行縮放和設定透明度 * */ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, leftAlpha);}

就實現了這種效果

這兩天我也嘗試著進行矩形翻轉的效果  模擬器上成功了 在真機上就不行了  就不帖上了 感覺浪費了好多時間  o(︶︿︶)o 唉

關於qqv6.2.3的側拉效果是

我們僅僅要降低mMenu的x座標的位移量就能實現  代碼例如以下

@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);ViewHelper.setTranslationX(mMenu, l*0.6f);}

效果

這幾個動畫 可能在別人看來非常easy  我想了好久啊啊  一天半的光陰啊啊 萬惡的矩陣切換。，。~~NN、DFAGDAJFHJK

看到qq才想起來 今天是我生日  都不敢想它  今年才大二就這麼大了 o(︶︿︶)o 唉

生日快樂。

參考：慕課網課程  qq5.0側滑菜單

android:QQ多種側滑菜單的實現