Android侧滑菜单DrawerLayout(抽屉布局)实现

应用场景：

            由于侧滑菜单有更好的用户体验效果，所以更多的App使用侧滑抽屉式菜单列表，如网易客户端、百度影音、爱奇艺等等。至此，侧滑菜单有了更多的使用需求。

知识点介绍：

        实现侧滑菜单功能的方法有很多，如果开源的项目SlidingMenu，下载地址为https://github.com/jfeinstein10/SlidingMenu。该开源项目依赖于另一个开源项目ActionBarSherlock，下载地址为https://github.com/JakeWharton/ActionBarSherlock。这种实现方式，读者可以平时有时间自行研究一下。本例主要介绍android-support-v4.jar提供的支持，android.support.v4.widget.DrawerLayout，可兼容低版本的系统。

使用方式：

第一步：新建测试项目DrawerLayout。
第二步：编写相关的布局文件，主界面布局文件activity_main.xml。

[html]  view plain  copy

 print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context=".MainActivity" >  
7.     <android.support.v4.widget.DrawerLayout  
8.         android:id="@+id/drawer_layout"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:background="@android:color/white" >  
12.         <FrameLayout  
13.             android:id="@+id/fragment_layout"  
14.             android:layout_width="match_parent"  
15.             android:layout_height="match_parent"  
16.             android:background="@android:color/white" >  
17.             <TextView  
18.                 android:layout_width="match_parent"  
19.                 android:layout_height="wrap_content"  
20.                 android:gravity="center"  
21.                 android:text="主内容界面" />  
22.         </FrameLayout>  
23.         <!--   
24.         android:layout_gravity="start" 侧滑菜单在左边  
25.         android:layout_gravity="start" 侧滑菜单在右边  
26.          -->  
27.         <LinearLayout  
28.             android:id="@+id/menu_layout"  
29.             android:layout_width="180dp"  
30.             android:layout_height="match_parent"  
31.             android:layout_gravity="start"  
32.             android:background="@android:color/white"  
33.             android:orientation="vertical" >  
34.             <ImageView  
35.                 android:layout_width="match_parent"  
36.                 android:layout_height="wrap_content"  
37.                 android:gravity="center"  
38.                 android:src="@drawable/ic_launcher" />  
39.             <TextView  
40.                 android:layout_width="match_parent"  
41.                 android:layout_height="wrap_content"  
42.                 android:gravity="center"  
43.                 android:text="侧拉菜单"  
44.                 android:textColor="@android:color/black" />  
45.             <!--  
46.             android:cacheColorHint="#FFFFFF"  
47.             解决Android ListView 滚动 Item 背景变黑的问题  
48.             -->  
49.             <ListView  
50.                 android:id="@+id/menu_listView"  
51.                 android:layout_width="match_parent"  
52.                 android:layout_height="match_parent"  
53.                 android:cacheColorHint="#FFFFFF" >  
54.             </ListView>  
55.         </LinearLayout>  
56.     </android.support.v4.widget.DrawerLayout>  
57. </LinearLayout>  

Fragment类的布局文件layout_first.xml，layout_next.xml。

【layout_first.xml】

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <TextView   
7.         android:layout_width="match_parent"  
8.         android:layout_height="20dp"  
9.         android:text="FirstFragment"  
10.         android:id="@+id/textTextView"/>  
11.     <LinearLayout android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:orientation="vertical">  
14.         <ListView android:layout_height="wrap_content"  
15.             android:layout_width="wrap_content"  
16.             android:cacheColorHint="#FFFFFF"  
17.             android:id="@+id/firstFragmentListView">  
18.         </ListView>  
19.     </LinearLayout>  
20. </LinearLayout>  

【layout_next.xml】

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <TextView   
7.         android:layout_height="wrap_content"  
8.         android:layout_width="match_parent"  
9.         android:text="NextFragment"/>  
10. </LinearLayout>  

ListView的ListItem的布局文件main_listitem.xml。

【main_listitem.xml】

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <TextView android:layout_width="match_parent"  
7.         android:layout_height="40dp"  
8.         android:id="@+id/menu"  
9.         android:textSize="20dp"  
10.         android:gravity="center_vertical"  
11.         android:text="加载中..."/>  
12. </LinearLayout>  

第二步：编写相关的java文件，FirstFragment.java、NextFragment、MainActivity.java、MenuListViewAdapter.java、DataBuiltUtils.java。
【FirstFragment.java】

[java]  view plain  copy

 print ?

1. import android.os.Bundle;  
2. import android.support.v4.app.Fragment;  
3. import android.view.LayoutInflater;  
4. import android.view.View;  
5. import android.view.View.OnClickListener;  
6. import android.view.ViewGroup;  
7. import android.widget.ListView;  
8. import android.widget.TextView;  
9. import android.widget.Toast;  
10. public class FirstFragment extends Fragment{  
11.     private TextView textView;  
12.     private ListView listView;   
13.       
14.     @Override  
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
16.     {  
17.         View layout = inflater.inflate(R.layout.layout_first, null);  
18.         textView = (TextView) layout.findViewById(R.id.textTextView);  
19.         textView.setOnClickListener(new OnClickListener() {  
20.               
21.             @Override  
22.             public void onClick(View arg0) {  
23.                 Toast.makeText(getActivity(), "FirstFragment", Toast.LENGTH_SHORT).show();  
24.             }  
25.         });  
26.         listView = (ListView) layout.findViewById(R.id.firstFragmentListView);  
27.         MenuListViewAdapter adapter = new MenuListViewAdapter(getActivity(), DataBuiltUtils.getFirstMapList());  
28.         listView.setAdapter(adapter);  
29.         return layout;  
30.     }  
31. }  

【NextFragment.java】

[java]  view plain  copy

 print ?

1. import android.os.Bundle;  
2. import android.support.v4.app.Fragment;  
3. import android.view.LayoutInflater;  
4. import android.view.View;  
5. import android.view.ViewGroup;  
6.   
7. public class NextFragment extends Fragment{  
8.       
9.     @Override  
10.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){  
11.         View layout = inflater.inflate(R.layout.layout_next, null);  
12.         return layout;  
13.     }  
14. }  

【MainActivity.java】

[java]  view plain  copy

 print ?

1. import java.util.ArrayList;  
2. import java.util.HashMap;  
3.   
4. import android.os.Bundle;  
5. import android.app.Activity;  
6. import android.content.Context;  
7. import android.support.v4.app.Fragment;  
8. import android.support.v4.app.FragmentActivity;  
9. import android.support.v4.app.FragmentTransaction;  
10. import android.support.v4.widget.DrawerLayout;  
11. import android.view.Menu;  
12. import android.view.View;  
13. import android.widget.AdapterView;  
14. import android.widget.ArrayAdapter;  
15. import android.widget.LinearLayout;  
16. import android.widget.ListView;  
17. import android.widget.RelativeLayout;  
18. import android.widget.AdapterView.OnItemClickListener;  
19.   
20. /** 
21.  * 抽屉效果 
22.  * DrawerLayout与Fragment的联用 
23.  * DrawerLayout相关： 
24.  * 1.一般内容层使用framelayout 
25.  * 2.slidingLayout需要设置一个layout_grative属性 
26.  *   文档建议使用android:layout_gravity="start" 
27.  */  
28. public class MainActivity extends FragmentActivity{  
29.      
30.     private DrawerLayout mDrawer_layout;  //抽屉式布局  
31.     private LinearLayout mMenu_layout;     
32.                        
33.     @Override  
34.     protected void onCreate(Bundle savedInstanceState){  
35.         super.onCreate(savedInstanceState);  
36.         setContentView(R.layout.activity_main);  
37.         mDrawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);  
38.         mMenu_layout = (LinearLayout) findViewById(R.id.menu_layout);  
39.         ListView menu_listview = (ListView) mMenu_layout.findViewById(R.id.menu_listView);  
40.         ArrayList<HashMap<String, String>> tempMapList = DataBuiltUtils.getMainMapList();  
41.         menu_listview.setAdapter(new MenuListViewAdapter( getApplicationContext(), tempMapList));  
42.         //菜单ListView设置监听事件  
43.         menu_listview.setOnItemClickListener(new DrawerItemClickListener());  
44.     }  
45.                        
46.     public class DrawerItemClickListener implements OnItemClickListener {  
47.           
48.         @Override  
49.         public void onItemClick(AdapterView<?> parent, View view, int position, long id){  
50.             FragmentTransaction ft = getSupportFragmentManager().beginTransaction();  
51.             Fragment fragment = null;  
52.             //根据item点击行号判断启用指定Fragment  
53.             switch (position){  
54.                 case 0:  
55.                     fragment = new FirstFragment();  
56.                     break;  
57.                 case 1:  
58.                     fragment = new NextFragment();  
59.                     break;  
60.                 default:  
61.                      fragment = new FirstFragment();  
62.                     break;  
63.             }  
64.             ft.replace(R.id.fragment_layout, fragment);  
65.             ft.commit();  
66.             mDrawer_layout.closeDrawer(mMenu_layout);//点击后关闭mMenu_layout  
67.         }  
68.     }  
69. }  

【MenuListViewAdapter.java】

[java]  view plain  copy

 print ?

1. import java.util.HashMap;  
2. import java.util.List;  
3. import java.util.Map;  
4.   
5. import android.content.Context;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.BaseAdapter;  
10. import android.widget.TextView;  
11.   
12. public class MenuListViewAdapter extends BaseAdapter {  
13.     private List<HashMap<String, String>> lists;  
14.     private LayoutInflater mInflater;  
15.     private Context mainContext;  
16.   
17.     public MenuListViewAdapter(Context context,  
18.             List<HashMap<String, String>> dataList) {  
19.         mInflater = LayoutInflater.from(context);  
20.         mainContext = context;  
21.         lists = dataList;  
22.     }  
23.   
24.     @Override  
25.     public int getCount() {  
26.         return lists.size();  
27.     }  
28.   
29.     @Override  
30.     public Object getItem(int position) {  
31.         return lists.get(position);  
32.     }  
33.   
34.     @Override  
35.     public long getItemId(int position) {  
36.         return position;  
37.     }  
38.   
39.     @Override  
40. public View getView(final int position, View convertView, ViewGroup parent) {  
41.         ViewHolder holder = null;  
42.         if (convertView == null) {  
43.             holder = new ViewHolder();  
44.             convertView = mInflater.inflate(R.layout.main_listitem, null);  
45.             holder.menu = (TextView) convertView.findViewById(R.id.menu);  
46.             convertView.setTag(holder);  
47.         } else {  
48.             holder = (ViewHolder) convertView.getTag();  
49.         }  
50.         // 设置背景色  
51.         // if(position%2==1){  
52.         // convertView.setBackgroundColor(Color.rgb(220, 220, 220));  
53.         // }else {  
54.         // convertView.setBackgroundColor(Color.rgb(255, 250, 250));  
55.         // }  
56.         if (lists.size() > 0) {  
57.             final Map<String, String> map = lists.get(position);  
58.             String number = (String) map.get("menu");  
59.             holder.menu.setText(number);  
60.         }  
61.         return convertView;  
62.     }  
63.   
64.     static class ViewHolder {  
65.         TextView   menu;    //菜单名称  
66.     }  
67. }  

【DataBuiltUtils.java】

[java]  view plain  copy

 print ?

1. import java.util.ArrayList;  
2. import java.util.HashMap;  
3.   
4. public class DataBuiltUtils {  
5.   
6.     public static ArrayList<HashMap<String,String>> getMainMapList(){  
7.         ArrayList<HashMap<String, String>> tempMapList = new ArrayList<HashMap<String,String>>();  
8.           
9.         for(int i=0;i<5;i++){  
10.             HashMap<String, String> tempMap = new HashMap<String, String>();  
11.             tempMap.put("menu", "菜单【"+(i+1)+"】");  
12.             tempMapList.add(tempMap);  
13.         }  
14.         return tempMapList;  
15.     }  
16.       
17.     public static ArrayList<HashMap<String,String>> getFirstMapList(){  
18.         ArrayList<HashMap<String, String>> tempMapList = new ArrayList<HashMap<String,String>>();  
19.           
20.         for(int i=0;i<5;i++){  
21.             HashMap<String, String> tempMap = new HashMap<String, String>();  
22.             tempMap.put("menu", "FirstFragment菜单【"+(i+1)+"】");  
23.             tempMapList.add(tempMap);  
24.         }  
25.         return tempMapList;  
26.     }  
27. }