Android 侧滑菜单（抽屉）的使用总结_android 侧拉抽屉

侧滑菜单这种设计，在很多 APP 上面都有看到，例如大版本3.0之前的知乎、网易新闻、滴滴打车等。有些热衷于 Android Material Design 的开发者，甚至将一些 IOS 化的 Android 应用改头换面，将其 MD 化。这过程中，基本上都会给这些“改版”应用装上“抽屉”，例如 Xposed 上面的经典插件——“WechatUI ”、Github 上面的“Material Design 豆瓣客户端——豆芽”，以及一些第三方微博客户端。

既然侧滑菜单如此受大家欢迎，那我们就赶紧去了解一下它吧

侧滑菜单的实现方式

侧滑菜单主要有两种实现方式，一是使用开源库，如 SlidingMenu、MaterialDrawer 等，二是使用 Android 官方推荐的 DrawerLayout 实现。

我们就先以官方推荐的为基础来进行学习，如果能把官方推荐的知识掌握了，再使用开源库就更不是问题了。

DrawerLayout

DrawerLayout 是谷歌推出的一款用于实现侧滑菜单效果的控件，集成在 support library 里面，使用时需要加载 android-support-v4.jar 包。

DrawerLayout 分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开或隐藏，主内容区可以根据侧边菜单的变换而改变。

使用方法

先看代码

布局：

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

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

        <!--左边抽屉菜单-->
        <RelativeLayout
            android:id="@+id/rl_left"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            >
            <ListView
                android:id="@+id/lv_left"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </RelativeLayout>

        <!--右边抽屉菜单-->
        <RelativeLayout
            android:id="@+id/rl_right"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            >
            <ListView
                android:id="@+id/lv_right"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

从布局文件可以看出，DrawerLayout 是根布局，然后紧跟着的是第一个子元素是默认内容（抽屉未打开的默认内容，即本例中的 FrameLayout），之后的是抽屉内容。

抽屉菜单的摆放通过抽屉布局的 android:layout_gravity=”” 的属性来控制，可填入 “left”、”right”、”start”、”end”。此属性必须设置，要不然侧滑抽屉时会报错。

抽屉菜单宽度单位为 dp，大小一般不超过 320dp，这样打开抽屉后，依然可以看到部分内容布局。

代码

布局文件写好之后，侧滑效果按理说就已经实现了。但是此时你滑动菜单时，会发现左边拉出来什么内容都没有，这是因为我们没有给菜单布局注入数据。

    public class MainActivity extends AppCompatActivity {
   

        private static final String TAG = "MainActivity";

        private Context mContext;
        private DrawerLayout mDlMain;
        private FrameLayout mFlContent;
        private RelativeLayout mRlLeft, mRlRight;
        private ListView mLvLeft;
        private TextView mTvRight;

        private String[] leftMenuNames = {
  "left_item1", "left_item2",
                "left_item3", "left_item4"};

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

        private void initView() {
            mDlMain = (DrawerLayout) findViewById(R.id.dl_main);
            mFlContent = (FrameLayout) findViewById(R.id.fl_content);
            mRlLeft = (RelativeLayout) findViewById(R.id.rl_left);
            mRlRight = (RelativeLayout) findViewById(R.id.rl_right);
            mLvLeft = (ListView) findViewById(R.id.lv_left);
            mLvLeft.setAdapter(new ArrayAdapter<String>(mContext,
                    android.R.layout.simple_list_item_1, leftMenuNames));//给左边菜单写入数据
            mTvRight = (TextView) findViewById(R.id.tv_right);
            mTvRight.setText("right_content");//给右边菜单内容赋值
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果

菜单添加点击事件

菜单做好之后，自然就会给菜单赋予点击事件，来控制主内容区显示的内容。给菜单添加点击事件，其实就是给菜单布局里面的 listview 添加点击事件。这个简单得很，就是 listview.setOnItemClickListener(this) 即可。点击之后，我们之前在主界面布局里定义的 FrameLayout 就会显示相应的 Fragment。代码如下：

    mLvLeft.setOnItemClickListener(this);

    ...

    //左侧菜单点击事件
        @Override
        public void onItemClick(AdapterView<?> pAdapterView, View pView, int pI, long pL) {
            Fragment lFragment = new MenuFragment();
            Bundle lBundle = new Bundle();
            lBundle.putString("menu_str", "item_" + (pI + 1));
 
1
2
3
4
5
6
7
8
9
10
11