左右側滑菜單的使用

轉載請註明出處: 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="@drawable/head" />

    <TextView
        android:id="@+id/menu_right_item1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="我的詳細資料"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/menu_right_item2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="綁定電話號碼"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/menu_right_item3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="我的財富"
        android:textSize="20sp" />

</LinearLayout></span>

將菜單的展示抽取到了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

效果圖: