Android 开发实现侧滑导航视图界面

效果图：

                                                                                                

一、导入工具包

（1）在build.gradle中引入design支持库【版本号跟appcompat保持一致】

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'

    //引入design库
    implementation 'com.android.support:design:29.1.1'
}

（2）修改styles.xml文件中的样式为NoActionBar【主要用于ToolBar，本Demo中没有使用ToolBar，而是模拟了ToolBar的区域，但是也需要设置为NoActionBar】

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

（3）参考《DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】》进行activity界面的布局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerLayout"
    tools:context=".MainActivity">

    <!-- 主内容视图一定要是DrawerLayout的第一个子视图【必须】 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 模拟toolbar的左侧图标 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:background="#ffffff">
            <Button
                android:id="@+id/img_menuBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="侧边栏"
                android:padding="8dp"/>
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="内容区域"
            android:textSize="22sp"
            android:layout_gravity="center"/>

    </LinearLayout>

    <!-- app:headerLayout : 指定头部布局的资源文件。
        app:menu : 指定导航菜单的资源文件。
        app:itemBackground : 指定菜单项的的背景。
        app:itemTextColor : 指定菜单项的文字颜色。
        app:itemTextAppearance : 指定菜单项的文字样式。
        app:itemIconTint : 指定菜单项的图标色彩。-->

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/nav_drawer_header"
        app:menu="@menu/nav_drawer_menu"
        android:background="#ffffff"
        app:itemTextAppearance="@style/nav_drawer_menu_text_style"
        app:itemIconTint="@color/nav_drawer_menu_text_color" />


</androidx.drawerlayout.widget.DrawerLayout>

（4）将nav_drawer_header.xml复制到项目中【根据实际情况修改UI布局】

<?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="160dp"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#F4F4F4">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"/>

</LinearLayout>

（5）将nav_drawer_menu.xml复制到项目的menu目录中【根据实际情况修改】

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group0">
        <item
            android:id="@+id/menu_info"
            android:icon="@mipmap/ic_launcher"
            android:title="个人信息"/>

        <item
            android:id="@+id/menu_pwd"
            android:icon="@mipmap/ic_launcher"
            android:title="修改密码"/>
    </group>
    <group android:id="@+id/group1">
        <item
            android:id="@+id/menu_setting"
            android:icon="@mipmap/ic_launcher"
            android:title="设置"/>

        <item
            android:id="@+id/menu_about"
            android:icon="@mipmap/ic_launcher"
            android:title="关于"/>

        <item
            android:id="@+id/menu_exit"
            android:icon="@mipmap/ic_launcher"
            android:title="退出"/>
    </group>
</menu>

（6）在styles.xml添加以下代码

    <!-- NavigationView的菜单项的文本样式 -->
    <style name="nav_drawer_menu_text_style">
        <item name="android:textColor">@color/nav_drawer_menu_text_color</item>
        <item name="android:textSize">16sp</item>
        <item name="android:padding">5dp</item>
    </style>

（7）在colors.xml中添加以下代码

    <!-- NavigationView的菜单项的文本颜色 -->
    <color name="nav_drawer_menu_text_color">#434343</color>

三、使用方法

package com.chy.test;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {

    private Button img_menuBtn;
    /**导航栏左侧的侧边栏的父容器*/
    private DrawerLayout mDrawerLayout;
    //导航视图
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initEvents();
    }
    /**
     * 初始化视图
     * */
    private void initViews() {
        // 侧滑视图
        mDrawerLayout = findViewById(R.id.drawerLayout);
        mNavigationView = findViewById(R.id.nav_view);

        // 侧滑按钮
        img_menuBtn = findViewById(R.id.img_menuBtn);
        meunClick();
    }


     /**
     * 侧滑按钮点击事件
     * */
    private void meunClick(){
        //用户图标的点击事件
        img_menuBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.openDrawer(Gravity.LEFT);
            }
        });
    }

    /**
     * 侧滑栏点击事件
     * */
    private void initEvents() {
      
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch(item.getItemId()){
                    case R.id.menu_info:
                        Toast.makeText(MainActivity.this, "个人信息", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_pwd:
                        Toast.makeText(MainActivity.this, "修改密码", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_setting:
                        Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_about:
                        Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_exit:
                        Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();
                        break;
                }
                //关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }

}

补充

如果想要更改侧边栏的menu中图标和文本的间距，需要在Activity中执行下面的java代码：

mNavigationView.setItemIconPadding(getResources().getDimensionPixelOffset(R.dimen.navigation_icon_padding));//设置侧边栏图标和文本的间距