Android之DrawerLayout实现ViewPager+左右侧边栏

Android在V4包中提供了DrawerLayout布局来实现侧边栏的效果，代替了之前总是用第三方库实现的方法。

关于DrawerLayout网上的介绍也很多，今天我们来实现一个基于DrawerLayout实现的Demo:

框架结构：

内容区域是ViewPager，里边包含Fragment，通过FragmentPageAdapter来与ViewPager关联。

侧边栏我们用的是LinearLayout布局，当然，也可以用ListView等其他布局代替。

 

实现过程中遇到的一些问题记录在了Android侧边栏DrawerLayout实现问题笔记，大家可以参考下。

 

先上效果图：

内容区域：

该界面是一个只包含TextView的Fragment嵌套在ViewPager中可以左右滑动，具体扩展可以根据自己的需求。

 

左侧边栏： 右侧边栏：

  

左侧边栏呼出方式：

1.通过自带的从左侧滑出

2.通过DrawerLayout与ActionBar相关联，由ActionBar左上角按钮打开/隐藏

右侧边栏呼出方式：

默认的从右侧滑出

 

项目结构：

 

这里只介绍一些关键的文件：

主布局文件activity_main.xml：

 

[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.     <!-- 包含主要内容的 view -->  
7.   
8.     <android.support.v4.view.ViewPager  
9.         android:id="@+id/content"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent" />  
12.   
13.     <!-- navigation drawer(左边抽屉式导航) -->  
14.   
15.     <include  
16.         android:id="@+id/include_list"  
17.         android:layout_width="320dp"  
18.         android:layout_height="match_parent"  
19.         android:layout_gravity="start"  
20.         layout="@layout/left_menu"  
21.         android:background="@android:color/holo_blue_bright" />  
22.   
23.     <!-- navigation drawer(右边抽屉式导航) -->  
24.   
25.     <LinearLayout  
26.         android:id="@+id/right_menu"  
27.         android:layout_width="320dp"  
28.         android:layout_height="match_parent"  
29.         android:layout_gravity="end"  
30.         android:background="@android:color/holo_orange_dark"  
31.         android:orientation="vertical" >  
32.     </LinearLayout>  
33.   
34. </android.support.v4.widget.DrawerLayout>  

DrawerLayout布局结构：

 

第一层Viewpager为主内容区域，位于Z轴最低端，被左右侧边栏呼出时覆盖。

第二层include的LinearLayout为左侧边栏

第三层LinearLayout为右侧边栏

注意，侧边栏要实现以下属性：

 1.android:layout_width="320dp" 由于侧边栏不需要覆盖整个屏幕，Android文档建议最大宽度不超过320dp

 2.android:layout_gravity="start" 或者android:layout_gravity="end" 分别对应左右侧边栏

 

主Activity MainActivity.Java:

 

[java] view plain copy

1. public class MainActivity extends FragmentActivity {  
2.     private DrawerLayout drawerLayout;  
3.     private ActionBarDrawerToggle drawerToggle;  
4.     private LinearLayout layout;  
5.     private ViewPager pager;  
6.     private List<Fragment> list = new ArrayList<Fragment>();  
7.   
8.     @Override  
9.     protected void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.activity_main);  
12.         initView();  
13.   
14.     }  
15.   
16.     @Override  
17.     public boolean onCreateOptionsMenu(Menu menu) {  
18.         // Inflate the menu; this adds items to the action bar if it is present.  
19.         getMenuInflater().inflate(R.menu.main, menu);  
20.         return true;  
21.     }  
22.   
23.     private void initView() {  
24.         // TODO Auto-generated method stub  
25.         drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
26.         layout = (LinearLayout) findViewById(R.id.include_list);  
27.         TextView textView = (TextView) layout.findViewById(R.id.text1);  
28.         textView.setText("Item1");  
29.         pager = (ViewPager) findViewById(R.id.content);  
30.   
31.         FragmenAddr fragmenAddr = new FragmenAddr();  
32.         FragmenFriend fragmenFriend = new FragmenFriend();  
33.         FragmenSetting fragmenSetting = new FragmenSetting();  
34.         FragmenWeixin fragmenWeixin = new FragmenWeixin();  
35.         list.add(fragmenWeixin);  
36.         list.add(fragmenAddr);  
37.         list.add(fragmenSetting);  
38.         list.add(fragmenFriend);  
39.   
40.         pager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  
41.   
42.             @Override  
43.             public int getCount() {  
44.                 // TODO Auto-generated method stub  
45.                 return list.size();  
46.             }  
47.   
48.             @Override  
49.             public Fragment getItem(int arg0) {  
50.                 // TODO Auto-generated method stub  
51.                 return list.get(arg0);  
52.             }  
53.         });  
54.   
55.         // 设置ActionBarDrawerToggle与DrawerLayout通过setDrawerListener相关联  
56.         drawerToggle = new ActionBarDrawerToggle(this, drawerLayout,  
57.                 R.drawable.ic_drawer, R.string.action_settings,  
58.                 R.string.hello_world) {  
59.             @Override  
60.             public void onDrawerOpened(View drawerView) {  
61.                 super.onDrawerOpened(drawerView);  
62.                 // getActionBar().setTitle("已打开");  
63.                 invalidateOptionsMenu();  
64.             }  
65.   
66.             @Override  
67.             public void onDrawerClosed(View drawerView) {  
68.                 super.onDrawerClosed(drawerView);  
69.                 // getActionBar().setTitle("已关闭");  
70.                 invalidateOptionsMenu();  
71.             }  
72.         };  
73.   
74.         drawerLayout.setDrawerListener(drawerToggle);  
75.   
76.         // 为ActionBar左上角图标加上一个返回箭头的图标  
77.         getActionBar().setDisplayHomeAsUpEnabled(true);  
78.         // 使左上角图标可以点击  
79.         getActionBar().setHomeButtonEnabled(true);  
80.         // true:显示左上角图标 false:不显示图标，只显示一个标题  
81.         getActionBar().setDisplayShowHomeEnabled(false);  
82.     }  
83.   
84.     /* 
85.      * 动态显示ActionBar时候由invalidateOptionsMenu()方法调用 
86.      */  
87.     @Override  
88.     public boolean onPrepareOptionsMenu(Menu menu) {  
89.         boolean drawerOpen = drawerLayout.isDrawerOpen(layout);  
90.         menu.findItem(R.id.action_settings).setVisible(!drawerOpen);  
91.         return super.onPrepareOptionsMenu(menu);  
92.     }  
93.   
94.     /* 
95.      * 不常用的Activity生命周期方法。在start()和onRestoreInstanceState()后执行。 
96.      * 用于Activity初始化完成后最后执行的方法 
97.      */  
98.     @Override  
99.     protected void onPostCreate(Bundle savedInstanceState) {  
100.         // TODO Auto-generated method stub  
101.         super.onPostCreate(savedInstanceState);  
102.         drawerToggle.syncState();  
103.     }  
104.   
105.     @Override  
106.     public boolean onOptionsItemSelected(MenuItem item) {  
107.         // TODO Auto-generated method stub  
108.         if (drawerToggle.onOptionsItemSelected(item)) {  
109.             return true;  
110.         }  
111.         return super.onOptionsItemSelected(item);  
112.     }  
113.   
114. }  

 

 

ActionBarDrawerToggle类为DrawerLayout侧边栏与ActionBar相关联的工具类。

ActionBarDrawerToggle 的作用：
1.改变android.R.id.home返回图标。
2.Drawer拉出、隐藏，带有android.R.id.home动画效果。
3.监听Drawer拉出、隐藏。

绑定的时候需要调用DrawerLayout的setDrawerListener(ActionBarDrawerToggle对象)

转载于:https://my.oschina.net/u/2263251/blog/880162