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

志不强者智不达,言不信者行不果。这篇文章主要讲述Android 使用DrawerLayout高速实现側滑菜单相关的知识,希望能为你提供帮助。
一、概述DrawerLayout是一个能够方便的实现android側滑菜单的组件,我近期开发的项目中也有一个側滑菜单的功能。于是DrawerLayout就派上用场了。假设你从未使用过DrawerLayout。那么本篇博客将使用一个简单的案例带你迅速掌握DrawerLayout的使用方法。
二、效果图

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

文章图片

三、代码实现
主布局activity_main.xml
< ?
xml version="1.0" encoding="utf-8"?
【Android 使用DrawerLayout高速实现側滑菜单】> < 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>

这个布局文件就是側滑视图,如图:
Android 使用DrawerLayout高速实现側滑菜单

文章图片

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 = https://www.songbingjia.com/android/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

    推荐阅读