Android开发—Navigation Drawer(侧边栏菜单实现)

习来源：Navigation Draw描述： http://developer.android.com/design/patterns/navigation-drawer.html

                     如何创建一个Navigation Drawer： http://developer.android.com/training/implementing-navigation/nav-drawer.html

第一次翻译，只能是大概，很多都是自己的话，内容也不多，，.如果有错请指正，谢谢了。

首先，这个控件是现在比较主流的，在很多app上都可以看到，左侧滑出主菜单，既节省空间，又方便，而且炫酷。关于上面那篇描述可以仔细去阅读一下（我还没来得及仔细看。。。）

下面开始翻译：

========================================

Navigation drawer在屏幕的左侧，控件主要包含了app的主菜单功能，不过一般情况下是隐藏的，通过手势（左侧边缘向右滑动），或者点击最上面应用程序图标，即可显示该控件。

下面主要描述了如何利用DrawerLayout api来实现这个控件。

1， 创建一个Drawer Layout

首先，在你的layout中，需要申明一个DrawerLayout作为最外部的layout，而这个layout里面包含了一个屏幕的主视图（当控件隐藏时的layout显示）和另外一个视图（基本是listview），包含了主菜单的按钮。

下面举个例子：

[html]  view plain copy print ?

1. <android.support.v4.widget.DrawerLayout  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/drawer_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent">  
6.     <!-- The main content view -->  
7.     <FrameLayout  
8.         android:id="@+id/content_frame"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent" />  
11.     <!-- The navigation drawer -->  
12.     <ListView android:id="@+id/left_drawer"  
13.         android:layout_width="240dp"  
14.         android:layout_height="match_parent"  
15.         android:layout_gravity="start"  
16.         android:choiceMode="singleChoice"  
17.         android:divider="@android:color/transparent"  
18.         android:dividerHeight="0dp"  
19.         android:background="#111"/>  
20. </android.support.v4.widget.DrawerLayout>  

这里面的DrawerLayout包含了两个子控件：一个FrameLayout和一个ListView，这个listview就是包含主菜单按钮的。。

其中有几点比较重要的属性：

* 主视图（上述的FrameLayout）一定要是DrawerLayout的第一个子控件；并且最外层的控件一定要是DrawerLayout；

* 主视图的宽和高都设置为match_parent，因为Navigation drawer是隐藏的；

* 其中Navigation drawer 必须申明他的layout_gravity属性，为了支持从右向左滑动也可以出现的情况

（原文是：To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).

* drawer视图，上述的listview，需要申明dp为单位的实际宽度，最好也不要超过屏幕本身的宽度。这样不至于遮挡主视图。

2， 初始化Drawer List

即初始化主菜单的内容，在你的activity中，第一件事就是要做初始化navigation drawer list中的按钮内容。在这边我们一般都是ListView，所以我们需要用一个Adapter（arrayadapter或者simpleCursoradapter）来实现list中内容的显示。

下面代码是用了一个String array来初始化的：

[java]  view plain copy print ?

1. public class MainActivity extends Activity {  
2.     private String[] mPlanetTitles;  
3.     private DrawerLayout mDrawerLayout;  
4.     private ListView mDrawerList;  
5.     ...  
6.   
7.     @Override  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_main);  
11.   
12.         mPlanetTitles = getResources().getStringArray(R.array.planets_array);  
13.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
14.         mDrawerList = (ListView) findViewById(R.id.left_drawer);  
15.   
16.         // Set the adapter for the list view  
17.         mDrawerList.setAdapter(new ArrayAdapter<String>(this,  
18.                 R.layout.drawer_list_item, mPlanetTitles));  
19.         // Set the list's click listener  
20.         mDrawerList.setOnItemClickListener(new DrawerItemClickListener());  
21.   
22.         ...  
23.     }  
24. }  

接下来的事情就是实现DrawerItemClickListener（），来响应按钮事件。我会在下一篇博客中实现这个功能。

还是应该制定以下计划：这个星期的目标实现界面的调整，和拍照功能，以及拍照后照片存储等，希望在周日能完成。

下面是一张目前的实现图：

=======================

2014-12-14补充：

之前忘了一个步骤，就是标题的点击事件，以及标题中图片的设置等操作，需要通过如下代码实现：

[java]  view plain copy print ?

1. <strong style="font-size:18px;"> </strong><span style="font-size:12px;">mDrawerToggle = new ActionBarDrawerToggle(  
2.                 this,                  /* host Activity */  
3.                 mDrawerLayout,         /* DrawerLayout object */  
4.                 R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */  
5.                 R.string.drawer_open,  /* "open drawer" description for accessibility */  
6.                 R.string.drawer_close /* "close drawer" description for accessibility */  
7.                 ) {  
8.             public void onDrawerClosed(View view) {  
9.                 getActionBar().setTitle(mTitle);  
10.                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()  
11.             }  
12.   
13.             public void onDrawerOpened(View drawerView) {  
14.                 getActionBar().setTitle(mTitle);  
15.                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()  
16.             }  
17.         };  
18.         mDrawerLayout.setDrawerListener(mDrawerToggle);  
19. </span>  

其中mDrawerToggle是一个ActionBarDrawerToggle对象。

测试后好像还是不能点击标题，遗留这样的一个问题。