Android 高仿QQ5.2雙向側滑菜單DrawerLayout實現源碼

Android 高仿QQ5.2雙向側滑菜單DrawerLayout實現源碼

Android 高仿QQ5.2雙向側滑菜單DrawerLayout實現源碼

左右側滑

 

1.首頁的實現

直接將DrawerLayout作為根布局，然後其內部第一個View為內容地區，第二個View為左側菜單，第三個View為右側側滑菜單，當前第三個是可選的。

布局：

 

 

代碼

 

package com.pcachy.drawerlayout;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.widget.DrawerLayout;import android.view.Gravity;import android.view.View;import android.view.Window;import com.nineoldandroids.view.ViewHelper;public class MainActivity extends FragmentActivity {private DrawerLayout mDrawerLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvents();}private void initView(){mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);}private void initEvents(){mDrawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {@Overridepublic void onDrawerSlide(View drawerView, float slideOffset) {// TODO Auto-generated method stubView mContent = mDrawerLayout.getChildAt(0);View mMenu = drawerView;float scale = 1 - slideOffset;float rightScale = 0.8f + scale * 0.2f;if (drawerView.getTag().equals(LEFT)){float leftScale = 1 - 0.3f * scale;ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));ViewHelper.setTranslationX(mContent,mMenu.getMeasuredWidth() * (1 - scale));ViewHelper.setPivotX(mContent, 0);ViewHelper.setPivotY(mContent,mContent.getMeasuredHeight() / 2);mContent.invalidate();ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);} else{ViewHelper.setTranslationX(mContent,-mMenu.getMeasuredWidth() * slideOffset);ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());ViewHelper.setPivotY(mContent,mContent.getMeasuredHeight() / 2);mContent.invalidate();ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);}}@Overridepublic void onDrawerOpened(View drawerView) {// TODO Auto-generated method stub}@Overridepublic void onDrawerClosed(View drawerView) {// TODO Auto-generated method stubmDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);}@Overridepublic void onDrawerStateChanged(int newState) {// TODO Auto-generated method stub}});}public void OpenRightMenu(View view){mDrawerLayout.openDrawer(Gravity.RIGHT);mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT);}}

2.左菜單和右菜單布局(左菜單和右菜單的布局和代碼隨便你怎麼寫，這裡是左菜單的例子)

 

 

 

1、為了類比QQ的右側菜單需要點擊才能出現，所以在初始化DrawerLayout的時候，使用了mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT);意思是只有編程才能將其彈出。然後在彈出以後，需要讓手勢可以滑動回去，所以在OpenRightMenu中又編寫了：mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.RIGHT); UNLOCK了一下。最後在onDrawerClosed回調中，繼續設定mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT)；

2、動畫效果動畫用了nineoldandroids，

3、setDrawerListener
通過代碼也能看出來，可以使用setDrawerListener監聽菜單的開啟與關閉等等。這裡對於當前操作是哪個菜單的判斷是通過TAG判斷的，我覺得使用gravity應該也能判斷出來