Android 侧滑栏-NavigationView的使用(全网最简单明了)

Android 侧滑栏

1.导入依赖（build.gradle)

因为需要用到 ” NavigationView “ Android是没有自带的

implementation 'com.android.support:design:29.0.1'

2.布局界面

nav_menu.xml——导航菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/fragment_05"
            android:title="界面1" />
        <item
            android:id="@+id/fragment_06"
            android:title="界面2" />
        <item
            android:id="@+id/fragment_07"
            android:title="界面3" />
        <item
            android:id="@+id/fragment_08"
            android:title="界面4" />
        <item
            android:id="@+id/fragment_09"
            android:title="界面5" />
        <item
            android:id="@+id/fragment_10"
            android:title="界面6" />
    </group>
</menu>

nav_header.xml——NavigationView布局中的头部布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <ImageView
        android:id="@+id/icon_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/icon_image"
        android:layout_margin="10dp"
        android:text="用户名"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username"
        android:layout_margin="10dp"
        android:text="***@qq.com"
        android:textSize="14sp"
        android:textColor="@android:color/black"/>

</RelativeLayout>

以上代码效果为：一个头像，一个昵称，一个邮箱号；

activity_main——主界面

<?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:custom="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:orientation="horizontal"
                android:background="@color/colorPrimary"
                >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <ImageButton
                        android:id="@+id/btn_nva"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:paddingLeft="10dp"
                        android:src="@drawable/nav"
                        android:background="@null"
                        />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/textView_topTitle"
                        android:text="标题"
                        android:textSize="25dp"
                        android:textColor="@color/colorTitle"
                        android:layout_gravity="center_vertical"
                        android:textAlignment="center"
                        custom:ignore="RtlCompat" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="horizontal">

                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
            <FrameLayout
                android:id="@+id/content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1">
            </FrameLayout>
        </LinearLayout>
    </RelativeLayout>
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

界面效果为：一个顶部标题栏（内含三个模块布局），一个碎片布局，左边为侧滑栏布局

其中主要实现NavigationView（侧滑栏）语句为：

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>

android:layout_gravity：侧滑栏打开位置（start，left，right）
app:headerLayout：侧滑栏头部布局
app:menu：侧滑栏菜单

3.Java代码部分

//package com.example.jnjs_10_14;

import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;

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

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener, NavigationView.OnNavigationItemSelectedListener {
    
    

    private TextView textView_topTitle;
    private FrameLayout content;
    private NavigationView nav_view;
    private ImageButton btn_nva;
    private DrawerLayout drawer_layout;

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

    private void initView() {
    
    
        textView_topTitle = (TextView) findViewById(R.id.textView_topTitle);//标题
        content = (FrameLayout) findViewById(R.id.content);//Fragment碎片布局
        //左侧隐藏的NavigationView布局
        nav_view = (NavigationView) findViewById(R.id.nav_view);
        nav_view.setNavigationItemSelectedListener(this);//nva菜单的Item点击事件钮监听
        //左上角导航按钮
        btn_nva = (ImageButton) findViewById(R.id.btn_nva);
        btn_nva.setOnClickListener(this);//监听是否按下导航按钮
        //activity_main文件内最外层布局
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer_layout.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
    
    
        switch (v.getId()){
    
    
            case R.id.btn_nva://左上角导航按钮
                drawer_layout.openDrawer(GravityCompat.START);//设置左边菜单栏显示出来
                break;
        }
    }

    /*
        侧滑栏导航item点击事件监听
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    
    
        switch (menuItem.getItemId()){
    
    
            case R.id.fragment_05:
                Toast.makeText(MainActivity.this, "界面1", Toast.LENGTH_SHORT).show();
                //加载碎片
                getSupportFragmentManager().beginTransaction().replace(R.id.content,new Fragment_05()).commit();
                drawer_layout.closeDrawer(GravityCompat.START);//关闭侧滑栏
                break;
            case R.id.fragment_06:
                Toast.makeText(MainActivity.this, "界面2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.fragment_07:
                Toast.makeText(MainActivity.this, "界面3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.fragment_08:
                Toast.makeText(MainActivity.this, "界面4", Toast.LENGTH_SHORT).show();
                break;
            case R.id.fragment_09:
                Toast.makeText(MainActivity.this, "界面5", Toast.LENGTH_SHORT).show();
                break;
            case R.id.fragment_10:
                Toast.makeText(MainActivity.this, "界面6", Toast.LENGTH_SHORT).show();
                break;
        }
        return false;
    }
}

以上代码实现了点击按钮弹出侧滑栏，对于滑动弹出侧滑栏的代码只需要使用“滑动监听”配合以下代码即可

drawer_layout.openDrawer(GravityCompat.START);//设置左边菜单栏显示出来
drawer_layout.closeDrawer(GravityCompat.START);//关闭侧滑栏

在网上找了很久的“点击按钮弹出侧滑栏”的侧滑栏教程，很多都没有讲到这个，真的很难受，最后自己总结了一套简单的侧滑栏综合教程，希望能帮到各位