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對象)