SlidingMenu 用法

现在做的Android项目大部分都要实现左右滑动菜单栏的功能,一般都是通过开源库SlidingMenu实现的。实现方法如下:

     (1)下载SlidingMenu库文件

     (2)在Eclipse中导入此库文件,具体方法我就不说了

     (3)新建Android项目

     (4)在项目中右键Properties->Android->Add->SlidingMenu库文件->OK;

     (5)在项目的libs文件夹中删除掉adroid-support-v4.jar文件,因为slidingMenu库中已包含,不删除会产生冲突;

     (6)Activity继承SlidingFragmentActivity;

     (7)下面贴上具体代码,都有详细注释:

              1.   properties.xml布局

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="@dimen/list_padding" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/list_padding"
            android:paddingTop="@dimen/list_padding" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="Mode"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <RadioGroup
                android:id="@+id/mode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <RadioButton
                    android:id="@+id/left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="@string/left" />

                <RadioButton
                    android:id="@+id/right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/right" />
                
                <RadioButton
                    android:id="@+id/left_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/left_and_right" />
            </RadioGroup>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/list_padding"
            android:paddingTop="@dimen/list_padding" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="Touch Mode Above"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <RadioGroup
                android:id="@+id/touch_above"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <RadioButton
                    android:id="@+id/touch_above_full"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="Fullscreen" />

                <RadioButton
                    android:id="@+id/touch_above_margin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Margin" />

                <RadioButton
                    android:id="@+id/touch_above_none"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="None" />
            </RadioGroup>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/list_padding"
            android:paddingTop="@dimen/list_padding"
            android:visibility="gone" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="Touch Mode Behind"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <RadioGroup
                android:id="@+id/touch_behind"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <RadioButton
                    android:id="@+id/touch_behind_full"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="Fullscreen" />

                <RadioButton
                    android:id="@+id/touch_behind_margin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Margin" />
            </RadioGroup>
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/list_padding"
            android:text="Scroll Scale"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <SeekBar
            android:id="@+id/scroll_scale"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/list_padding"
            android:text="Behind Width"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:visibility="gone" />

        <SeekBar
            android:id="@+id/behind_width"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/list_padding" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="Shadow"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <CheckBox
                android:id="@+id/shadow_enabled"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Enabled?" />
        </LinearLayout>

        <SeekBar
            android:id="@+id/shadow_width"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/list_padding" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:text="Fade"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <CheckBox
                android:id="@+id/fade_enabled"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Enabled?" />
        </LinearLayout>

        <SeekBar
            android:id="@+id/fade_degree"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</ScrollView>
 2.menu_frame.xml
<?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" />

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

<!-- ListView布局会在ListFragment中用到 -->

<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"
    android:paddingLeft="@dimen/list_padding"
    android:paddingRight="@dimen/list_padding" />
5.row.xml
<?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 Text"
        android:textAppearance="@android:style/TextAppearance.Medium" />

</LinearLayout>
6.SampleListFragment.java
package com.yangyu.myslidingmenudemo01;

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;

/**
 * @author yangyu
 *	功能描述:列表Fragment,用来显示滑动菜单打开后的内容
 */
public class SampleListFragment extends ListFragment {

	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.list, null);
	}

	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		
		SampleAdapter adapter = new SampleAdapter(getActivity());
		
		for (int i = 0; i < 20; i++) {
			adapter.add(new SampleItem("Sample List", android.R.drawable.ic_menu_search));
		}
		setListAdapter(adapter);
	}
	
	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.row, 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;
		}
	}
	
	private class SampleItem {
		public String tag;
		public int iconRes;
		public SampleItem(String tag, int iconRes) {
			this.tag = tag; 
			this.iconRes = iconRes;
		}
	}
}
7.MainActivity.java
package com.yangyu.myslidingmenudemo01;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

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

public class MainActivity extends SlidingFragmentActivity {
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		//设置标题栏的标题
		setTitle("SlidingMenu Properties");

		//设置是否能够使用ActionBar来滑动
		setSlidingActionBarEnabled(true);

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

		//设置主界面视图
		setContentView(R.layout.properties);	

		//初始化滑动菜单
		initSlidingMenu(savedInstanceState);
		
		//初始化组件
		initView();	
	}

	/**
	 * 初始化滑动菜单
	 */
	private void initSlidingMenu(Bundle savedInstanceState) {
		// 设置滑动菜单的视图
		setBehindContentView(R.layout.menu_frame);
		getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();		

		// 实例化滑动菜单对象
		SlidingMenu sm = getSlidingMenu();
		// 设置滑动阴影的宽度
		sm.setShadowWidthRes(R.dimen.shadow_width);
		// 设置滑动阴影的图像资源
		sm.setShadowDrawable(R.drawable.shadow);
		// 设置滑动菜单视图的宽度
		sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
		// 设置渐入渐出效果的值
		sm.setFadeDegree(0.35f);
		// 设置触摸屏幕的模式
		sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);		
	}
	
	/**
	 * 初始化组件
	 */
	private void initView() {
		// 设置滑动菜单的位置(左边、右边或者左右两边都有)
		RadioGroup mode = (RadioGroup) findViewById(R.id.mode);
		mode.check(R.id.left);
		mode.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				SlidingMenu sm = getSlidingMenu();
				switch (checkedId) {
				case R.id.left:
					sm.setMode(SlidingMenu.LEFT);
					sm.setShadowDrawable(R.drawable.shadow);
					break;
				case R.id.right:
					sm.setMode(SlidingMenu.RIGHT);
					sm.setShadowDrawable(R.drawable.shadowright);
					break;
				case R.id.left_right:
					sm.setMode(SlidingMenu.LEFT_RIGHT);
					sm.setSecondaryMenu(R.layout.menu_frame_two);					
					getSupportFragmentManager().beginTransaction()
					 						   .replace(R.id.menu_frame_two,
					 						new SampleListFragment()).commit();
					sm.setSecondaryShadowDrawable(R.drawable.shadowright);
					sm.setShadowDrawable(R.drawable.shadow);
				}
			}
		});

		// 设置触摸的模式(全屏触摸滑动、边缘触摸滑动或者触摸不能滑动)
		RadioGroup touchAbove = (RadioGroup) findViewById(R.id.touch_above);
		touchAbove.check(R.id.touch_above_full);
		touchAbove.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch (checkedId) {
				case R.id.touch_above_full:
					getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
					break;
				case R.id.touch_above_margin:
					getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
					break;
				case R.id.touch_above_none:
					getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
					break;
				}
			}
		});

		// 设置滑动菜单滑动时缩放的效果(值越大效果越明显)
		SeekBar scrollScale = (SeekBar) findViewById(R.id.scroll_scale);
		scrollScale.setMax(1000);
		scrollScale.setProgress(333);
		scrollScale.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			@Override
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
			}

			@Override
			public void onStartTrackingTouch(SeekBar seekBar) {
			}

			@Override
			public void onStopTrackingTouch(SeekBar seekBar) {
				getSlidingMenu().setBehindScrollScale((float) seekBar.getProgress() / seekBar.getMax());
			}
		});

		// 设置滑动菜单时下方视图的宽度(值越大宽度越大)
		SeekBar behindWidth = (SeekBar) findViewById(R.id.behind_width);
		behindWidth.setMax(1000);
		behindWidth.setProgress(750);
		behindWidth.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			@Override
			public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
			}

			@Override
			public void onStartTrackingTouch(SeekBar seekBar) {
			}

			@Override
			public void onStopTrackingTouch(SeekBar seekBar) {
				float percent = (float) seekBar.getProgress() / seekBar.getMax();
				getSlidingMenu().setBehindWidth((int) (percent * getSlidingMenu().getWidth()));
				getSlidingMenu().requestLayout();
			}
		});

		// 设置滑动菜单滑动时的阴影效果(值越大效果越明显)
		CheckBox shadowEnabled = (CheckBox) findViewById(R.id.shadow_enabled);
		shadowEnabled.setChecked(true);
		shadowEnabled.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
					public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
						if (isChecked)
							getSlidingMenu().setShadowDrawable(getSlidingMenu().getMode() == SlidingMenu.LEFT ? R.drawable.shadow: R.drawable.shadowright);
						else
							getSlidingMenu().setShadowDrawable(null);
					}
				});
		SeekBar shadowWidth = (SeekBar) findViewById(R.id.shadow_width);
		shadowWidth.setMax(1000);
		shadowWidth.setProgress(75);
		shadowWidth.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			@Override
			public void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) {
			}

			@Override
			public void onStartTrackingTouch(SeekBar seekBar) {
			}

			@Override
			public void onStopTrackingTouch(SeekBar seekBar) {
				float percent = (float) seekBar.getProgress() / (float) seekBar.getMax();
				int width = (int) (percent * (float) getSlidingMenu().getWidth());
				
				getSlidingMenu().setShadowWidth(width);
				getSlidingMenu().invalidate();
			}
		});

		// 设置滑动菜单滑动时渐入渐出的效果(值越大效果越明显)
		CheckBox fadeEnabled = (CheckBox) findViewById(R.id.fade_enabled);
		fadeEnabled.setChecked(true);
		fadeEnabled.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
					@Override
					public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
						getSlidingMenu().setFadeEnabled(isChecked);
					}
				});
		SeekBar fadeDeg = (SeekBar) findViewById(R.id.fade_degree);
		fadeDeg.setMax(1000);
		fadeDeg.setProgress(666);
		fadeDeg.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			@Override
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
			}

			@Override
			public void onStartTrackingTouch(SeekBar seekBar) {
			}

			@Override
			public void onStopTrackingTouch(SeekBar seekBar) {
				getSlidingMenu().setFadeDegree(
						(float) seekBar.getProgress() / seekBar.getMax());
			}
		});
	}
	
	/**
	 * 菜单按钮点击事件,通过点击ActionBar的Home图标按钮来打开滑动菜单
	 */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case android.R.id.home:
			toggle();
			return true;		
		}
		return super.onOptionsItemSelected(item);
	}

	
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值