Android组件——使用DrawerLayout仿网易新闻v4 4侧滑菜单

转载请注明出处： http://blog.csdn.net/allen315410/article/details/42914501

概述

       今天这篇博客将记录一些关于DrawerLayout的基本用法，我想关于DrawerLayout的用法也许有不少不够了解，这也是比较正常的事情，因为DrawerLayout作为Android组件是Google后来在android中添加的，在android.support.v4包下。那么，DrawerLayout是一个怎么的组件呢？我们知道，当我们使用Android上各类App的时候，是不是注意过App主页上通常有一个“侧滑菜单”？关于侧滑菜单的实现，我在前面博客里有一些介绍，想多些了解的朋友请移步：

Android自定义控件——侧滑菜单

Android自定义控件——开源组件SlidingMenu的项目集成

      这里用“网易新闻”客户端v4.4的截图来说明一下，这个DrawerLayout抽屉式布局是什么样子的。

   

       好，大家已经看到了，网易新闻客户端效果很明显，当我们手指在屏幕左侧向右滑动时候，就会有一个抽屉式的菜单从左边弹出，并且是“悬浮”在主界面之上的，合理的利用了设备上有限的空间，同样手指在屏幕右侧向左滑动也会出现一个向左弹出的抽屉式菜单，用户体验效果还是不错的，在DrawerLayout出现之前，我们需要做侧滑菜单时，不得不自己实现一个或者使用Github上的开源的项目SlidingMenu，也许是Google也看到了SlidingMenu的强大之处，于是在Android的后期版本中添加了DrawerLayout来实现SlidingMenu同样功能的组件，而且为了兼容早期版本，将其添加在android,support.v4包下。

关于DrawerLayout的Training：http://developer.android.com/training/implementing-navigation/nav-drawer.html

关于DrawerLayout的API：http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

另外，我已经翻译过了Google的Training课程，地址是：http://blog.csdn.net/allen315410/article/details/42875231

效果预览

创建抽屉布局

      下面这个抽屉布局引用的是android.support.v4.DrawerLayout，类似于LineaLayout、RelativeLayout等布局一样定义，在DrawerLayout内部再定义3个布局，分别是管理主界面的FrameLayout，此布局用来展示界面切换的Fragment，下面是ListView，用来展示菜单列表，最后是一个RelativeLayout，用来展示右边的布局，布局代码如下：

 

[html]  view plain copy print ?

 

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.     <ListView  
12.         android:id="@+id/left_drawer"  
13.         android:layout_width="200dp"  
14.         android:layout_height="match_parent"  
15.         android:layout_gravity="start"  
16.         android:background="#111"  
17.         android:choiceMode="singleChoice"  
18.         android:divider="@android:color/transparent"  
19.         android:dividerHeight="0dp" />  
20.   
21.     <RelativeLayout  
22.         android:id="@+id/right_drawer"  
23.         android:layout_width="220dp"  
24.         android:layout_height="match_parent"  
25.         android:layout_gravity="end"  
26.         android:background="#111"  
27.         android:gravity="center_horizontal" >  
28.   
29.         <TextView  
30.             android:layout_width="wrap_content"  
31.             android:layout_height="wrap_content"  
32.             android:text="这是右边栏"  
33.             android:textColor="@android:color/white"  
34.             android:textSize="24sp" />  
35.     </RelativeLayout>  
36.   
37. </android.support.v4.widget.DrawerLayout>  

这个布局文件示范了一些重要的布局特征.

 

• 主要内容的视图(FrameLayout)必须是DrawLayout的第一个子元素, 因为导航抽屉是在主要内容视图的上面.
• 主要内容视图设置为匹配父视图的宽度和高度, 因为它代表了整个界面导航抽屉是隐藏的.
• 抽屉视图(ListView)必须指定其水平重力与android:layout_gravity属性。支持从右到左(RTL)语言,指定值与 "start" 代替 "left"(所以抽屉里出现在布局的右侧当布局是RTL时).这里将ListView设置为左边栏菜单，所以android:layout_gravity属性设置为“start”，将RelativeLayout设置为右边栏，设置android:layout_gravity属性为“end”.
• 抽屉视图指定其宽度用dp单位和高度匹配父视图。抽屉里的宽度不能超过320 dp, 所以用户总是可以看到主要内容视图的一部分。

 

初始化抽屉列表

       正如上述所讲，因为DrawerLayout里包含一个ListView作为左边栏侧滑菜单，所以我们需要首先初始化这个抽屉列表，并且为这个列表适配上数据，数据适配器使用的是最简单的ArrayAdapter，模拟数据被简单的定义在res/values/strings.xml里，如下：

 

[html]  view plain copy print ?

 

1. <string-array name="menu_array">  
2.        <item>Menu 1</item>  
3.        <item>Menu 2</item>  
4.        <item>Menu 3</item>  
5.        <item>Menu 4</item>  
6. </string-array>  

       在Java代码中，首先创建一个MainActivity继承了android.support.v4.app.FragmentActivity，因为后续中需要进行Fragment之间的切换。

 

 

[java]  view plain copy print ?

 

1. protected void onCreate(Bundle savedInstanceState) {  
2.     super.onCreate(savedInstanceState);  
3.     setContentView(R.layout.activity_main);  
4.         ......  
5.     // 初始化菜单列表  
6.     mMenuTitles = getResources().getStringArray(R.array.menu_array);  
7.     mMenuListView.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mMenuTitles));  
8.     mMenuListView.setOnItemClickListener(new DrawerItemClickListener());  
9.         ......  
10. }  

处理导航点击事件

      当用户选择了抽屉列表里面的一个Item时, 系统调用onItemClickListener上的onItemClick(), 给setOnItemClickListener()你在onItemClick()方法里面做什么,在下面的例子中, 选择每一个Item都会在主要内容的布局中插入一个不同的Fragment.并且将导航列表的内容传递给Fragment中显示出来，下面是部分代码：

 

[java]  view plain copy print ?

 

1. /** 
2.  * ListView上的Item点击事件 
3.  *  
4.  */  
5. private class DrawerItemClickListener implements ListView.OnItemClickListener {  
6.     @Override  
7.     public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
8.         selectItem(position);  
9.     }  
10. }  
11.   
12. /** 
13.  * 切换主视图区域的Fragment 
14.  *  
15.  * @param position 
16.  */  
17. private void selectItem(int position) {  
18.     // TODO Auto-generated method stub  
19.     Fragment fragment = new ContentFragment();  
20.     Bundle args = new Bundle();  
21.     switch (position) {  
22.     case 0:  
23.         args.putString("key", mMenuTitles[position]);  
24.         break;  
25.     case 1:  
26.         args.putString("key", mMenuTitles[position]);  
27.         break;  
28.     case 2:  
29.         args.putString("key", mMenuTitles[position]);  
30.         break;  
31.     case再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow