如何简单的写出一个侧滑菜单

两种方式实现侧边栏的效果:


//引用第三方库SlidingMenu
侧边栏SlidingMenu的小Demo:


核心代码:setBehindContentView设置侧边栏的布局


代码如下:
package com.xxx.slidingmenudemo;


import android.os.Bundle;


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


/**
 * 流程:
 * 1. 关联SlidingMenu的库
 * 2. 继承SlidingActivity
 * 3. onCreate改为public
 * 4. setBehindContentView设置侧边栏的布局
 * 5. 获取SlidingMenu对象,实现不同效果
 */
public class MainActivity extends SlidingActivity {


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


//设置侧边栏的布局
setBehindContentView(R.layout.left_menu);


//获取当前侧边栏对象
SlidingMenu slidingMenu = getSlidingMenu();
//设置触摸模式为全屏触摸
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
//设置右侧侧边栏
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//表示左右都有的模式, 否则只展示一个
//设置第二个侧边栏
slidingMenu.setSecondaryMenu(R.layout.right_menu);


//设置侧边栏宽度
slidingMenu.setBehindOffset(200);//屏幕预留200px的宽度,这个200并非是侧边栏的宽度
}


}




left_menu的布局:


<?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="#f00"
    android:orientation="vertical" >


</LinearLayout>


right_menu的布局:
<?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="#0f0"
    android:orientation="vertical" >


</LinearLayout>




//这种方式是菜单盖在主页面上,而主页面是不动的
//DrawLayout是存在于V4包里面的
使用DrawLayout实现侧滑菜单:


整体布局:
//V4包下我们自定义的一个布局
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerLayout"
    tools:context=".MainActivity" >


    <!-- 主界面的布局 -->


//这里我们定义了一个主界面的布局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        
        <com.xxx.xxx.ui.widget.PagerSlidingTab
           android:layout_width="match_parent"
           android:id="@+id/slidingTab"
        android:layout_height="50dp" />
        
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
            />
        
    </LinearLayout>


    <!-- 菜单的布局 -->


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
//给菜单布局添加一个属性,指定它在整体布局的左边
        android:layout_gravity="start/left"
        android:orientation="vertical" >
        
        <include layout="@layout/menu_list"/>
        
        
    </LinearLayout>


</android.support.v4.widget.DrawerLayout>


menu_list的布局:


<?xml version="1.0" encoding="utf-8"?>
//整体的布局用一个ScrollView进行包裹,防止item过多造成下面的item不能上滑
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:fillViewport="true" >


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


        <RelativeLayout
            android:id="@+id/photo_layout"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@drawable/menu_icon_bg"
            android:paddingLeft="10dp"
            android:paddingRight="10dp" >


            <ImageView
                android:id="@+id/image_photo"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:background="@drawable/bg_photo"
                android:padding="5dip" />


            <ImageView
                android:id="@+id/image_over"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/photo_over" />


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/image_photo"
                android:gravity="center_vertical" >


                <TextView
                    android:id="@+id/user_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:text="@string/tv_user_name"
                    android:textColor="#2b2b2b"
                    android:textSize="18dp" />


                <TextView
                    android:id="@+id/user_email"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/user_name"
                    android:layout_marginTop="5dp"
                    android:singleLine="true"
                    android:text="@string/tv_user_email"
                    android:textColor="#7a7a7a"
                    android:textSize="14dp" />
            </RelativeLayout>
        </RelativeLayout>
        <!-- 4f4f4f -->


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/home_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_home"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_home" />


            <TextView
                android:id="@+id/tv_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_home"
                android:text="@string/tv_home"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/setting_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_setting"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_setting" />


            <TextView
                android:id="@+id/tv_setting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_setting"
                android:text="@string/tv_setting"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/theme_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_theme"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_theme" />


            <TextView
                android:id="@+id/tv_theme"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_theme"
                android:text="@string/tv_theme"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/scans_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_scans"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_scans" />


            <TextView
                android:id="@+id/tv_scans"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_scans"
                android:text="@string/tv_scans"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/feedback_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_feedback"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_feedback" />


            <TextView
                android:id="@+id/tv_feedback"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_feedback"
                android:text="@string/tv_feedback"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/updates_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_updates"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_updates" />


            <TextView
                android:id="@+id/tv_updates"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_updates"
                android:text="@string/tv_updates"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/about_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_about"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_about" />


            <TextView
                android:id="@+id/tv_about"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_about"
                android:text="@string/tv_about"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />


        <RelativeLayout
            android:id="@+id/exit_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/menu_item_bg"
            android:gravity="center_vertical"
            android:paddingLeft="15dp" >


            <ImageView
                android:id="@+id/ic_exit"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_exit" />


            <TextView
                android:id="@+id/tv_exit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/ic_exit"
                android:text="@string/tv_exit"
                android:textColor="#9b9b9b"
                android:textSize="18dp" />
        </RelativeLayout>


        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#1a000000" />
    </LinearLayout>


</ScrollView>