Android使用DrawerLayout实现侧滑菜单效果

一、概述

drawerlayout是一个可以方便的实现android侧滑菜单的组件，我最近开发的项目中也有一个侧滑菜单的功能，于是drawerlayout就派上用场了。如果你从未使用过drawerlayout，那么本篇博客将使用一个简单的案例带你迅速掌握drawerlayout的用法。

二、效果图

三、代码实现

主布局activity_main.xml

<?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>

to use a drawerlayout, position your primary content view as the first child with a width and height of match_parent. add drawers as child views after the main content view and set the layout_gravity appropriately. drawers commonly use match_parent for height with a fixed width.

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

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

drawer_content.xml

<?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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。