Android之SlidingMenu

**

前言：

**
SlidingMenu一般称作：侧滑菜单，可以实现比较绚丽的界面，在很多APP中都有应用。

首先要理清思路：SlidingMenu和MainActivity其实使用了两个Layout文件，主页面使用一个，SlidingMenu有个方法setMenu(Layout layout)需要指定一个layout文件。

使用SlidingMenu做开发，必须要使用到SlidingMenu的jar包（我用的是slidingmenu.jar）。

注意：在ReferencesLibrary中添加jar包后，同样需要在lib文件夹下添加该lib文件。否则会报slidingmenu.class not found一类的错误。

SlidingMenu的属性和方法

在实例开始前现熟悉下SlidingMenu的方法使用。
//设置侧滑菜单的滑动位置，可选值LEFT,RIGHT,LEFT_RIGHT(两边都有菜单时)
menu.setMode(SlidingMenu.LEFT)

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE); //设置滑动方式，一共有三种方式 SlidingMenu.TOUCHMODE_FULLSCREEN 在屏幕任何地方滑动均可触发侧滑菜单
SlidingMenu.TOUCHMODE_MARGIN 在屏幕边缘地方（左边或者右边）滑动才可触发侧滑菜单
SlidingMenu.TOUCHMODE_NONE 在屏幕任何地方滑动均无法触发侧滑菜单

//设置触摸屏幕的模式，可选值MARGIN，CONTENT.FULLSCREEN
TOUCHMODE_MARGIN:触摸边缘滑动
SLIDING_CONTENT:触摸中间区域滑动
TOUCHMODE_FULLSCREEN:只要在屏幕区域触摸可以滑动
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLCREEN);

//根据dimension资源文件的ID来设置阴影的宽度。
menu.setShadowWidthRes(R.dimen.shadow_width);
//通过设定值来设置阴影的宽度
menu.setShadowWidth(int width);

//根据资源文件ID来设置滑动菜单的阴影效果
menu.setShadowDrawable(R.drawable.shadow);

两种方法可以设置滑动菜单视图的宽度
1.设置SlidingMenu离屏幕的偏移量
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
2.设定宽度
menu.setBehindWidth();

设定渐入渐出效果的值。范围（0.0-1.0）
值越大，菜单滑动时色阶变化越明显
该值不能超过1.0f,否则程序必跪….
menu.setFadeDegree(0.35f);

设置SlidingMenu与下方视图的移动的速度比，当为1时，同时移动。范围（0.0-1.0)
menu.setBehindScrollScale(1.0f);

//一下两个属性是必不可少且是最重要的方法
为侧滑菜单设置布局
menu.setMenu(R.layout.leftMenu);
将滑动菜单添加到Activity中.可选值为：Sliding_CONTENT,SLIDING_WINDOW
menu.attachToActivity(this,SlidingMenu.Sliding_CONTENT);

程序实例

1.主界面MainActivity，添加两个SlidingMenu，分别实现左侧滑和右侧滑的功能
。
Code：MyActivity.java

package com.example.slidingme;


import com.slidingmenu.lib.SlidingMenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;


public class MainActivity extends Activity {


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


         // configure the SlidingMenu  
        SlidingMenu left_menu = new SlidingMenu(this);
        left_menu.setMode(SlidingMenu.LEFT);
        left_menu.setTouchModeAbove(SlidingMenu.SLIDING_CONTENT);
        left_menu.setShadowWidth(5);

        left_menu.setBehindOffset(300);//SlidingMenu划出时主页面显示的剩余宽度
        left_menu.setFadeDegree(1f);
        left_menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        left_menu.setMenu(R.layout.sliding_left);  

        SlidingMenu right_menu = new SlidingMenu(this);
        right_menu.setMode(SlidingMenu.RIGHT);
        right_menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        right_menu.setShadowWidth(5);

        right_menu.setBehindOffset(300);//SlidingMenu划出时主页面显示的剩余宽度
        right_menu.setFadeDegree(1.0f);
        right_menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        right_menu.setMenu(R.layout.sliding_right);  




    }

    @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;
    }

}

2.右侧滑菜单添加了一些图片和文字，增强效果显示。
sliding_right.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/desktop_wallpager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/cover"
    android:orientation="vertical">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/sidebar_bg_black"
            android:orientation="vertical" >

            <RelativeLayout
                android:id="@+id/desktop_top_layout"
                android:layout_width="fill_parent"
                android:layout_height="62dp" >

                <ImageView
                    android:id="@+id/desktop_avatar"
                    android:layout_width="40dip"
                    android:layout_height="40dip"
                    android:layout_margin="8dip"
                    android:src="@drawable/head_default" />

                <TextView
                    android:id="@+id/desktop_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@+id/desktop_avatar"
                    android:layout_margin="3dip"
                    android:layout_toRightOf="@+id/desktop_avatar"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:textColor="#ffffff"
                    android:text="Hello World"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/desktop_sig"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/desktop_name"
                    android:layout_alignRight="@+id/desktop_name"
                    android:layout_below="@+id/desktop_name"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:textColor="#7fffffff"
                    android:text="一直都在----"
                    android:textSize="12sp" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1px"
                    android:layout_below="@+id/desktop_avatar"
                    android:background="@drawable/sidebar_dividing_line" />
            </RelativeLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <ExpandableListView android:id="@+id/list"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1" 
                    android:cacheColorHint="#00000000"
                    android:divider="@drawable/sidebar_dividing_line_middle"
                    android:childDivider="#00000000"
                    android:listSelector="#00000000" 
                    android:paddingLeft="15dip"
                    android:paddingRight="15dip" 
                    android:scrollbars="none"/>

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1px"
                    android:layout_below="@+id/desktop_avatar"
                    android:background="@drawable/sidebar_dividing_line" />

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <LinearLayout
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_weight="1" >
                    </LinearLayout>


                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
</LinearLayout>

3.效果图：

4.左侧百页是MainActivity，右边是侧滑菜单，左侧滑随便一个简单页面就行。

**

总结：

**SlidingMenu技术增强了页面显示效果，在很多APP中都有应用如QQ。深刻理解SlidngMenu的方法可以设计出很炫的手机APP，增加吸引力。注意：以上属性如果设置不正确，将导致APP crash ……