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

 

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

2015-02-03 11:56  25450人阅读  评论(12)  收藏  举报

  分类：

Android开发（1301）   Android UI（595） 

目录(?)[+]

转载请注明出处： 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

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

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

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

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 3:  
32.         args.putString("key", mMenuTitles[position]);  
33.         break;  
34.     default:  
35.         break;  
36.     }  
37.     fragment.setArguments(args); // FragmentActivity将点击的菜单列表标题传递给Fragment  
38.     FragmentManager fragmentManager = getSupportFragmentManager();  
39.     fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();  
40.   
41.     // 更新选择后的item和title，然后关闭菜单  
42.     mMenuListView.setItemChecked(position, true);  
43.     setTitle(mMenuTitles[position]);  
44.     mDrawerLayout.closeDrawer(mMenuListView);  
45. }  

开源material-menu的集成

       细心的朋友也许会发现“网易新闻”v4.4客户端主页左上角上有个菜单“动态”的菜单按钮，显示流程是这样的，当菜单没有打开时，显示“三”这样的三条横线，当菜单打开（无论左右菜单）时，会显示“<-”这样的按钮，不停的变化，这样的效果是不是有点绚丽啊？！了解过Android5.0的朋友，应该会知道这种效果是使用了Android5.0新推出的Material Design设计语言做出来的效果，那么该怎么模仿这个效果呢？不好意思，由于偷懒，我已经在牛牛的Github中找到了这样的效果——material-menu组件，该组件模拟出了Android5.0下的Material Design效果,注意的是该组件中使用了JackWharton的NineOldAndroids动画效果。

material-menu主页：https://github.com/balysv/material-menu

NineOldAndroids主页：https://github.com/JakeWharton/NineOldAndroids

关于material-menu的使用可以参考其主页上的Demo和说明，集成时需要下载NineOldAndroids导出jar集成到项目中。下面是我使用的部分代码：

[java]  view plain copy

1. protected void onCreate(Bundle savedInstanceState) {  
2.     super.onCreate(savedInstanceState);  
3.     setContentView(R.layout.activity_main);  
4.         ......  
5.     // 设置抽屉打开时，主要内容区被自定义阴影覆盖  
6.     mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);  
7.     // 设置ActionBar可见，并且切换菜单和内容视图  
8.     getActionBar().setDisplayHomeAsUpEnabled(true);  
9.     getActionBar().setHomeButtonEnabled(true);  
10.   
11.     mMaterialMenuIcon = new MaterialMenuIcon(this, Color.WHITE, Stroke.THIN);  
12.   
13.     mDrawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {  
14.   
15.         @Override  
16.         public void onDrawerSlide(View drawerView, float slideOffset) {  
17.             showView = drawerView;  
18.             if (drawerView == mMenuListView) {  
19.                 mMaterialMenuIcon.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW, isDirection_left ? 2 - slideOffset : slideOffset);  
20.             } else if (drawerView == right_drawer) {  
21.                 mMaterialMenuIcon.setTransformationOffset(MaterialMenuDrawable.AnimationState.BURGER_ARROW, isDirection_right ? 2 - slideOffset : slideOffset);  
22.             }  
23.         }  
24.   
25.         @Override  
26.         public void onDrawerOpened(android.view.View drawerView) {  
27.             if (drawerView == mMenuListView) {  
28.                 isDirection_left = true;  
29.             } else if (drawerView == right_drawer) {  
30.                 isDirection_right = true;  
31.             }  
32.         }  
33.   
34.         @Override  
35.         public void onDrawerClosed(android.view.View drawerView) {  
36.             if (drawerView == mMenuListView) {  
37.                 isDirection_left = false;  
38.             } else if (drawerView == right_drawer) {  
39.                 isDirection_right = false;  
40.                 showView = mMenuListView;  
41.             }  
42.         }  
43.     });  
44.         ......  
45.   
46. }  

此外，还需要关联一下meterial-menu的状态，需要覆盖Activity下的onPostCreate和onSaveInstanceState方法：

[java]  view plain copy

1. /** 
2. * 根据onPostCreate回调的状态，还原对应的icon state 
3. */  
4. @Override  
5. protected void onPostCreate(Bundle savedInstanceState) {  
6.     super.onPostCreate(savedInstanceState);  
7.     mMaterialMenuIcon.syncState(savedInstanceState);  
8. }  
9.   
10. /** 
11. * 根据onSaveInstanceState回调的状态，保存当前icon state 
12. */  
13. @Override  
14. protected void onSaveInstanceState(Bundle outState) {  
15.     mMaterialMenuIcon.onSaveInstanceState(outState);  
16.     super.onSaveInstanceState(outState);  
17. }  

添加ActionBar上的菜单按钮

      为了尽量模拟出“网易新闻”v4.4客户端主页，我也在标题栏右上角添加一个小图标，为了能在点击这个小图标的时候弹出右边栏菜单，实现方式很简单，关于ActionBar上添加导航的知识可以在csdn上搜到一些解释或者上Android开发者官网查看源文档，我这里首先简单的在res/menu下main.xml中这样定义一个：

[html]  view plain copy

1. <menu xmlns:android="http://schemas.android.com/apk/res/android" >  
2.   
3.     <item  
4.         android:id="@+id/action_personal"  
5.         android:icon="@drawable/action_personal"  
6.         android:orderInCategory="100"  
7.         android:showAsAction="always"  
8.         android:title="@string/action_personal"/>  
9.   
10. </menu>  

完成定义操作后，需要加载菜单布局：

[java]  view plain copy

1. /** 
2. * 加载菜单 
3. */  
4. @Override  
5. public boolean onCreateOptionsMenu(Menu menu) {  
6.     // Inflate the menu; this adds items to the action bar if it is present.  
7.     getMenuInflater().inflate(R.menu.main, menu);  
8.     return true;  
9. }  

标题栏导航点击事件处理

[java]  view plain copy

1. /** 
2. * 点击ActionBar上菜单 
3. */  
4. @Override  
5. public boolean onOptionsItemSelected(MenuItem item) {  
6.     int id = item.getItemId();  
7.     switch (id) {  
8.     case android.R.id.home:  
9.         if (showView == mMenuListView) {  
10.             if (!isDirection_left) { // 左边栏菜单关闭时，打开  
11.                 mDrawerLayout.openDrawer(mMenuListView);  
12.             } else {// 左边栏菜单打开时，关闭  
13.                 mDrawerLayout.closeDrawer(mMenuListView);  
14.             }  
15.         } else if (showView == right_drawer) {  
16.             if (!isDirection_right) {// 右边栏关闭时，打开  
17.                 mDrawerLayout.openDrawer(right_drawer);  
18.             } else {// 右边栏打开时，关闭  
19.                 mDrawerLayout.closeDrawer(right_drawer);  
20.             }  
21.         }  
22.         break;  
23.     case R.id.action_personal:  
24.         if (!isDirection_right) {// 右边栏关闭时，打开  
25.             if (showView == mMenuListView) {  
26.                 mDrawerLayout.closeDrawer(mMenuListView);  
27.             }  
28.             mDrawerLayout.openDrawer(right_drawer);  
29.         } else {// 右边栏打开时，关闭  
30.             mDrawerLayout.closeDrawer(right_drawer);  
31.         }  
32.         break;  
33.     default:  
34.         break;  
35.     }  
36.     return super.onOptionsItemSelected(item);  
37. }  

      这段的逻辑有点绕，事实上我做的是这样的，需要保证主界面上只能最多显示一个菜单布局，当左边的菜单布局展示时，此时打开右边菜单布局时，需要隐藏左边菜单布局；同样，如果右边的菜单布局已经在展示的时候，这时需要打开左边菜单布局，必须首先隐藏掉右边的菜单布局。为了判断当前即将显示或者关闭的是哪个布局，我在全局变量中定义了showView用来标记当前即将显示或者关闭的视图，如果showView==mMenuListView，说明左边菜单布局是即将被显示或隐藏的，这时进一步判断菜单是视图mMenuListView的是否已经显示的标记isDirection_left，来打开或者关闭左边视图菜单。
      同样的道理，如果当前即将显示或者隐藏的是右边导航菜单的话，我们需要进一步判断右边导航是否已经显示，从而进行相关打开或隐藏的决定。

      这里的逻辑似乎解释的有点乱，而且代码是分片段贴出来的，不利于理解，需要进一步理解的话，不妨继续看下面的部分，我已经贴出了所以的Java代码，注释也很详尽，可以方便理解，实在不行，还可以点击博客下方的下载链接，直接下载源码运行一下。

全部源码

[java]  view plain copy

1. public class MainActivity extends FragmentActivity {  
2.   
3.     /** DrawerLayout */  
4.     private DrawerLayout mDrawerLayout;  
5.     /** 左边栏菜单 */  
6.     private ListView mMenuListView;  
7.     /** 右边栏 */  
8.     private RelativeLayout right_drawer;  
9.     /** 菜单列表 */  
10.     private String[] mMenuTitles;  
11.     /** Material Design风格 */  
12.     private MaterialMenuIcon mMaterialMenuIcon;  
13.     /** 菜单打开/关闭状态 */  
14.     private boolean isDirection_left = false;  
15.     /** 右边栏打开/关闭状态 */  
16.     private boolean isDirection_right = false;  
17.     private View showView;  
18.   
19.     @Override  
20.     protected void onCreate(Bundle savedInstanceState) {  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.activity_main);  
23.   
24.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
25.         mMenuListView = (ListView) findViewById(R.id.left_drawer);  
26.         right_drawer = (RelativeLayout) findViewById(R.id.right_drawer);  
27.         this.showView = mMenuListView;  
28.   
29.         // 初始化菜单列表  
30.         mMenuTitles = getResources().getStringArray(R.array.menu_array);  
31.         mMenuListView.setAdapter(new ArrayAdapter<String>(this,  
32.                 R.layout.drawer_list_item, mMenuTitles));  
33.         mMenuListView.setOnItemClickListener(new DrawerItemClickListener());  
34.   
35.         // 设置抽屉打开时，主要内容区被自定义阴影覆盖  
36.         mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,  
37.                 GravityCompat.START);  
38.         // 设置ActionBar可见，并且切换菜单和内容视图  
39.         getActionBar().setDisplayHomeAsUpEnabled(true);  
40.         getActionBar().setHomeButtonEnabled(true);  
41.   
42.         mMaterialMenuIcon = new MaterialMenuIcon(this, Color.WHITE, Stroke.THIN);  
43.         mDrawerLayout.setDrawerListener(new DrawerLayoutStateListener());  
44.   
45.         if (savedInstanceState == null) {  
46.             selectItem(0);  
47.         }  
48.   
49.     }  
50.   
51.     /** 
52.      * ListView上的Item点击事件 
53.      *  
54.      */  
55.     private class DrawerItemClickListener implements  
56.             ListView.OnItemClickListener {  
57.         @Override  
58.         public void onItemClick(AdapterView<?> parent, View view, int position,  
59.                 long id) {  
60.             selectItem(position);  
61.         }  
62.     }  
63.   
64.     /** 
65.      * DrawerLayout状态变化监听 
66.      */  
67.     private class DrawerLayoutStateListener extends  
68.             DrawerLayout.SimpleDrawerListener {  
69.         /** 
70.          * 当导航菜单滑动的时候被执行 
71.          */  
72.         @Override  
73.         public void onDrawerSlide(View drawerView, float slideOffset) {  
74.             showView = drawerView;  
75.             if (drawerView == mMenuListView) {// 根据isDirection_left决定执行动画  
76.                 mMaterialMenuIcon.setTransformationOffset(  
77.                         MaterialMenuDrawable.AnimationState.BURGER_ARROW,  
78.                         isDirection_left ? 2 - slideOffset : slideOffset);  
79.             } else if (drawerView == right_drawer) {// 根据isDirection_right决定执行动画  
80.                 mMaterialMenuIcon.setTransformationOffset(  
81.                         MaterialMenuDrawable.AnimationState.BURGER_ARROW,  
82.                         isDirection_right ? 2 - slideOffset : slideOffset);  
83.             }  
84.         }  
85.   
86.         /** 
87.          * 当导航菜单打开时执行 
88.          */  
89.         @Override  
90.         public void onDrawerOpened(android.view.View drawerView) {  
91.             if (drawerView == mMenuListView) {  
92.                 isDirection_left = true;  
93.             } else if (drawerView == right_drawer) {  
94.                 isDirection_right = true;  
95.             }  
96.         }  
97.   
98.         /** 
99.          * 当导航菜单关闭时执行 
100.          */  
101.         @Override  
102.         public void onDrawerClosed(android.view.View drawerView) {  
103.             if (drawerView == mMenuListView) {  
104.                 isDirection_left = false;  
105.             } else if (drawerView == right_drawer) {  
106.                 isDirection_right = false;  
107.                 showView = mMenuListView;  
108.             }  
109.         }  
110.     }  
111.   
112.     /** 
113.      * 切换主视图区域的Fragment 
114.      *  
115.      * @param position 
116.      */  
117.     private void selectItem(int position) {  
118.         Fragment fragment = new ContentFragment();  
119.         Bundle args = new Bundle();  
120.         switch (position) {  
121.         case 0:  
122.             args.putString("key", mMenuTitles[position]);  
123.             break;  
124.         case 1:  
125.             args.putString("key", mMenuTitles[position]);  
126.             break;  
127.         case 2:  
128.             args.putString("key", mMenuTitles[position]);  
129.             break;  
130.         case 3:  
131.             args.putString("key", mMenuTitles[position]);  
132.             break;  
133.         default:  
134.             break;  
135.         }  
136.         fragment.setArguments(args); // FragmentActivity将点击的菜单列表标题传递给Fragment  
137.         FragmentManager fragmentManager = getSupportFragmentManager();  
138.         fragmentManager.beginTransaction()  
139.                 .replace(R.id.content_frame, fragment).commit();  
140.   
141.         // 更新选择后的item和title，然后关闭菜单  
142.         mMenuListView.setItemChecked(position, true);  
143.         setTitle(mMenuTitles[position]);  
144.         mDrawerLayout.closeDrawer(mMenuListView);  
145.     }  
146.   
147.     /** 
148.      * 点击ActionBar上菜单 
149.      */  
150.     @Override  
151.     public boolean onOptionsItemSelected(MenuItem item) {  
152.         int id = item.getItemId();  
153.         switch (id) {  
154.         case android.R.id.home:  
155.             if (showView == mMenuListView) {  
156.                 if (!isDirection_left) { // 左边栏菜单关闭时，打开  
157.                     mDrawerLayout.openDrawer(mMenuListView);  
158.                 } else {// 左边栏菜单打开时，关闭  
159.                     mDrawerLayout.closeDrawer(mMenuListView);  
160.                 }  
161.             } else if (showView == right_drawer) {  
162.                 if (!isDirection_right) {// 右边栏关闭时，打开  
163.                     mDrawerLayout.openDrawer(right_drawer);  
164.                 } else {// 右边栏打开时，关闭  
165.                     mDrawerLayout.closeDrawer(right_drawer);  
166.                 }  
167.             }  
168.             break;  
169.         case R.id.action_personal:  
170.             if (!isDirection_right) {// 右边栏关闭时，打开  
171.                 if (showView == mMenuListView) {  
172.                     mDrawerLayout.closeDrawer(mMenuListView);  
173.                 }  
174.                 mDrawerLayout.openDrawer(right_drawer);  
175.             } else {// 右边栏打开时，关闭  
176.                 mDrawerLayout.closeDrawer(right_drawer);  
177.             }  
178.             break;  
179.         default:  
180.             break;  
181.         }  
182.         return super.onOptionsItemSelected(item);  
183.     }  
184.   
185.     /** 
186.      * 根据onPostCreate回调的状态，还原对应的icon state 
187.      */  
188.     @Override  
189.     protected void onPostCreate(Bundle savedInstanceState) {  
190.         super.onPostCreate(savedInstanceState);  
191.         mMaterialMenuIcon.syncState(savedInstanceState);  
192.     }  
193.   
194.     /** 
195.      * 根据onSaveInstanceState回调的状态，保存当前icon state 
196.      */  
197.     @Override  
198.     protected void onSaveInstanceState(Bundle outState) {  
199.         mMaterialMenuIcon.onSaveInstanceState(outState);  
200.         super.onSaveInstanceState(outState);  
201.     }  
202.   
203.     /** 
204.      * 加载菜单 
205.      */  
206.     @Override  
207.     public boolean onCreateOptionsMenu(Menu menu) {  
208.         // Inflate the menu; this adds items to the action bar if it is present.  
209.         getMenuInflater().inflate(R.menu.main, menu);  
210.         return true;  
211.     }  
212.   
213. }  

源码请在这里下载