使用DrawerLayout和SlidingMenu分别实现侧滑菜单、以及AS使用SlidingMenu第三方库的步骤

最近有需求要实现一下侧滑菜单的功能，网上有很多类似的案例，但不是不美观就是失败率极高。所以自己花了点时间实现了一下，然后展示出来，算做一下笔记。

首先实现侧滑菜单有很多方法，这里只演示使用布局DrawerLayout和第三方库SlidingMenu的分别实现，没有过多的解释，直接演示源码。

一、DrawerLayout 实现侧滑菜单

新建一个Android项目,主页面的布局文件activity_main.xml中的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView
        android:layout_gravity="left"
        android:id="@+id/lvContent"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:background="#69ffaa"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

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

接着添加一个ContentFragment，其布局文件fragment_content.xml的代码：

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

    <ImageView
        android:id="@+id/imgContent"
        android:layout_width="270dp"
        android:layout_height="480dp"
        android:layout_centerInParent="true" />


</RelativeLayout>

ContentFragment的代码实现，随便找四个图片添加进项目：

/**
 * Created by Layne_Yao on 2018/5/17.
 * 优快云:http://blog.youkuaiyun.com/Jsagacity
 */
public class ContentFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content, null);
        ImageView imgContent = view.findViewById(R.id.imgContent);
        int count = getArguments().getInt("text");
        switch (count) {
            case 0:
                imgContent.setBackgroundResource(R.drawable.girl1);
                break;
            case 1:
                imgContent.setBackgroundResource(R.drawable.girl2);
                break;
            case 2:
                imgContent.setBackgroundResource(R.drawable.girl3);
                break;
            case 3:
                imgContent.setBackgroundResource(R.drawable.girl4);
                break;
            case 4:
                imgContent.setBackgroundResource(R.drawable.girl5);
                break;
        }
        return view;
    }
}

最后就是MainActivity的代码，全部贴出来：

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
    private DrawerLayout drawerLayout;
    private FrameLayout flContent;
    private ListView lvContent;
    private ActionBarDrawerToggle drawerToggle;

    private List<String> datas;
    private ArrayAdapter<String> adapter;

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

        setTitle("菜单选择");
        drawerLayout = findViewById(R.id.drawerLayout);
        flContent = findViewById(R.id.flContent);
        lvContent = findViewById(R.id.lvContent);

        datas = new ArrayList<>();
        datas.add("美女1");
        datas.add("美女2");
        datas.add("美女3");
        datas.add("美女4");
        datas.add("美女5");

        adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, datas);
        lvContent.setAdapter(adapter);
        lvContent.setOnItemClickListener(this);

        //创建菜单控制开关
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.menu, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                invalidateOptionsMenu();
                super.onDrawerClosed(drawerView);
            }
        };
        drawerLayout.setDrawerListener(drawerToggle);

        if (getSupportActionBar() != null) {
            //开启ActionBar显示菜单控制开
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //菜单控制开关点击事件能够相应
            getSupportActionBar().setHomeButtonEnabled(true);
        }

    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Fragment fragment = new ContentFragment();
        Bundle args = new Bundle();
        args.putInt("text", i);
        fragment.setArguments(args);
        getFragmentManager().beginTransaction().replace(R.id.flContent, fragment).commit();

        //关闭菜单
        drawerLayout.closeDrawer(lvContent);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //屏蔽drawerToggle的点击事件
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onPostCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {
        super.onPostCreate(savedInstanceState, persistentState);

        //将drawerToggle与DrawerLayout状态同步
        drawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }
}

运行结果：

二、AS导入SlidingMenu第三方库的步骤

SlidingMenu的Github地址：https://github.com/jfeinstein10/SlidingMenu

1、下载下来之后，首先拷贝SlidingMenu-master的library文件夹到你项目的根目录下

2、修改setting.gradle

在项目的setting.gradle里面添加module名字

include ':app',':SlidingMenuLibrary'

3、修改app目录下的build.gradle

添加引用momodule

implementation project(':SlidingMenuLibrary')

完了点击右上角的Sync Now，让AS自动为SlidingMenu自动生成gradle，会报错误，没有关系，继续修改错误

4、修改SlidingMenuLibrary的build.gradle

修改的参数跟APP下的build.gradle一致，我的项目是修改成这样：

然后点击右上角的Try again，重新刷新项目，还会报错误，继续修改

5、继续修改错误

以上的步骤就是AS正确导入第三方库SlidingMenu的操作，接下来就操作一个新项目。

三、用SlidingMenu第三方库实现侧滑菜单

很简单，先来个左侧滑菜单栏布局left_menu_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="Layne"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

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

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="了解会员特权"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="个人装扮"
                    android:textColor="#000"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="我的收藏"
                    android:textColor="#000"
                    android:textSize="16sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="我的相册"
                    android:textColor="#000"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="我的文件"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="免流量特权"
                    android:textColor="#000"
                    android:textSize="16sp" />

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

差不多的右布局right_menu_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:text="设置"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

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

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="个人信息"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="二维码名片"
                    android:textColor="#000"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="我的帐号"
                    android:textColor="#000"
                    android:textSize="16sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="聊天背景"
                    android:textColor="#000"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="通用"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="黑名单"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="隐私"
                    android:textColor="#000"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="系统通知"
                    android:textColor="#000"
                    android:textSize="16sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:background="@drawable/list_item_style"
                    android:clickable="true"
                    android:drawableRight="@drawable/mm_submenu_normal"
                    android:gravity="center_vertical"
                    android:paddingLeft="25dp"
                    android:text="帮助与反馈"
                    android:textColor="#000"
                    android:textSize="16sp" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:layout_marginTop="20dp"
                android:orientation="vertical">

                <Button
                    android:layout_width="fill_parent"
                    android:layout_height="40dp"
                    android:layout_marginLeft="20sp"
                    android:layout_marginRight="20sp"
                    android:background="@drawable/list_item_style"
                    android:gravity="center"
                    android:text="退出登录"
                    android:textColor="#fff"
                    android:textSize="16sp" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

主页面MainActivity的代码：

public class MainActivity extends SlidingFragmentActivity {
    private SlidingMenu slidingMenu;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 设置左侧侧拉条目的布局
        setBehindContentView(R.layout.left_menu_main);
        // 获取侧拉条目对象
        slidingMenu = getSlidingMenu();
        // 1、设置侧拉条目的方向;
        slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
        // 2、设置内容页的宽度；
        slidingMenu.setBehindOffsetRes(R.dimen.main_menu_behind_offset);
        // 设置侧拉条目的宽度
        // slidingMenu.setBehindWidthRes(res)
        // 3、设置侧拉条目和内容页分隔线，颜色渐变
        slidingMenu.setShadowDrawable(R.drawable.shape_shadow);
        // 指明分隔线宽度
        slidingMenu.setShadowWidthRes(R.dimen.main_menu_shadow_width);
        // 4、指明可拖拽侧拉条目的范围
        // 全屏可拖拽
        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        // 边缘可拖拽
        // slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
        // 全屏不可拖拽
        // slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);

        // 设置右边侧拉
        slidingMenu.setSecondaryMenu(R.layout.right_menu_main);
        // 设置右边侧拉分隔线
        slidingMenu.setSecondaryShadowDrawable(R.drawable.shape_shadow);
    }
}

运行结果：

项目有很多小细节没有贴出来，可以下载源码慢慢研究。
源码下载