Android开源组件SlidingMenu的基本使用方法和SlidingMenuDemo

本文链接：https://blog.csdn.net/daitu_liang/article/details/48627651

1.下载开源SlidingMenu，去Github下载 https://github.com/jfeinstein10/SlidingMenu。

SlidingMenu是一个强大的侧边栏导航框架，自己去codeKK看了源码分析才有了更多的收获：http://codekk.com/open-source-project-analysis/detail/Android/huxian99/SlidingMenu%20源码解析，这个网站codeKK有许多开源项目的源码解析，是个很不错的学习资源，很感谢这些大牛的奉献。力推这个网站codeKK。

此文章只是自己学习笔记记录，看这个大牛写的，自己加之整理学习了下，感兴趣的看他写的，http://blog.csdn.net/yangyu20121224/article/details/9255829。

1>SlidingMenu功能介绍

SlidingMenu 是一个强大的侧边栏导航框架，主要特点如下：
(1) 侧边栏可以是一个 Fragment，包含任何 View
(2) 使用简单方便，支持左滑和右滑等
(3) 自定义侧边栏显示动画

2>总体设计
SlidingMenu 总体由三个主要的类组成。
(1) SlidingMenu 继承自 RelativeLayout，对外暴露 API 给用户，同时在添加 CustomViewAbove 和。 CustomViewBehind
(2) CustomViewAbove 继承自 ViewGroup，主要用来处理触摸屏事件。
(3) CustomViewBehind 继承自 ViewGroup，主要用来配置参数，显示侧边栏的 Menu 部分。

2.下载SlidingMenu直接导入eclipse，自己再新建Android项目，取名SlidingMenuDemo，之后，右击SlidingMenuDemo-->properties->Android->Add(下面)关联SlidingMenu->Apply->OK，就行,参考下图1. 注意关联后，将SlidingMenuDemo项目中lib下的android-support-v4.jar删除，因为SlidingMenu以及存android-support-v4.jar，否则后面在MainActivity.java会报错。

3. 效果图如下，可以左右滑动，

4.项目类以及布局有关介绍，如下图：

5.具体代码：

1>left_function_fragment.xml 为左侧菜单栏布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myapp="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#6B6B6B"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/logout_layout"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16.0dip"
            android:layout_marginTop="34.0dip"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_num2" />

            <ImageView
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30.0dip"
                android:layout_marginRight="30.0dip"
                android:src="@drawable/ic_num4" />

            <ImageView
                android:id="@+id/btn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_num5" />
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="13.0dip"
            android:text="一个吊车尾改变世界的故事"
            android:textColor="#ffffff"
            android:textSize="11.0sp" />
         <TextView
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#ff272727" />
    </LinearLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="3" >
        <com.example.slidingdemo.MyListView
            android:id="@+id/list_itme"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
    </ScrollView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="10.0dip"
        android:layout_marginLeft="19.0dip"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15.0dip"
            android:text="设置"
            android:textColor="#ffffff"
            android:textSize="15.0sp" />

        <TextView
            android:id="@+id/setting1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15.0dip"
            android:text="其他"
            android:textColor="#ffffff"
            android:textSize="15.0sp" />
    </LinearLayout>

</LinearLayout>

2>main_content_frame.xml 为存放右侧菜单内容的Fragment布局

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

3>menu_frame.xml 是用来存放菜单的Fragment

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

4>content_item.xml为菜单内容listview的item

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="50dp"  
    android:orientation="horizontal" >  
    <ImageView  
        android:id="@+id/row_icon"  
        android:layout_width="50dp"  
        android:layout_height="50dp"  
        android:padding="10dp"  
        android:src="@drawable/ic_launcher" />  
    <TextView  
        android:id="@+id/row_title"  
        android:layout_width="0dp"  
        android:layout_height="match_parent"  
        android:layout_weight="1"  
        android:gravity="center_vertical"  
        android:padding="10dp"  
        android:text="Medium Text111"  
        android:textColor="@android:color/white"
        android:background="@android:color/holo_blue_light"
        android:textAppearance="@android:style/TextAppearance.Medium" />  
</LinearLayout>

5>list.xml为右边每个菜单内容中的Listview布局

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/list"  
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</ListView>

6>menu_item.xml为菜单栏中MyListView中的item

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="50dp"  
    android:orientation="horizontal" >  
  
    <ImageView  
        android:id="@+id/row_icon"  
        android:layout_width="50dp"  
        android:layout_height="50dp"  
        android:padding="10dp"  
        android:src="@drawable/ic_launcher" />  
  
    <TextView  
        android:id="@+id/row_title"  
        android:layout_width="0dp"  
        android:layout_height="match_parent"  
        android:layout_weight="1"  
        android:gravity="center_vertical"  
        android:padding="10dp"  
        android:text="Medium Text111"  
        android:textColor="@android:color/white"
        android:textAppearance="@android:style/TextAppearance.Medium" />  
  
</LinearLayout>

在values下的dimens.xml添加了这个2个大小属性：

<dimen name="shadow_width">20dp</dimen>
<dimen name="slidingmenu_offset">40dp</dimen>

接着是类

1> MenuListFragment.java是左侧菜单类：

package com.example.slidingdemo;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MenuListFragment extends Fragment {
	private MyListView listview;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.left_function_fragment, null);
		listview=(MyListView)view.findViewById(R.id.list_itme);
		return view;
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		SampleAdapter adapter = new SampleAdapter(getActivity());  

		adapter.add(new SampleItem("菜单 List 鸣人", R.drawable.ic_num6));  
		adapter.add(new SampleItem("菜单 List 佐助", R.drawable.ic_num2));  
		adapter.add(new SampleItem("菜单 List 卡卡西", R.drawable.ic_num3));  
		adapter.add(new SampleItem("菜单 List 我爱罗", R.drawable.ic_num7));  
		adapter.add(new SampleItem("菜单 List 自来也", R.drawable.ic_num4));  
		adapter.add(new SampleItem("菜单 List 四代", R.drawable.ic_num5));  
		listview.setAdapter(adapter);  
		listview.setOnItemClickListener(new OnItemClickListener() {
			Fragment newContent=null;
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				// TODO Auto-generated method stub
				switch (position) {  
				case 0:  
					newContent = new MyFragment0();  
					break;  
				case 1:  
					newContent = new MyFragment1();  
					break;  
				case 2:  
					newContent = new MyFragment2();  
					break;  
				case 3:  
					newContent = new MyFragment3();  
					break;  

				}
				if (newContent != null) {  
					//切换Fragment
					switchFragment(newContent);  
				}  
			}
		});
	}
	
	protected void switchFragment(Fragment newContent) {
		// TODO Auto-generated method stub
		if (getActivity() == null) {  
			return;  
		}  
		if (getActivity() instanceof MainActivity) {  
			MainActivity fragChange = (MainActivity) getActivity();  
			fragChange.switchContent(newContent);  
		}  
	}
	private class SampleItem {  
		public String tag;  
		public int iconRes;  
		public SampleItem(String tag, int iconRes) {  
			this.tag = tag;   
			this.iconRes = iconRes;  
		}  
	}  


	public class SampleAdapter extends ArrayAdapter<SampleItem> {  

		public SampleAdapter(Context context) {  
			super(context, 0);  
		}  

		public View getView(int position, View convertView, ViewGroup parent) {  
			if (convertView == null) {  
				convertView = LayoutInflater.from(getContext()).inflate(R.layout.menu_item, null);  
			}  
			ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);  
			icon.setImageResource(getItem(position).iconRes);  
			TextView title = (TextView) convertView.findViewById(R.id.row_title);  
			title.setText(getItem(position).tag);  
			return convertView;  
		}  

	}  
}

2> MainActivity.java对SlidingMenu进行相关属性配置：

package com.example.slidingdemo;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;

import android.graphics.Canvas;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Interpolator;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends SlidingFragmentActivity {

	private SlidingMenu menu;
	private CanvasTransformer transfor;
	private Fragment mContent;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_content_frame);
		//设置标题  
		setTitle("客户端");  
		//设置是否能够使用ActionBar来滑动  
		setSlidingActionBarEnabled(true);  

		//设置是否显示Home图标按钮  
		getActionBar().setDisplayHomeAsUpEnabled(true);  
		getActionBar().setIcon(R.drawable.ic_num1);  

		//初始化滑动效果
		initAnimation();
		//初始化滑动菜单  
		initSlidingMenu(savedInstanceState);  
	}
	/** 
	 * 初始化动画效果 
	 */  
	private void initAnimation() {
		// TODO Auto-generated method stub
		transfor = new CanvasTransformer(){

			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {
				//canvas画布类；percentOpen：滑动菜单栏打开时的百分比值
				// TODO Auto-generated method stub
				//以为3种效果，任选一个进行测试
				//1.实现滑动时缩放的效果，左边缩下淡去，右边切入屏幕
				float scale = (float) (percentOpen*0.25 + 0.75);  
				canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);
				//2.实现收缩效果 
				//canvas.scale(percentOpen, 1, 0, 0);           

				//3.实现菜单栏从下往上滑动效果
				// canvas.translate(0, canvas.getHeight() * (1 - interp.getInterpolation(percentOpen)));    
			}

		};
	}

	private static Interpolator interp = new Interpolator() {  
		@Override  
		public float getInterpolation(float t) {  
			t -= 1.0f;  
			return t * t * t + 1.0f;  
		}         
	};  
	/** 
	 * 初始化滑动菜单 
	 */  
	private void initSlidingMenu(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		// 如果保存的状态不为空则得到之前保存的Fragment，否则实例化MyFragment  
		if(savedInstanceState!=null){
			mContent=getSupportFragmentManager().getFragment(savedInstanceState, "mContent");
		}
		if(mContent==null){
			mContent=new MyFragment0();
		}
		//设置主界面视图  
		setContentView(R.layout.main_content_frame);  
		getSupportFragmentManager().beginTransaction()
		.replace(R.id.content_frame, new MyFragment0()).commit();

		// 设置滑动菜单的视图界面  
		setBehindContentView(R.layout.menu_frame);
		getSupportFragmentManager().beginTransaction()
		.replace(R.id.menu_frame, new MenuListFragment()).commit();  


		// 设置滑动菜单的属性值  
		menu=getSlidingMenu();
		// 设置触摸屏幕的模式  
		menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		// 设置滑动阴影的宽度  
		menu.setShadowWidthRes(R.dimen.shadow_width);
		// 设置滑动阴影的图像资源 
		menu.setShadowDrawable(R.drawable.shadow);
		// 设置滑动菜单视图的宽度  
		menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
		// 设置渐入渐出效果的值  
		menu.setFadeDegree(0.45f);
		menu.setBehindScrollScale(0.0f);
		menu.setBehindCanvasTransformer(transfor);

	}

	/*
	 * 保存Fragment的状态
	 */
	@Override
	protected void onSaveInstanceState(Bundle outState) {
		// TODO Auto-generated method stub
		super.onSaveInstanceState(outState);
		getSupportFragmentManager().putFragment(outState, "mContent", mContent);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	@Override
	public void onBackPressed() {
		// TODO Auto-generated method stub
		super.onBackPressed();
		if(menu.isMenuShowing()){
			menu.showContent();
		}else{
			super.onBackPressed();
		}
	}
	/*
	 * 菜单按钮点击事件，通过点击ActionBar的Home图标按钮（顶部左边）来打开滑动菜单栏
	 */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// TODO Auto-generated method stub
		switch (item.getItemId()) {
		case android.R.id.home:
			toggle();
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
	/*
	 * 切换视图 
	 */
	public void switchContent(Fragment newContent) {
		// TODO Auto-generated method stub
		mContent = newContent;  
		getSupportFragmentManager().beginTransaction()  
		.replace(R.id.content_frame, newContent).commit();  
		getSlidingMenu().showContent();  
	}

}

3> MyListView .java重写listview：

package com.example.slidingdemo;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ListView;

/**
 * 重写ListView->实现Listview和ScrollView的滚动不冲突
 */
public class MyListView extends ListView {
  public MyListView(Context context) {
    super(context);
  }
  public MyListView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public MyListView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
        MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
  }

}

4> MyFragment0 .java是左侧菜单切换对应的内容界面： MyFragment1.java， MyFragment2.java， MyFragment3.java这三个一样，贴出一个代码，测试即可。

package com.example.slidingdemo;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MyFragment0 extends ListFragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.list, null);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
		 SampleAdapter adapter = new SampleAdapter(getActivity());  
	        for (int i = 0; i < 30; i++) {  
	            adapter.add(new SampleItem("内容 List 鸣人", R.drawable.ic_left));  
	        }  
	        setListAdapter(adapter);  
	}
	
	private class SampleItem {  
        public String tag;  
        public int iconRes;  
        public SampleItem(String tag, int iconRes) {  
            this.tag = tag;   
            this.iconRes = iconRes;  
        }  
    }  
	
	  public class SampleAdapter extends ArrayAdapter<SampleItem> {  
		  
	        public SampleAdapter(Context context) {  
	            super(context, 0);  
	        }  
	  
	        public View getView(int position, View convertView, ViewGroup parent) {  
	            if (convertView == null) {  
	                convertView = LayoutInflater.from(getContext()).inflate(R.layout.content_item, null);  
	            }  
	            ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);  
	            icon.setImageResource(getItem(position).iconRes);  
	            TextView title = (TextView) convertView.findViewById(R.id.row_title);  
	            title.setText(getItem(position).tag);  
	            return convertView;  
	        }  
	  
	    }  
}<span style="font-weight: bold;">
</span>

6.SlidingMenu相关配置属性说明：

//设置侧边, 必须为 LEFT(左边)，RIGHT(右边)，LEFT_RIGHT(左右两边)三者之一 public void setMode(int mode)

//设置触摸方式，必须为 TOUCHMODE_FULLSCREEN(全屏可触摸)，TOUCHMODE_MARGIN(边缘可触摸)，默认 48dp, TOUCHMODE_NONE(不可触摸)三者之一
public void setTouchModeAbove(int i)
// 根据资源文件 ID 设置阴影部分的 width
public void setShadowWidthRes(int resId)
// 根据资源文件 ID 设置阴影部分的效果
public void setShadowDrawable(int resId)
// 根据资源文件 ID 设置第二个侧边栏阴影部分的效果
public void setSecondaryShadowDrawable(int resId)
// 根据资源文件 ID 设置主界面距离屏幕的偏移量
public void setBehindOffsetRes(int resID)
// 设置 fade in 和 fade out 效果的值
public void setFadeDegree(float f)
// 设置滑动比例的值，范围为 0-1 之间
public void setBehindScrollScale(float f)
// 根据资源文件 ID 设置侧边栏布局
public void setMenu(int res)
// 根据 View 设置侧边栏布局
public void setMenu(View v)
// 根据资源文件 ID 设置第二个侧边栏布局
public void setSecondaryMenu(int res)
// 根据 View 设置第二个侧边栏布局
public void setSecondaryMenu(View v)
// 打开菜单
public void showMenu()
// 打开第二个菜单
public void showSecondaryMenu()
// SlidingMenu 的开关
public void toggle()
// 检查侧边栏是否打开
public boolean isMenuShowing()
// 检查第二个侧边栏是否打开
public boolean isSecondaryMenuShowing()

源码下载