Android 实现左侧导航栏：NavigationView是什么？NavigationView和Navigation搭配使用

news2024/10/1 3:33:00

一、实现左侧导航栏

在这里插入图片描述由于Android这边没有直接提供左侧导航栏的控件，所以我尝试了很多方法，但ui都有很多局限，使用BottomNavigationView达不到如下这种效果，并且我想结合Navigation来使用，简化跳转以及创建fragment的流程。所以呢，研究了一下NavigationView和Navigation搭配使用。

二、NavigationView是什么

NavigationView是一种用于实现应用导航功能的侧滑菜单控件。

NavigationView是Navigation在Android开发中的一个具体实现，特别是用于侧边导航菜单的控件。

Navigation则是一个更广泛的概念，指的是支持用户导航、进入和退出应用中不同内容片段的交互机制。它不仅限于某个特定的控件或组件，而是涵盖了应用中所有与导航相关的功能和设计。

三、NavigationView和Navigation搭配使用

首先，我们先创建NavigationView

（1）创建Menu

在这里插入图片描述

这里我们就先创建两个菜单项

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/backstage_datastatfragment"
        android:title="首页" />
    <!--暂时不使用数据统计的功能-->
    <item
        android:id="@+id/backstage_errorstatfragment"
        android:title="数据统计"/>
</menu>

（2）创建NavigationView，通过menu属性，绑定刚才创建的菜单项

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="@drawable/dingdian_pic_background_sys">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/bnv_main_navigationbar"
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:paddingHorizontal="9dp"
        app:itemBackground="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/backstage_menu_setting" />

</androidx.constraintlayout.widget.ConstraintLayout>

（3）创建Navigation

【参考：这篇文章Android Jetpack(一)：Navigation】https://blog.csdn.net/qq_40853919/article/details/139973342

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="@drawable/dingdian_pic_background_sys">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/bnv_main_navigationbar"
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:paddingHorizontal="9dp"
        app:itemBackground="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/backstage_menu_setting" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/home_fragmentcontainerview"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/bnv_main_navigationbar"
        app:navGraph="@navigation/backstage_nav" />

</androidx.constraintlayout.widget.ConstraintLayout>

backstage_nav的内容

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/backstage_nav"
    app:startDestination="@id/backstage_datastatfragment">

    <fragment
        android:id="@+id/backstage_datastatfragment"
        android:name="com.quyunshuo.wanandroid.home.ui.fragment.DataStatFragment"
        android:label="DataStatFragment" />
    <fragment
        android:id="@+id/backstage_errorstatfragment"
        android:name="com.quyunshuo.wanandroid.home.ui.fragment.ErrorStatFragment"
        android:label="ErrorStatFragment" />
</navigation>

（1）DataStatFragment的布局内容
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/backstage_textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="errorstat"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

（2）ErrorStatFragment的内容
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/backstage_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Datastat"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

注意，menu中item的id值必须与Navigation.xml 中定义的fragment的id对应不然点击没有反应

（4）在activity中进行导航跳转

 override fun BackstageActivitySettingBinding.initView() {

        bnvMainNavigationbar.setNavigationItemSelectedListener{
        //使用navigation的方法来直接跳转，因为id相同，就可以直接跳转。
            val findNavController = findNavController(homeFragmentcontainerview.id)
            findNavController.navigate(it.itemId)
            true

        }
    }

运行程序，点击界面会发生变化。

在这里插入图片描述

四、NavigationView的其他方法

（1）比如我们要给菜单的item增加icon，那么可以使用如下这个属性

在这里插入图片描述
（2）其他属性

app:headerLayout="@layout/navigation_layout"NavigationView的头部布局，指定了一个布局文件作为NavigationView的头部布局。这个头部布局通常包含一些静态信息，如用户的头像和用户名。

android:paddingHorizontal="9dp"：为NavigationView设置了水平方向上的内边距（即左右两边）

app:itemTextAppearance="@style/Menu"：指定了菜单项文本的外观样式。

总结：NavigationView和Navigation的搭配使用，Navigation简化了非常多的fragment跳转逻辑以及创建，让我们使用起来更加的舒服和方便。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1979741.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！