• 目前側(cè)滑菜單已廣泛應(yīng)用于各大應(yīng)用棍弄，這一菜單形式簡潔明了倚喂，深受用戶的喜愛墨状。在谷歌官方推出 DrawerLayout 之前，開發(fā)者大都通過 SlidingMenu 開源庫來實現(xiàn)這一功能柑爸。而現(xiàn)在 DrawerLayout 被谷歌包含在了 android-support-v4.jar 這個包下，可以讓開發(fā)者更簡單方便的實現(xiàn)側(cè)滑菜單這一功能盒音。
• Google I/O 2013Android更新了Support庫表鳍，Support Library包中實現(xiàn)了側(cè)滑菜單效果的控件---drawerLayout馅而，支持創(chuàng)建 Navigation Drawer（導(dǎo)航抽屜）模式。
• drawerLayout其實是一個布局控件进胯，跟LinearLayout等控件是一種東西用爪，但是drawerLayout帶有滑動的功能。只要按照drawerLayout的規(guī)定布局方式寫完布局胁镐，就能有側(cè)滑的效果偎血。
• drawerLayout分為側(cè)邊菜單和主內(nèi)容區(qū)兩部分，側(cè)邊菜單可以根據(jù)手勢展開與隱藏（drawerLayout自身特性）盯漂，主內(nèi)容區(qū)的內(nèi)容可以隨著菜單的點(diǎn)擊而變化（這需要使用者自己實現(xiàn)）颇玷。這個東西主要的原理就是左邊是一個ListView（抽屜菜單），右邊是一個FrameLayout.(用來顯示頁面的主要內(nèi)容)就缆。
• 在需要抽屜菜單的界面帖渠，用DrawerLayout 作為界面根控件。在DrawerLayout里面第一個View為當(dāng)前界面主內(nèi)容竭宰；第二個和第三個View為抽屜菜單內(nèi)容空郊。如果當(dāng)前界面只需要一個抽屜菜單，則第三個View可以省略
• 具體可參考以下鏈接切揭，官方的開發(fā)頁是：
  Android Navigation Drawer Design ：
  http://developer.android.com/design/patterns/navigation-drawer.html
  Android Navigation Drawer 教程：
  https://developer.android.com/training/implementing-navigation/nav-drawer.html(包含官方Demo的實例 大家也可以自己下載看一下)

接下來附上完整的drawerLayout的例子狞甚，來源于官方網(wǎng)站的demo

Activity：

package com.example.android.navigationdrawerexample;
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.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
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 DrawerLayout mDrawerLayout;
 private ListView mDrawerList;
 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 = (DrawerLayout) findViewById(R.id.drawer_layout);
 mDrawerList = (ListView) findViewById(R.id.left_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
 mDrawerList.setAdapter(new ArrayAdapter<String>(this,
 R.layout.drawer_list_item, mPlanetTitles));
 mDrawerList.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 drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
 menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
 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
 mDrawerList.setItemChecked(position, true);
 setTitle(mPlanetTitles[position]);
 mDrawerLayout.closeDrawer(mDrawerList);
 }
 @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;
 }
 }
}

Xml
activity_main.xml

<android.support.v4.widget.DrawerLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

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

 <ListView
 android:id="@+id/left_drawer"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

fragment_planet.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/image"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#000000"
 android:gravity="center"
 android:padding="32dp" />

drawer_list_item.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/text1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textAppearance="?android:attr/textAppearanceListItemSmall"
 android:gravity="center_vertical"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:textColor="#fff"
 android:background="?android:attr/activatedBackgroundIndicator"
 android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

注意的點(diǎn)：

1. activity_main.xml中主內(nèi)容區(qū)的布局代碼要放在側(cè)滑菜單布局的前面,這可以幫助DrawerLayout判斷誰是側(cè)滑菜單，誰是主內(nèi)容區(qū)廓旬；側(cè)滑菜單的部分的布局（這里是ListView）可以設(shè)置layout_gravity屬性哼审，如果為"start" 即為從左往右調(diào)用菜單，如果為"end" 即為從右往左調(diào)用菜單孕豹。

2. 我們看到很多使用drawerLayout的代碼中都同時使用了Fragment涩盾，這會造成誤解，以為使用drawerLayout必須用到Fragment励背，其實這是錯誤的春霍，使用Fragment是因為在側(cè)滑菜單被點(diǎn)擊的時候，主內(nèi)容區(qū)如果內(nèi)容比較復(fù)雜叶眉，用Fragment去填充會更容易终畅，如果你的主內(nèi)容區(qū)只是一個簡單的字符串，只想在不同菜單點(diǎn)擊的時候更新一下字符串的內(nèi)容竟闪，我覺得沒必要用Fragment离福。不過官方的例子其實中，F(xiàn)ragment所做的就是更新字符串內(nèi)容這么簡單炼蛤。

**3.側(cè)邊菜單其實只是一個普通的View妖爷，一般里面裝的是ListView，看起來就像菜單，他完全可以是一個button絮识，textView等等绿聘。雖然稱為菜單，但跟Activity的菜單形式是兩碼事次舌，Activity的菜單只需要在資源文件中定義好熄攘，就能按照固定的形式顯示出來。而drawerLayout的側(cè)邊菜單顯示成什么樣完全是取決于你自己彼念，同樣點(diǎn)擊事件也完全由你自己去寫挪圾。在點(diǎn)擊側(cè)邊菜單選項的時候我們往往需要隱藏菜單來顯示整個菜單對應(yīng)的內(nèi)容。DrawerLayout.closeDrawer方法用于隱藏側(cè)邊菜單逐沙，DrawerLayout.openDrawer方法用于展開側(cè)邊菜單哲思。如下代碼 **

mDrawerList.setAdapter(new ArrayAdapter<String>(this,
 R.layout.drawer_list_item, mPlanetTitles));
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
/* 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
 mDrawerList.setItemChecked(position, true);
 setTitle(mPlanetTitles[position]);
 mDrawerLayout.closeDrawer(mDrawerList);
}

4. view注意事項：

• 顯示界面主要內(nèi)容的View (上面的 FrameLayout ) 必須為DrawerLayout的第一個子View， 原因在于 XML 布局文件中的View順序為Android系統(tǒng)中的 z-ordering順序吩案，而抽屜必須出現(xiàn)在內(nèi)容之上棚赔。
• 顯示界面內(nèi)容的View寬度和高度設(shè)置為和父View一樣，原因在于當(dāng)抽屜菜單不可見的時候徘郭，界面內(nèi)容代表整個界面UI靠益。
• 抽屜菜單 (上面的 ListView) 必須使用android:layout_gravity屬性設(shè)置水平的 gravity值 .如果要支持 right-to-left (RTL，從右向左閱讀)語言 用 "start" 代替 "left" (當(dāng)在 RTL語言運(yùn)行時候残揉，菜單出現(xiàn)在右側(cè))捆毫。
• **抽屜菜單的寬度為 dp 單位而高度和父View一樣。抽屜菜單的寬度應(yīng)該不超過320dp冲甘，這樣用戶可以在菜單打開的時候看到部分內(nèi)容界面。 **

注意事項.jpg

最后途样，如果這篇文章對您有用處江醇，就給個喜歡吧~