Android DrawerLayout Plus 增强版抽屉菜单

版本：1.0 日期：2015/2/2 2015/2/3 2015/2/26 2015/2/27版权：©kince
一、概述
DrawerLayout是官方提供的侧滑菜单，相比SliddingMenu，它更加轻量级。默认情况下，DrawerLayout可以设置左侧或者右侧滑出菜单。如下，
xml布局：

<!--

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<com.sys.app.uikit.drawerlayoutplus.DrawerLayoutPlus xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent" >

    <!--
         As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions.
    -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--
         android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         The drawer is given a fixed width in dp and extends the full height of
         the container. A solid background is used for contrast
         with the content view.
    -->

    <!-- Left drawer -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

    <!-- Right drawer -->
    <ListView
        android:id="@+id/right_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:choiceMode="singleChoice" />

</com.sys.app.uikit.drawerlayoutplus.DrawerLayoutPlus>

Activity代码：

package com.sys.app.uikit.drawerlayoutplus;

import java.util.Locale;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.SearchManager;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {

     private DrawerLayoutPlus mDrawerLayout;
     private ListView mLeftDrawerList, mRightDrawerList;
     private ActionBarDrawerToggle mDrawerToggle;

     private CharSequence mDrawerTitle;
     private CharSequence mTitle;
     private String[] mPlanetTitles;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

          mTitle = mDrawerTitle = getTitle();
          mPlanetTitles = getResources().getStringArray(R.array.planets_array);
          mDrawerLayout = (DrawerLayoutPlus) findViewById(R.id.drawer_layout);
          mLeftDrawerList = (ListView) findViewById(R.id.left_drawer);
          mRightDrawerList = (ListView) findViewById(R.id.right_drawer);
          // set a custom shadow that overlays the main content when the drawer
          // opens
          mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
          // set up the drawer's list view with items and click listener
          mLeftDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles));
          mLeftDrawerList.setOnItemClickListener(new DrawerItemClickListener());
          mRightDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles));
          mRightDrawerList.setOnItemClickListener(new DrawerItemClickListener());

          // enable ActionBar app icon to behave as action to toggle nav drawer
          getActionBar().setDisplayHomeAsUpEnabled(true);
          getActionBar().setHomeButtonEnabled(true);

          // ActionBarDrawerToggle ties together the the proper interactions
          // between the sliding drawer and the action bar app icon
          mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */
          mDrawerLayout, /* DrawerLayout object */
          R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
          R.string.drawer_open, /* "open drawer" description for accessibility */
          R.string.drawer_close /* "close drawer" description for accessibility */
          ) {
               public void onDrawerClosed(View view) {
                    getActionBar().setTitle(mTitle);
                    invalidateOptionsMenu(); // creates call to
                                                       // onPrepareOptionsMenu()
               }

               public void onDrawerOpened(View drawerView) {
                    getActionBar().setTitle(mDrawerTitle);
                    invalidateOptionsMenu(); // creates call to
                                                       // onPrepareOptionsMenu()
               }
          };

          mDrawerLayout.setDrawerListener(mDrawerToggle);

          if (savedInstanceState == null) {
               selectItem(0);
          }
     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
          MenuInflater inflater = getMenuInflater();
          inflater.inflate(R.menu.main, menu);
          return super.onCreateOptionsMenu(menu);
     }

     /* Called whenever we call invalidateOptionsMenu() */
     @Override
     public boolean onPrepareOptionsMenu(Menu menu) {
          // If the nav drawer is open, hide action items related to the content
          // view
          boolean drawerLeftOpen = mDrawerLayout.isDrawerOpen(mLeftDrawerList);
          boolean drawerRightOpen = mDrawerLayout.isDrawerOpen(mRightDrawerList);
          menu.findItem(R.id.action_websearch).setVisible(!(drawerLeftOpen && drawerRightOpen));
          return super.onPrepareOptionsMenu(menu);
     }

     @Override
     public boolean onOptionsItemSelected(MenuItem item) {
          // The action bar home/up action should open or close the drawer.
          // ActionBarDrawerToggle will take care of this.
          if (mDrawerToggle.onOptionsItemSelected(item)) {
               return true;
          }
          // Handle action buttons
          switch (item.getItemId()) {
          case R.id.action_websearch:
               // create intent to perform web search for this planet
               Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
               intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
               // catch event that there's no activity to handle intent
               if (intent.resolveActivity(getPackageManager()) != null) {
                    startActivity(intent);
               } else {
                    Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();
               }
               return true;
          default:
               return super.onOptionsItemSelected(item);
          }
     }

     /* The click listner for ListView in the navigation drawer */
     private class DrawerItemClickListener implements ListView.OnItemClickListener {
          @Override
          public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               selectItem(position);
          }
     }

     private void selectItem(int position) {
          // update the main content by replacing fragments
          Fragment fragment = new PlanetFragment();
          Bundle args = new Bundle();
          args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
          fragment.setArguments(args);

          FragmentManager fragmentManager = getFragmentManager();
          fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

          // update selected item and title, then close the drawer
          mLeftDrawerList.setItemChecked(position, true);
          mRightDrawerList.setItemChecked(position, true);
          setTitle(mPlanetTitles[position]);
          mDrawerLayout.closeDrawer(mLeftDrawerList);
          mDrawerLayout.closeDrawer(mRightDrawerList);
     }

     @Override
     public void setTitle(CharSequence title) {
          mTitle = title;
          getActionBar().setTitle(mTitle);
     }

     /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */

     @Override
     protected void onPostCreate(Bundle savedInstanceState) {
          super.onPostCreate(savedInstanceState);
          // Sync the toggle state after onRestoreInstanceState has occurred.
          mDrawerToggle.syncState();
     }

     @Override
     public void onConfigurationChanged(Configuration newConfig) {
          super.onConfigurationChanged(newConfig);
          // Pass any configuration change to the drawer toggls
          mDrawerToggle.onConfigurationChanged(newConfig);
     }

     /**
     * Fragment that appears in the "content_frame", shows a planet
     */
     public static class PlanetFragment extends Fragment {
          public static final String ARG_PLANET_NUMBER = "planet_number";

          public PlanetFragment() {
               // Empty constructor required for fragment subclasses
          }

          @Override
          public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
               View rootView = inflater.inflate(R.layout.fragment_planet, container, false);
               int i = getArguments().getInt(ARG_PLANET_NUMBER);
               String planet = getResources().getStringArray(R.array.planets_array)[i];

               int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()), "drawable",
                         getActivity().getPackageName());
               ((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);
               getActivity().setTitle(planet);
               return rootView;
          }
     }
}

效果如图所示：




图-1 如果换一个需求，是从下面弹出菜单，那是用系统的DrawerLayout是做不到的，不过可以通过修改其源码来达到目的。
二、分析 DrawerLayout作为一个父类容器，可以包含子View，而子View又可以分为内容区域和菜单区域。内容区域占据整个屏幕大小，菜单区域默认在屏幕内侧。DrawerLayout继承于ViewGroup，必然需要重写onLayout()方法，那么在设置子View位置的时候，内容区域默认直接显示出来，菜单区域默认隐藏在屏幕内侧。DrawerLayout的onLayout()代码如下：

@Override
     protected void onLayout(boolean changed, int l, int t, int r, int b) {
           mInLayout = true ;
           final int width = r - l;
           final int childCount = getChildCount();
           for (int i = 0; i < childCount; i++) {
               final View child = getChildAt(i);

               if (child.getVisibility() == GONE) {
                    continue;
              }

               final LayoutParams lp = (LayoutParams) child.getLayoutParams();

               if (isContentView(child)) {
                   child.layout(lp. leftMargin, lp.topMargin, lp.leftMargin + child.getMeasuredWidth(),
                             lp. topMargin + child.getMeasuredHeight());
              } else { // Drawer, if it wasn't onMeasure would have thrown an
                              // exception.
                    final int childWidth = child.getMeasuredWidth();
                    final int childHeight = child.getMeasuredHeight();
                    int childLeft;

                    final float newOffset;
                    if (checkDrawerViewAbsoluteGravity(child, Gravity.LEFT)) {
                        childLeft = -childWidth + ( int) (childWidth * lp.onScreen);
                        newOffset = ( float) (childWidth + childLeft) / childWidth;
                   } else { // Right; onMeasure checked for us.
                        childLeft = width - ( int) (childWidth * lp.onScreen);
                        newOffset = ( float) (width - childLeft) / childWidth;
                   }
               
                    final boolean changeOffset = newOffset != lp.onScreen;

                    final int vgrav = lp.gravity & Gravity.VERTICAL_GR***ITY_MASK ;
                    switch (vgrav) {
                    default:
                    case Gravity.TOP : {
                        child.layout(childLeft, lp.topMargin, childLeft + childWidth, lp.topMargin + childHeight);
                         break;
                   }

                    case Gravity.BOTTOM : {
                         final int height = b - t;
                        child.layout(childLeft, height - lp.bottomMargin - child.getMeasuredHeight(), childLeft + childWidth,
                                  height - lp.bottomMargin);
                         break;
                   }

                    case Gravity.CENTER_VERTICAL : {
                         final int height = b - t;
                         int childTop = (height - childHeight) / 2;

                         // Offset for margins. If things don't fit right because of
                         // bad measurement before, oh well.
                         if (childTop < lp.topMargin ) {
                             childTop = lp. topMargin;
                        } else if (childTop + childHeight > height - lp.bottomMargin ) {
                             childTop = height - lp.bottomMargin - childHeight;
                        }
                        child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
                         break;
                   }
                   }

                    if (changeOffset) {
                        setDrawerViewOffset(child, newOffset);
                   }

                    final int newVisibility = lp.onScreen > 0 ? VISIBLE : INVISIBLE ;
                    if (child.getVisibility() != newVisibility) {
                        child.setVisibility(newVisibility);
                   }
              }
          }
           mInLayout = false ;
           mFirstLayout = false ;
     }

在onLayout方法中可以通过参数获取之前测量DrawerLayout的宽度和高度，然后获取DrawerLayout里面子View的个数，通过一个for循环来设置子View的位置。可以看到先是设置内容区域的位置，然后是菜单区域，后者通过设置offset来达到隐藏菜单的目的。所以这个地方是关键，如果想要在屏幕下方弹出菜单，那么就需要修改菜单的显示位置,让它置于屏幕下方。 菜单View位置更改好，接着是手势操作的部分。在DrawerLayout中，是通过ViewDragHelper这个类来实现View的拖拽。首先它声明了左右菜单的帮助类和回调，

private final ViewDragHelper mLeftDragger ;
      private final ViewDragHelper mRightDragger ;
      private final ViewDragCallback mLeftCallback ;
      private final ViewDragCallback mRightCallback ;

以及左右锁和阴影，

private int mLockModeLeft ;
      private int mLockModeRight ;

      private Drawable mShadowLeft ;
      private Drawable mShadowRight ;

在构造方法里面初始化了帮助类和回调，

mLeftCallback = new ViewDragCallback(Gravity.LEFT );
           mRightCallback = new ViewDragCallback(Gravity.RIGHT );

           mLeftDragger = ViewDragHelper.create( this , TOUCH_SLOP_SENSITIVITY , mLeftCallback );
           mLeftDragger .setEdgeTrackingEnabled(ViewDragHelper. EDGE_LEFT);
           mLeftDragger .setMinVelocity(minVel);
           mLeftCallback .setDragger(mLeftDragger );

           mRightDragger = ViewDragHelper.create( this , TOUCH_SLOP_SENSITIVITY , mRightCallback );
           mRightDragger .setEdgeTrackingEnabled(ViewDragHelper. EDGE_RIGHT);
           mRightDragger .setMinVelocity(minVel);
           mRightCallback .setDragger(mRightDragger );

在设置阴影效果，进行一个左右的判断

public void setDrawerShadow(Drawable shadowDrawable, @EdgeGravity int gravity) {
           /*
           * TODO Someone someday might want to set more complex drawables here.
           * They're probably nuts, but we might want to consider registering
           * callbacks, setting states, etc. properly.
           */

           final int absGravity = GravityCompat.getAbsoluteGravity(gravity, ViewCompat.getLayoutDirection( this));
           if ((absGravity & Gravity. LEFT) == Gravity. LEFT) {
               mShadowLeft = shadowDrawable;
              invalidate();
          }
           if ((absGravity & Gravity. RIGHT) == Gravity.RIGHT ) {
               mShadowRight = shadowDrawable;
              invalidate();
          }
     }

还有菜单锁，

public void setDrawerLockMode(@LockMode int lockMode) {
          setDrawerLockMode(lockMode, Gravity. LEFT );
          setDrawerLockMode(lockMode, Gravity. RIGHT );
     }

也是进行左右的判断，

public void setDrawerLockMode(@LockMode int lockMode, @EdgeGravity int edgeGravity) {
           final int absGravity = GravityCompat.getAbsoluteGravity(edgeGravity, ViewCompat.getLayoutDirection( this));
           if (absGravity == Gravity. LEFT) {
               mLockModeLeft = lockMode;
          } else if (absGravity == Gravity. RIGHT) {
               mLockModeRight = lockMode;
          }
           if (lockMode != LOCK_MODE_UNLOCKED) {
               // Cancel interaction in progress
               final ViewDragHelper helper = absGravity == Gravity.LEFT ? mLeftDragger : mRightDragger ;
              helper.cancel();
          }
           switch (lockMode) {
           case LOCK_MODE_LOCKED_OPEN :
               final View toOpen = findDrawerWithGravity(absGravity);
               if (toOpen != null) {
                   openDrawer(toOpen);
              }
               break ;
           case LOCK_MODE_LOCKED_CLOSED :
               final View toClose = findDrawerWithGravity(absGravity);
               if (toClose != null) {
                   closeDrawer(toClose);
              }
               break ;
           // default: do nothing
          }
     }

不光是上面的方法，DrawerLayout中还有很多方法也都是这样。都是对Gravity的判断，判断是左侧菜单还是右侧，所以如果要改成从底部弹出菜单，那么把相应的值替换为Gravity.BOTTOM即可。当然还要注意在替换的过程中的一些逻辑问题，以免有纰漏。比如offset之前是左右，现在要改成上下，因此数值要重新计算。还有变量的命名等，之前是left或者right，现在改为bottom等等。 修改后运行效果如下：