Android滑出菜单和悬浮按钮的实现

<FrameLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<android.support.design.widget.NavigationView

android:id=“@+id/nav_view”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_gravity=“start”

android:background=“@drawable/lanhua”

app:headerLayout=“@layout/nav_header”

app:menu=“@menu/nav_menu”>

</android.support.design.widget.NavigationView>

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

其中的FrameLayout布局就是用来放主屏幕的配置文件的，剩下的这个布局就是显示在滑动菜单的内容了，这边可以写任意的布局文件，上面的这个NavigationView也是谷歌官方的Design Support库中提供的一个控件，具体用法就上面这样，该控件也分为两部分显示，跟手机qq类似，这边需要注意的一个点是 这里控件的layout_gravity必须指定，我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边，指定left表示滑动菜单在左边，指定right表示滑动菜单在右边。这边指定为start，表示会根据系统语言进行判断，如果系统语言是从左往右的，比如英语，汉语，滑动窗口就在左边，如果系统语言是从右往左的，不如阿拉伯语，滑动窗口就在右边。

下面是他的header文件和menu文件。

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

android:layout_width=“match_parent”

android:padding=“10dp”

android:layout_height=“180dp”>

<de.hdodenhof.circleimageview.CircleImageView

android:id=“@+id/iconimage”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:layout_centerInParent=“true”

android:src=“@drawable/pig”

/>

<TextView

android:id=“@+id/mail”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentBottom=“true”

android:text=“avdsda@163.com”

android:textColor=“#FFF”

android:textSize=“16sp”

/>

<TextView

android:id=“@+id/name”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_above=“@+id/mail”

android:text=“蔡虚鲲”

android:textColor=“#FFF”

android:textSize=“16sp”/>

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

<item android:id=“@+id/nav_call”

android:title=“电话”

android:icon=“@drawable/call”/>

<item android:id=“@+id/nav_friends”

android:title=“好友”

android:icon=“@drawable/friend”/>

<item android:id=“@+id/nav_mail”

android:title=“邮箱”

android:icon=“@drawable/mail”/>

<item android:id=“@+id/nav_address”

android:title=“地址”

android:icon=“@drawable/address”/>

<item android:id=“@+id/task”

android:title=“任务”

android:icon=“@drawable/task”/>

<item android:id=“@+id/setting”

android:title=“设置”

android:icon=“@drawable/setting”/>

对menu没什么好说的，上面header文件中，CircleImageView，顾名思义就是显示一个圆形图片，具体用法可以参照我的写法。理论上来说这样就算可以了，运行程序后在屏幕的左边向右滑动一下就可以显示出我们刚刚写的滑动菜单了，如图：

然后向左滑动或者点击菜单以外的区域，都可以让滑动菜单关闭，从而回到主界面。无论是展示还是隐藏滑动菜单，都是有非常流畅的国度动画的。等等！这样还不够！如果只是这样，你开发者当然知道这里有一个滑动菜单，但是用户却不知道，所以我们需要设置一个引导。

首先我们需要准备一张导航按钮的图片，包括上面用到的矢量图标们都可以去 https://www.easyicon.net/iconsearch/add/?s=addtime_DESC 下载，你也可以去阿里的矢量图标库下载，地址如下：https://www.iconfont.cn/ ，下载完放到drawable目录下。下面在MainActivity中修改。

package com.example.reader;

import android.app.Activity;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBar;

import android.support.v7.app.AppCompatActivity;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawer=null;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

drawer=findViewById(R.id.drawer);//划出菜单

//设置划出菜单的图标

ActionBar actionBar=getSupportActionBar();

if(actionBar!=null){

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setHomeAsUpIndicator(R.drawable.menu);

}

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

drawer.openDrawer(GravityCompat.START);

return true;

}

return super.onOptionsItemSelected(item);

}

}

可以看到，这边要改动的代码也不多，首先加载布局文件，利用findViewById定位到DrawerLayout的实例，由于是将这个菜单放到ToolBar，所以调用getSupportActionBar获取到ActionBar的实例，该实例的具体实现是用ToolBar来完成的。接着调用ActionBar的setDisplayHomeAsUpEnabled()方法让导航按钮显示出来，又调用了setHomeAsUpIndicator()方法设置一个导航按钮图标。其实我们经常看到的就是Toolbar最左边的按钮是一个默认的叫做HomeAsUp的按钮，他默认的图标是一个返回的箭头，执行的也是返回的操作，这边将他的默认样式和图标都进行了更改。

接下来就是对像平常的菜单一样设置点击事件就好了，重写onOptionsItemSelected(MenuItem item) 函数，有一个点就是HomeAsUp按钮的id始终是android.R.id.home。然后调用DrawerLayout的openDrawer（）函数将该滑动菜单显示出来，openDrawer需要传入的参数要跟xml定义的一致，所以我们传入GravityCompat.START。重新运行后效果如下：

悬浮按钮

---

现在滑出菜单已经实现了，接下来就是悬浮按钮，这边实现的是悬浮添加的按钮，这个就很简单啦，还记得我前面留了一个空布局FrameLayout吗？在FrameLayout中加入下面的额代码就好了。完整的activity_main如下：

<?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/drawer”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<FrameLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

<SearchView

android:id=“@+id/search_input”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_marginEnd=“2dp”

android:gravity=“center_vertical”

文末

架构师不是天生的，是在项目中磨练起来的，所以，我们学了技术就需要结合项目进行实战训练，那么在Android里面最常用的架构无外乎 MVC，MVP，MVVM，但是这些思想如果和模块化，层次化，组件化混和在一起，那就不是一件那么简单的事了，我们需要一个真正身经百战的架构师才能讲解透彻其中蕴含的深理。

一线互联网Android面试题总结含详解（初级到高级专题）

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
常用的架构无外乎 MVC，MVP，MVVM，但是这些思想如果和模块化，层次化，组件化混和在一起，那就不是一件那么简单的事了，我们需要一个真正身经百战的架构师才能讲解透彻其中蕴含的深理。

[外链图片转存中…(img-Bwqp6aUN-1714556018243)]

[外链图片转存中…(img-FI00zlM7-1714556018246)]

一线互联网Android面试题总结含详解（初级到高级专题）

[外链图片转存中…(img-2L7mCj40-1714556018247)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！