#爱加密杯#Navigation Drawer详解-Google推出的用来取代Sliding Menu的控件（三）

上一讲我们已经实现了在2.x的系统上同时使用ActionBar和Navigation Drawer，但是我们看一下google play的交互：
 

我们点击右上角的那个向下的小箭头，Navigation Drawer就会跳转到另外一个界面：
 

这个怎么实现呢？

不知道大家还记不记得我第一讲的内容：
用来显示屏幕主体内容的视图一般是 FrameLayout （运行的时候，会被一个 Fragment 填充），用来显示导航抽屉的视图一般是一个 ListView ，如下所示

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>

复制代码

上面的布局说明了导航抽屉的布局一些非常重要的特点：

1 、显示主体内容的视图必须是 DrawerLayout 下的第一个子视图，因为抽屉视图必须在主体内容视图的上方（意味着 DrawerLayout 是一个以 z 轴来布局的控件）

2 、显示主体内容的视图必须设置为匹配父视图的高和宽，因为当抽屉视图隐藏的时候显示主体内容的视图代表了整个用户界面

3 、抽屉视图的 layout_gravity 属性值需为 “start” ， To support right-to-left (RTL) languages,specify the value with "start" insteadof "left" (so the drawer appears on the right when thelayout is RTL)

4 、抽屉视图的宽度不宜匹配父视图，应当适当的窄一点，这样就能在抽屉显示的时候还能看到主体内容视图的一部分

我们只要遵循这几条规则，就能写出自定义的ui了，下面我模仿google play，写了一个简单的layout：

1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     android:id="@+id/drawer_layout"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent" >
   
5. 
   
6.     <FrameLayout
   
7.         android:id="@+id/content_frame"
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="match_parent" />
   
10. 
    
11.     <RelativeLayout
    
12.         android:id="@+id/drawerLayout"
    
13.         android:layout_width="240dp"
    
14.         android:layout_height="match_parent"
    
15.         android:background="#111"
    
16.         android:layout_gravity="start"
    
17.         >
    
18.         <RelativeLayout
    
19.             android:id="@+id/titleLayout"
    
20.             android:layout_width="match_parent"
    
21.                 android:layout_height="48dp"
    
22.                 android:layout_alignParentTop="true"
    
23.                 android:background="@color/abs__background_holo_dark"
    
24.             >
    
25.             <ImageView
    
26.                 android:id="@+id/exchange_image"
    
27.                         android:layout_width="wrap_content"
    
28.                         android:layout_height="wrap_content"
    
29.                         android:layout_centerVertical="true"
    
30.                         android:layout_alignParentRight="true"
    
31.                         android:background="@drawable/ic_more_arrow_down_dark"
    
32.                             android:layout_marginRight="10dp"
    
33.                 />
    
34.         </RelativeLayout>
    
35.         <RelativeLayout
    
36.             android:id="@+id/content_layout"
    
37.             android:layout_below="@id/titleLayout"
    
38.                 android:layout_width="match_parent"
    
39.                 android:layout_height="match_parent"
    
40.             ></RelativeLayout>
    
41.     </RelativeLayout>
    
42. 
    
43. </android.support.v4.widget.DrawerLayout>

复制代码

布局中id为 drawerLayout 的布局，就是我们要加载的抽屉视图，大家注意要在这个layout中添加这条属性 android:layout_gravity="start"。


控制抽屉视图的跳转

我们首先给抽屉视图添加一个fragment：

1.                 FragmentManager fm = getSupportFragmentManager();
   
2.                 FragmentTransaction ft = fm.beginTransaction();
   
3.                 ft.replace(R.id.content_layout, new DrawerFragment1(this));
   
4.                 ft.commit();

复制代码

然后监听抽屉视图标题栏的点击事件：

1.                 RelativeLayout titleLayout = (RelativeLayout) findViewById(R.id.titleLayout);
   
2.                 titleLayout.setOnClickListener(this);

复制代码

我们在监听到用户的点击事件以后，替换fragment：

1.                         if(showFirst) {
   
2.                                 exchange_image.setBackgroundResource(R.drawable.ic_up_white_16);
   
3.                                 
   
4.                                 FragmentManager fm = getSupportFragmentManager();
   
5.                                 FragmentTransaction ft = fm.beginTransaction();
   
6.                                 ft.replace(R.id.content_layout, new DrawerFragment2());
   
7.                                 ft.commit();
   
8.                         } else {
   
9.                                 exchange_image.setBackgroundResource(R.drawable.ic_more_arrow_down_dark);
   
10.                                 
    
11.                                 FragmentManager fm = getSupportFragmentManager();
    
12.                                 FragmentTransaction ft = fm.beginTransaction();
    
13.                                 ft.replace(R.id.content_layout, new DrawerFragment1(MainActivity.this));
    
14.                                 ft.commit();
    
15.                         }
    
16.                         showFirst = !showFirst;

复制代码

下面是运行的截图：
 


点击右上角向下的小箭头以后：

 


这个时候就弹出了另外一个fragment。

源码下载：

本帖隐藏的内容

  workspace.rar (4.02 MB, 下载次数: 17)