首页 > 代码库 > 左右侧滑菜单的使用

左右侧滑菜单的使用

转载请注明出处: http://blog.csdn.net/forwardyzk/article/details/43021345

我们平时看到的菜单,都有侧滑菜单,有的只有右侧侧滑菜单,有的只有右侧侧滑菜单,有的左侧和右侧都有侧滑菜单。

下面介绍一个有三种模式的侧滑菜单,只有左侧,只有右侧,左侧和右侧都有。

首先要导入一个包,源码Demo中可以下载,然后引入项目中。

baseMenu = new SlidingMenu(this);
		baseMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		baseMenu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
		baseMenu.setShadowDrawable(R.drawable.slidingmenu_shadow);
		baseMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		baseMenu.setFadeDegree(0.35f);
		baseMenu.setBehindOffset(dm.widthPixels * 50 / 100);
		baseMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
		// 显示菜单模式
		baseMenu.setMode(SlidingMenu.LEFT_RIGHT);// 这里模式设置为左右都有菜单,RIGHT显示右菜单,LEFT显示左菜单,LEFT_RIGH显示左右菜单
		// 内容页
		baseMenu.setContent(layoutResID);
		// 左侧菜单布局
		baseMenu.setMenu(R.layout.slidingmenu_menu_left);
		// 右侧菜单布局
		baseMenu.setSecondaryMenu(R.layout.slidingmenu_menu_right);
		// 设置右侧菜单的阴影效果
		baseMenu.setSecondaryShadowDrawable(R.drawable.slidingmenu_shadow_2);

也可以在布局文件中引入,在这里是用的代码注册侧滑菜单。

其中主要方法:

baseMenu.setMode(SlidingMenu.LEFT_RIGHT);设置侧滑模式,RIGHT、LEFT、LEFT_RIGH

baseMenu.setContent(layoutResID);主界面显示的布局文件

baseMenu.setMenu(R.layout.slidingmenu_menu_left);左侧菜单显示的布局

baseMenu.setSecondaryMenu(R.layout.slidingmenu_menu_right);右侧菜单显示布局

baseMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);将侧滑菜单添加到当前的Activity中

baseMenu.showMenu(true);展示左侧菜单

baseMenu.showSecondaryMenu(true);展示右侧菜单

baseMenu.toggle();菜单开关

下面介绍一个例子:

左侧菜单布局

slidingmenu_menu_left.xml


<span style="font-family:SimSun;font-size:18px;"><?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="match_parent"
    android:background="@drawable/ic_bg_for_dropdown"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/menu_left_item1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_right_to"
        android:gravity="center"
        android:padding="10dp"
        android:text="栏目一"
        android:textSize="22sp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_line" />

    <TextView
        android:id="@+id/menu_left_item2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_right_to"
        android:gravity="center"
        android:padding="10dp"
        android:text="栏目二"
        android:textSize="22sp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_line" />

    <TextView
        android:id="@+id/menu_left_item3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_right_to"
        android:gravity="center"
        android:padding="10dp"
        android:text="栏目三"
        android:textSize="22sp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_line" />

</LinearLayout></span>

slidingmenu_menu_right.xml


<span style="font-family:SimSun;font-size:18px;"><?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="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src=http://www.mamicode.com/"@drawable/head" />>

将菜单的展示抽取到了BaseMenuActivity中,这样如果对于向有侧滑菜单的Activity,继承此Activity即可

<span style="font-family:SimSun;font-size:18px;">public class BaseMenuActivity extends Activity implements OnClickListener {

	public SlidingMenu baseMenu;
	private TextView menu_left_item1;
	private TextView menu_left_item2;
	private TextView menu_left_item3;
	private TextView menu_right_item1;
	private TextView menu_right_item2;
	private TextView menu_right_item3;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	public void setMentContent(int layoutResID) {
		initBaseMenu(layoutResID);
	}

	private void initBaseMenu(int layoutResID) {
		baseMenu = new SlidingMenu(this);
		baseMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		baseMenu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
		baseMenu.setShadowDrawable(R.drawable.slidingmenu_shadow);
		baseMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		baseMenu.setFadeDegree(0.35f);
		baseMenu.setBehindOffset(dm.widthPixels * 50 / 100);
		baseMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
		// 显示菜单模式
		baseMenu.setMode(SlidingMenu.LEFT_RIGHT);// 这里模式设置为左右都有菜单,RIGHT显示右菜单,LEFT显示左菜单,LEFT_RIGH显示左右菜单
		// 内容页
		baseMenu.setContent(layoutResID);
		// 左侧菜单布局
		baseMenu.setMenu(R.layout.slidingmenu_menu_left);
		// 右侧菜单布局
		baseMenu.setSecondaryMenu(R.layout.slidingmenu_menu_right);
		// 设置右侧菜单的阴影效果
		baseMenu.setSecondaryShadowDrawable(R.drawable.slidingmenu_shadow_2);
		initBaseMenuLeft();
		initBaseMenuContent();
		initBaseMenuRight();
	}

	private void initBaseMenuRight() {
		menu_right_item1 = (TextView) findViewById(R.id.menu_right_item1);
		menu_right_item2 = (TextView) findViewById(R.id.menu_right_item2);
		menu_right_item3 = (TextView) findViewById(R.id.menu_right_item3);
		menu_right_item1.setOnClickListener(baseOnclickListener);
		menu_right_item2.setOnClickListener(baseOnclickListener);
		menu_right_item3.setOnClickListener(baseOnclickListener);
	}

	public void initBaseMenuContent() {

	}

	private void initBaseMenuLeft() {
		menu_left_item1 = (TextView) findViewById(R.id.menu_left_item1);
		menu_left_item2 = (TextView) findViewById(R.id.menu_left_item2);
		menu_left_item3 = (TextView) findViewById(R.id.menu_left_item3);
		menu_left_item1.setOnClickListener(baseOnclickListener);
		menu_left_item2.setOnClickListener(baseOnclickListener);
		menu_left_item3.setOnClickListener(baseOnclickListener);
	}

	private OnClickListener baseOnclickListener = new OnClickListener() {

		@Override
		public void onClick(View v) {

			switch (v.getId()) {
			case R.id.menu_left_item1:
				showShortToast("栏目一");
				break;
			case R.id.menu_left_item2:
				showShortToast("栏目二");
				break;
			case R.id.menu_left_item3:
				showShortToast("栏目三");
				break;
			case R.id.menu_right_item1:
				showShortToast("我的资料");
				baseMenu.toggle();
				break;
			case R.id.menu_right_item2:
				showShortToast("修改资料");
				baseMenu.toggle();
				break;
			case R.id.menu_right_item3:
				showShortToast("我的财富");
				baseMenu.toggle();
				break;

			default:
				break;
			}

		}
	};

	private void showShortToast(String message) {
		Toast.makeText(getApplicationContext(), message, 0).show();
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub

	}

}
</span>


在setMentContent中,把显示的内容内容布局,通过子类传进来,即

MainActivity.java

<span style="font-family:SimSun;font-size:18px;">public class MainActivity extends BaseMenuActivity {

	private ImageView menu_left;
	private ImageView menu_right;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setMentContent(R.layout.activity_main_slidingmenu_content);
		initMenuContent();
		initView();
	}

	private void initView() {
		findViewById(R.id.go_1).setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				startActivity(new Intent(MainActivity.this, Activity1.class));
			}
		});

	}

	private void initMenuContent() {
		menu_left = (ImageView) findViewById(R.id.menu_left);
		menu_right = (ImageView) findViewById(R.id.menu_right);
		menu_left.setOnClickListener(this);
		menu_right.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.menu_left:
			baseMenu.showMenu(true);
			break;
		case R.id.menu_right:
			baseMenu.showSecondaryMenu(true);
			break;
		default:
			break;
		}

	}

	private void showShortToast(String message) {
		Toast.makeText(getApplicationContext(), message, 0).show();
	}

}
</span>
在onCreate()中,调用setMentContent(显示布局文件的id)


然后对其布局文件中的控件进行操作即可,就是把我们开始使用的setContentView(layoutResID)换成setMentContent(layoutResID)即可。

源码下载: http://download.csdn.net/detail/forwardyzk/8386729

效果图:

技术分享



左右侧滑菜单的使用