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

在這篇文章中寫了

自定義HorizontalScrollView實作qq側滑菜單

然而這個菜單效果隻是普通的側拉效果 我們還可以實作抽屜式側滑菜單 就像這樣

第一種效果

第二種效果

第三種效果

第四種效果

其它代碼都和上篇文章相同，隻是在MyHorizontalScrollView.class重寫onScrollChanged這個方法

第一種的側滑效果代碼很簡單

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

通過setTranslationX方法設定mMenu的x坐标偏移量 其中的l=getScrollX()

設定完這些就能實作這樣的側滑效果

第二種側滑效果代碼和第一種類似，隻不過是對mMenu的x坐标的偏移量再增加1倍，使得mMenu菜單仿佛從右邊出來一樣

@Override
  protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    // TODO Auto-generated method stub
    super.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;      

代碼如下

@Override
  protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    // TODO Auto-generated method stub
    super.onScrollChanged(l, t, oldl, oldt);
    //scale 1~0的變化率
    float scale = l*1.0f/mMenuWidth;
    //Content的縮放比例1~0.7
    float 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的效果不同  會發現 進行了縮放 和透明

代碼如下

@Override
  protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    // TODO Auto-generated method stub
    super.onScrollChanged(l, t, oldl, oldt);
    //scale 1~0的變化率
    float scale = l*1.0f/mMenuWidth;
    //Content的縮放比例1~0.7
    float rightScale=scale*0.3f+0.7f;
    //Menu的透明度變化0~1
    float leftAlpha=1.0f-scale;
    //Menu的縮放變化0.3-1.0
    float 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坐标的偏移量就能實作  代碼如下

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

效果如圖：

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

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

生日快樂。

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