Android 使用DrawerLayout高速实现側滑菜单

一、概述

DrawerLayout是一个能够方便的实现Android側滑菜单的组件，我近期开发的项目中也有一个側滑菜单的功能。于是DrawerLayout就派上用场了。假设你从未使用过DrawerLayout。那么本篇博客将使用一个简单的案例带你迅速掌握DrawerLayout的使用方法。

二、效果图

三、代码实现

<?

xml version="1.0" encoding="utf-8"?

>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@android:color/white"

    android:fitsSystemWindows="true"

    android:orientation="vertical">

    <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/blueStatus"

        android:minHeight="?

attr/actionBarSize"

        app:navigationIcon="?attr/homeAsUpIndicator"

        app:theme="@style/Theme.AppCompat.NoActionBar">

    </android.support.v7.widget.Toolbar>

    <include layout="@layout/title_layout" />

    <android.support.v4.widget.DrawerLayout xmlns:tools="http://schemas.android.com/tools"

        android:id="@+id/drawer_layout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        tools:openDrawer="start">

        <ListView

            android:id="@+id/listView"

            android:layout_width="match_parent"

            android:layout_height="match_parent" />

        <LinearLayout

            android:layout_width="260dp"

            android:layout_height="match_parent"

            android:layout_gravity="right">

            <include layout="@layout/drawer_content" />

        </LinearLayout>

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

</LinearLayout>

当你使用DrawerLayout的时候。DrawerLayout的第一个元素就是主要内容区域（在本案例中是ListView），它的宽高必须是match_parent。

在主要内容区域的后面加入側滑视图（在本案例中是drawer_content.xml）。而且通过设置layout_gravity来决定它是左滑还是右滑，通常这个側滑视图的高度设为match_parent。

<?

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="@color/background"

        android:orientation="vertical"

        android:padding="@dimen/activity_horizontal_margin">

        <TextView

            style="@style/NormalTextView"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:text="船中文名" />

        <EditText

            style="@style/SmallGreyTextView"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:background="@drawable/btn_round_white"

            android:padding="@dimen/margin_8" />

        <TextView

            style="@style/NormalTextView"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:text="船英文名" />

        <EditText

            style="@style/SmallGreyTextView"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:background="@drawable/btn_round_white"

            android:padding="@dimen/margin_8" />

        <TextView

            style="@style/NormalTextView"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:text="呼号" />

        <EditText

            style="@style/SmallGreyTextView"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:background="@drawable/btn_round_white"

            android:padding="@dimen/margin_8" />

        <TextView

            style="@style/NormalTextView"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:text="IMO" />

        <EditText

            style="@style/SmallGreyTextView"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:background="@drawable/btn_round_white"

            android:padding="@dimen/margin_8" />

        <TextView

            style="@style/NormalTextView"

            android:layout_width="wrap_content"

            android:layout_height="40dp"

            android:text="MMSI" />

        <EditText

            style="@style/SmallGreyTextView"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:background="@drawable/btn_round_white"

            android:padding="@dimen/margin_8" />

        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1">

            <Button

                android:id="@+id/btn_confirm"

                style="@style/NormalGreyTextView"

                android:layout_width="80dp"

                android:layout_height="36dp"

                android:layout_alignParentRight="true"

                android:layout_centerInParent="true"

                android:layout_gravity="center_vertical"

                android:background="@drawable/btn_round_red"

                android:gravity="center"

                android:text="查询"

                android:textColor="@color/white" />

        </RelativeLayout>

    </LinearLayout>

这个布局文件就是側滑视图，如图：

MainActivity.java

package com.leohan.drawerlayoutdemo;

import android.os.Bundle;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Gravity;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.ListView;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import butterknife.ButterKnife;

import butterknife.InjectView;

import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.toolbar)

    Toolbar toolbar;

    @InjectView(R.id.tv_search)

    TextView tvSearch;

    @InjectView(R.id.listView)

    ListView listView;

    @InjectView(R.id.drawer_layout)

    DrawerLayout drawerLayout;

    private List data = new ArrayList();

    private ShipRecordAdapter adapter = new ShipRecordAdapter(this, data);

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ButterKnife.inject(this);

        setSupportActionBar(toolbar);

        listView.setAdapter(adapter);

        getData();

    }

    @Override

    public void onBackPressed() {

        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {

            drawerLayout.closeDrawer(GravityCompat.START);

        } else {

            super.onBackPressed();

        }

    }

    /**

     * 获取类别数据

     */

    private void getData() {

        for (int i = 0; i < 6; i++) {

            Map<String, Object> map = new HashMap<>();

            data.add(map);

        }

        adapter.notifyDataSetChanged();

    }

    @OnClick(R.id.tv_search)

    public void onClick(View view) {

        switch (view.getId()) {

            case R.id.tv_search:

                if (drawerLayout.isDrawerOpen(Gravity.RIGHT)) {

                    drawerLayout.closeDrawer(Gravity.RIGHT);

                } else {

                    drawerLayout.openDrawer(Gravity.RIGHT);

                }

                break;

        }

    }

}

因为这里的側滑视图是从右側滑动出现的，因此側滑视图的layout_gravity设置为right或者end，假设是左滑就设置为left或者start。

当我们手动控制側滑视图的打开或者关闭的时候，须要运行下面代码：

//close

drawerLayout.closeDrawer(Gravity.RIGHT);

//open

drawerLayout.openDrawer(Gravity.RIGHT);

至此DrawerLayout的基本使用就已经掌握了，更深入的了解DrawerLayout，请參考Google官方文档Creating a Navigation Drawer。

项目源代码：https://github.com/leoleohan/DrawerLayoutDemo