Android SlidingMenu 开源项目实现侧拉菜单(一)

转自：http://blog.csdn.net/top_code/article/details/17354023

SlidingMenu简介

SlidingMenu的是一种比较新的设置界面或配置界面效果，在主界面左滑或者右滑出现设置界面，能方便的进行各种操作.目前有大量的应用都在使用这一效果。如Evernote、Google+、Foursquare等，国内的豌豆夹，人人，360手机助手等都使用SlidingMenu的界面方案。

SlidingMenu github项目地址：https://github.com/jfeinstein10/SlidingMenu

关于SlidingMenu Demo导入 这里不介绍了。
SlidingMenu 常用属性介绍
mSlidingMenu.setMode(SlidingMenu.LEFT);//设置左滑菜单
mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围，该设置为全屏区域都可以滑动
mSlidingMenu.setShadowDrawable(R.drawable.shadow);//设置阴影图片
mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
mSlidingMenu.setBehindWidth(400);//设置SlidingMenu菜单的宽度
mSlidingMenu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度
mSlidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上
mSlidingMenu.setMenu(R.layout.menu_layout);//设置menu的布局文件
mSlidingMenu.toggle();//动态判断自动关闭或开启SlidingMenu
mSlidingMenu.showMenu();//显示SlidingMenu
mSlidingMenu.showContent();//显示内容
mSlidingMenu.setOnOpenListener(onOpenListener);//监听SlidingMenu打开
关于关闭menu有两个监听，简单的来说，对于menu close事件，一个是when,一个是after 
mSlidingMenu.OnClosedListener(OnClosedListener);//监听SlidingMenu关闭时事件
mSlidingMenu.OnClosedListener(OnClosedListener);//监听SlidingMenu关闭后事件

mSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//设置左右都可以划出SlidingMenu菜单
mSlidingMenu.setSecondaryMenu(R.layout.frame_menu);//设置右侧菜单的布局文件

mSlidingMenu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

使用Fragment实现SlidingMenu
1.首先Activity继承自SlidingMenu包下的SlidingFragmentActivity
2. setContentView(R.layout.content_frame);//该layout为一个全屏的FrameLayout
3. setBehindContentView(R.layout.menu_frame);//设置SlidingMenu使用的布局，同样是一个全屏的FrameLayout

4.设置SlidingMenu左侧菜单的Fragment

frame_menu.xml

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/menu"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" />  

frame_content.xml

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/content"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" />  

布局文件准备好了后，新建一个 Activity来继承SlidingActivity(如果需要使用Support V4兼容包，请继承SlidingFragmentActivity)

[java]  view plain  copy

 

1. package com.example.slidingmenufragmenttest;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Fragment;  
5. import android.app.FragmentManager;  
6. import android.app.FragmentTransaction;  
7. import android.os.Bundle;  
8. import android.util.Log;  
9. import android.view.Menu;  
10. import android.view.MenuItem;  
11. import com.example.slidingmenufragmenttest.fragment.CommunityFragment;  
12. import com.example.slidingmenufragmenttest.fragment.FindPeopleFragment;  
13. import com.example.slidingmenufragmenttest.fragment.HomeFragment;  
14. import com.example.slidingmenufragmenttest.fragment.MenuFragment;  
15. import com.example.slidingmenufragmenttest.fragment.MenuFragment.SLMenuListOnItemClickListener;  
16. import com.example.slidingmenufragmenttest.fragment.PagesFragment;  
17. import com.example.slidingmenufragmenttest.fragment.PhotosFragment;  
18. import com.example.slidingmenufragmenttest.fragment.WhatsHotFragment;  
19. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
20. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;  
21.   
22. public class MainActivity extends SlidingActivity implements SLMenuListOnItemClickListener{  
23.     //  public class MainActivity extends SlidingFragmentActivity {  
24.       
25.     private SlidingMenu mSlidingMenu;  
26.       
27.     @SuppressLint("NewApi")  
28.     @Override  
29.     public void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.           
32.         setTitle("Home");  
33. //      setTitle(R.string.sliding_title);  
34.         setContentView(R.layout.frame_content);  
35.   
36.         //1、 set the Behind View  
37.         setBehindContentView(R.layout.frame_menu);  
38.           
39.         // customize the SlidingMenu  
40.         mSlidingMenu = getSlidingMenu();  
41. //      mSlidingMenu.setMenu(R.layout.frame_menu);  //设置左侧菜单的布局文件  
42. //      mSlidingMenu.setSecondaryMenu(R.layout.frame_menu); 设置右侧菜单的布局文件  
43.           
44. //      mSlidingMenu.setShadowWidth(5);  
45. //      mSlidingMenu.setBehindOffset(100);  
46.         mSlidingMenu.setShadowDrawable(R.drawable.drawer_shadow);//设置阴影图片  
47.         mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width); //设置阴影图片的宽度  
48.         mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset); //SlidingMenu划出时主页面显示的剩余宽度  
49.         mSlidingMenu.setFadeDegree(0.35f);  
50.         //设置SlidingMenu 的手势模式  
51.         //TOUCHMODE_FULLSCREEN 全屏模式，在整个content页面中，滑动，可以打开SlidingMenu  
52.         //TOUCHMODE_MARGIN 边缘模式，在content页面中，如果想打开SlidingMenu,你需要在屏幕边缘滑动才可以打开SlidingMenu  
53.         //TOUCHMODE_NONE 不能通过手势打开SlidingMenu  
54.         mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  
55.   
56.         //设置 SlidingMenu 内容  
57.         FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();  
58.         MenuFragment menuFragment = new MenuFragment();  
59.         fragmentTransaction.replace(R.id.menu, menuFragment);  
60.         fragmentTransaction.replace(R.id.content, new HomeFragment());  
61.         fragmentTransaction.commit();  
62.           
63.         //使用左上方icon可点，这样在onOptionsItemSelected里面才可以监听到R.id.home  
64.         getActionBar().setDisplayHomeAsUpEnabled(true);  
65.     }  
66.   
67.     @Override  
68.     public boolean onCreateOptionsMenu(Menu menu) {  
69.         // Inflate the menu; this adds items to the action bar if it is present.  
70.         getMenuInflater().inflate(R.menu.main, menu);  
71.         return true;  
72.     }  
73.       
74.     @Override  
75.     public boolean onOptionsItemSelected(MenuItem item) {  
76.         switch (item.getItemId()) {  
77.         case android.R.id.home:  
78.               
79.             toggle(); //动态判断自动关闭或开启SlidingMenu  
80. //          getSlidingMenu().showMenu();//显示SlidingMenu  
81. //          getSlidingMenu().showContent();//显示内容  
82.             return true;  
83.         }  
84.         return super.onOptionsItemSelected(item);  
85.     }  
86.   
87.     @SuppressLint("NewApi")  
88.     @Override  
89.     public void selectItem(int position, String title) {  
90.         // update the main content by replacing fragments    
91.         Fragment fragment = null;    
92.         switch (position) {    
93.         case 0:    
94.             fragment = new HomeFragment();    
95.             break;    
96.         case 1:    
97.             fragment = new FindPeopleFragment();    
98.             break;    
99.         case 2:    
100.             fragment = new PhotosFragment();    
101.             break;    
102.         case 3:    
103.             fragment = new CommunityFragment();    
104.             break;    
105.         case 4:    
106.             fragment = new PagesFragment();    
107.             break;    
108.         case 5:    
109.             fragment = new WhatsHotFragment();    
110.             break;    
111.         default:    
112.             break;    
113.         }    
114.         
115.         if (fragment != null) {    
116.             FragmentManager fragmentManager = getFragmentManager();  
117.             fragmentManager.beginTransaction()    
118.                     .replace(R.id.content, fragment).commit();    
119.             // update selected item and title, then close the drawer    
120.             setTitle(title);  
121.             mSlidingMenu.showContent();  
122.         } else {    
123.             // error in creating fragment    
124.             Log.e("MainActivity", "Error in creating fragment");    
125.         }    
126.     }  
127. }  

SlidingMenu 菜单Fragment

[java]  view plain  copy

 

1. package com.example.slidingmenufragmenttest.fragment;  
2.   
3. import java.util.ArrayList;  
4. import android.annotation.SuppressLint;  
5. import android.app.Activity;  
6. import android.app.Fragment;  
7. import android.content.res.TypedArray;  
8. import android.os.Bundle;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.view.ViewGroup;  
12. import android.widget.AdapterView;  
13. import android.widget.AdapterView.OnItemClickListener;  
14. import android.widget.ListView;  
15. import com.example.slidingmenufragmenttest.R;  
16. import com.example.slidingmenufragmenttest.adapter.NavDrawerListAdapter;  
17. import com.example.slidingmenufragmenttest.entity.NavDrawerItem;  
18.   
19. @SuppressLint("NewApi")  
20. public class MenuFragment extends Fragment implements OnItemClickListener {  
21.   
22.     private ListView mDrawerList;  
23.     private String[] mNavMenuTitles;  
24.     private TypedArray mNavMenuIconsTypeArray;  
25.     private ArrayList<NavDrawerItem> mNavDrawerItems;  
26.     private NavDrawerListAdapter mAdapter;  
27.     private SLMenuListOnItemClickListener mCallback;  
28.     private int selected = -1;  
29.   
30.     @Override  
31.     public void onAttach(Activity activity) {  
32.         try {  
33.             mCallback = (SLMenuListOnItemClickListener) activity;  
34.         } catch (ClassCastException e) {  
35.             throw new ClassCastException(activity.toString()  
36.                     + " must implement OnResolveTelsCompletedListener");  
37.         }  
38.         super.onAttach(activity);  
39.     }  
40.       
41.     @Override  
42.     public void onCreate(Bundle savedInstanceState) {  
43.         // TODO Auto-generated method stub  
44.         super.onCreate(savedInstanceState);  
45.     }  
46.       
47.     @Override  
48.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
49.             Bundle savedInstanceState) {  
50.           
51.         View rootView = inflater.inflate(R.layout.fragment_menu, null);  
52.           
53.         findView(rootView);  
54.           
55.         return rootView;  
56.     }  
57.   
58.     private void findView(View rootView) {  
59.           
60.         mDrawerList = (ListView) rootView.findViewById(R.id.left_menu);    
61.           
62.         mNavMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);    
63.         // nav drawer icons from resources    
64.         mNavMenuIconsTypeArray = getResources()    
65.                     .obtainTypedArray(R.array.nav_drawer_icons);    
66.                 
67.         mNavDrawerItems = new ArrayList<NavDrawerItem>();    
68.     
69.         // adding nav drawer items to array    
70.         // Home    
71.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[0], mNavMenuIconsTypeArray    
72.                 .getResourceId(0, -1)));    
73.         // Find People    
74.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[1], mNavMenuIconsTypeArray    
75.                 .getResourceId(1, -1)));    
76.         // Photos    
77.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[2], mNavMenuIconsTypeArray    
78.                 .getResourceId(2, -1)));    
79.         // Communities, Will add a counter here    
80.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[3], mNavMenuIconsTypeArray    
81.                 .getResourceId(3, -1), true, "22"));    
82.         // Pages    
83.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[4], mNavMenuIconsTypeArray    
84.                 .getResourceId(4, -1)));    
85.         // What's hot, We will add a counter here    
86.         mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[5], mNavMenuIconsTypeArray    
87.                 .getResourceId(5, -1), true, "50+"));    
88.     
89.         // Recycle the typed array    
90.         mNavMenuIconsTypeArray.recycle();    
91.             
92.         // setting the nav drawer list adapter    
93.         mAdapter = new NavDrawerListAdapter(getActivity(),    
94.                         mNavDrawerItems);    
95.         mDrawerList.setAdapter(mAdapter);    
96.         mDrawerList.setOnItemClickListener(this);    
97.           
98.         if(selected!=-1){  
99.             mDrawerList.setItemChecked(selected, true);    
100.             mDrawerList.setSelection(selected);    
101.         }else{  
102.             mDrawerList.setItemChecked(0, true);    
103.             mDrawerList.setSelection(0);    
104.         }  
105.     }  
106.   
107.     @Override  
108.     public void onItemClick(AdapterView<?> parent, View view, int position,  
109.             long id) {  
110.           
111.         // update selected item and title, then close the drawer    
112.         mDrawerList.setItemChecked(position, true);    
113.         mDrawerList.setSelection(position);    
114.           
115.         if(mCallback!=null){  
116.             mCallback.selectItem(position, mNavMenuTitles[position]);  
117.         }  
118.         selected = position;  
119.     }  
120.   
121.     /** 
122.      * 左侧菜单 点击回调接口 
123.      * @author FX_SKY 
124.      * 
125.      */  
126.     public interface SLMenuListOnItemClickListener{  
127.           
128.         public void selectItem(int position,String title);  
129.     }  
130. }  

内容Fragment

[java]  view plain  copy

 

1. package com.example.slidingmenufragmenttest.fragment;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Fragment;  
5. import android.os.Bundle;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. import com.example.slidingmenufragmenttest.R;  
11.   
12. @SuppressLint("NewApi")  
13. public class HomeFragment extends Fragment {  
14.       
15.     public HomeFragment(){}  
16.       
17.     @Override  
18.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
19.             Bundle savedInstanceState) {  
20.    
21.         View rootView = inflater.inflate(R.layout.fragment_home, container, false);  
22.            
23.         return rootView;  
24.     }  
25. }  

SlidingMenu 菜单List 点击事件是通过回调接口在MainActivity中执行的

[java]  view plain  copy

 

1. @Override  
2.     public void onItemClick(AdapterView<?> parent, View view, int position,  
3.             long id) {  
4.           
5.         // update selected item and title, then close the drawer    
6.         mDrawerList.setItemChecked(position, true);    
7.         mDrawerList.setSelection(position);    
8.           
9.         if(mCallback!=null){  
10.             mCallback.selectItem(position, mNavMenuTitles[position]);  
11.         }  
12.         selected = position;  
13.     }  
14.   
15.     /** 
16.      * 左侧菜单 点击回调接口 
17.      * @author FX_SKY 
18.      * 
19.      */  
20.     public interface SLMenuListOnItemClickListener{  
21.           
22.         public void selectItem(int position,String title);  
23.     }  

运行效果如下：

Demo下载地址：http://download.csdn.net/detail/fx_sky/6723039