Android 侧滑抽屉菜单(1)，涨姿势了

android:width=“24dp”

android:height=“24dp”

android:tint=“#FFFFFF”

android:viewportWidth=“24.0”

android:viewportHeight=“24.0”>

<path

android:fillColor=“@android:color/white”

android:pathData=“M4,18h16c0.55,0 1,-0.45 1,-1l0,0c0,-0.55 -0.45,-1 -1,-1H4c-0.55,0 -1,0.45 -1,1l0,0C3,17.55 3.45,18 4,18zM4,13h16c0.55,0 1,-0.45 1,-1l0,0c0,-0.55 -0.45,-1 -1,-1H4c-0.55,0 -1,0.45 -1,1l0,0C3,12.55 3.45,13 4,13zM3,7L3,7c0,0.55 0.45,1 1,1h16c0.55,0 1,-0.45 1,-1l0,0c0,-0.55 -0.45,-1 -1,-1H4C3.45,6 3,6.45 3,7z” />

这是一个白色的菜单图标，下面回到MainActivity中，先声明变量。

private DrawerLayout drawerLayout;//滑动菜单

然后在onCreate中添加如下代码：

toolbar = findViewById(R.id.toolbar);

//工具栏按钮点击

toolbar.setNavigationOnClickListener(v -> drawerLayout.openDrawer(GravityCompat.START));

点击之后打开这个滑动菜单。

下面你再运行一下：

这样就简洁雅致了很多了。

四、添加导航视图

---

现在我们的滑动菜单用的是一个LinearLayout，虽然用起来没有很大的问题，但是如果有更好的控件为什么不用呢？下面就来介绍一下NavigationView，不过要在AS中使用这个控件还需要添加一个依赖库：

打开你app下的build.gradle，在dependencies{}闭包中添加如下依赖

//添加material库

implementation ‘com.google.android.material:material:1.2.1’

添加之后记得点击Sync Now进行同步项目。

然后修改activity_main.xml，去掉之前的滑动菜单，修改的页面布局代码如下：

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

<androidx.drawerlayout.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_layout”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

tools:context=“.MainActivity”>

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:background=“@drawable/bg”

android:fitsSystemWindows=“true”>

<androidx.appcompat.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

app:navigationIcon=“@drawable/icon_menu” />

<com.google.android.material.navigation.NavigationView

android:id=“@+id/nav_view”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_gravity=“start” />

</androidx.drawerlayout.widget.DrawerLayout>

不过就算是这样，你当前还需要添加导航视图的头部视图和菜单视图。

在layout下新建一个nav_header.xml，作为导航的头部视图，常规的我们会在导航视图里面放置一些个人信息，头像，名称等。

那么头像是一个图片，而且普遍是圆形图片，常规是通过一些第三方库和自定义VIew来实现。还记得我们刚才导入的material库吗？可以用它里面的控件来实现圆形头像。

首先我们在styles.xml中增加如下代码：

然后在nav_header.xml增加一个图标控件和两个文字控件，里面代码如下：

<?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:layout_height=“160dp”

android:background=“#1391F8”

android:fitsSystemWindows=“true”

android:orientation=“vertical”>

<com.google.android.material.imageview.ShapeableImageView

android:id=“@+id/iv_avatar”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:layout_alignParentBottom=“true”

android:layout_marginStart=“24dp”

android:layout_marginBottom=“30dp”

android:padding=“1dp”

android:layout_marginEnd=“24dp”

android:src=“@mipmap/icon_default_avatar”

app:shapeAppearanceOverlay=“@style/circleImageStyle”

app:strokeColor=“#FFF”

app:strokeWidth=“2dp” />

<TextView

android:layout_marginTop=“16dp”

android:layout_alignTop=“@+id/iv_avatar”

android:id=“@+id/tv_name”

android:textSize=“16sp”

android:textColor=“#FFF”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_toEndOf=“@+id/iv_avatar”

android:text=“初学者-Study” />

<TextView

android:layout_marginTop=“8dp”

android:id=“@+id/tv_tip”

android:textSize=“14sp”

android:layout_below=“@+id/tv_name”

android:textColor=“#FFF”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_toEndOf=“@+id/iv_avatar”

android:text=“Android | Java” />

这里有一个icon_default_avatar的图标，也是我博客的头像，如下图所示

那么这个导航视图的头部就写好了，下面来写导航菜单。

在这之前能先放置五个图标，都是通过路径来绘制的。都放在drawable下。

icon_friend.xml

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

<vector xmlns:android=“http://schemas.android.com/apk/res/android”

android:width=“24dp”

android:height=“24dp”

android:tint=“#000000”

android:viewportWidth=“24.0”

android:viewportHeight=“24.0”>

<path

android:fillColor=“@android:color/black”

android:pathData=“M15,8c0,-1.42 -0.5,-2.73 -1.33,-3.76C14.09,4.1 14.53,4 15,4c2.21,0 4,1.79 4,4s-1.79,4 -4,4c-0.43,0 -0.84,-0.09 -1.23,-0.21c-0.03,-0.01 -0.06,-0.02 -0.1,-0.03C14.5,10.73 15,9.42 15,8zM16.66,13.13C18