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

目录

1)左侧导航栏效果图

2)NavigationView是什么?

3)NavigationView和Navigation搭配使用

4)NavigationView的其他方法

一、实现左侧导航栏

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

二、NavigationView是什么


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

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

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

三、NavigationView和Navigation搭配使用


首先,我们先创建NavigationView

(1)创建Menu

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

xml 复制代码
<?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 复制代码
<?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 复制代码
<?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 复制代码
<?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中进行导航跳转

kt 复制代码
 override fun BackstageActivitySettingBinding.initView() {

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

        }
    }

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

四、NavigationView的其他方法


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

(2)其他属性

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

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

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

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

相关推荐
梦想三三14 分钟前
LangChain Output Parser 实战:从字符串到结构化数据的完整指南
android·服务器·langchain·github·uv
爱笑鱼2 小时前
Binder(八):远端进程死了,BinderProxy 为什么还能收到通知?
android
Android-Flutter3 小时前
Kotlin 冷流与热流详解
android·kotlin
zhangphil3 小时前
Android ContentProvider/ContentResolver读图片,跨进程 IPC慢
android
yueqc13 小时前
Android .so 文件压缩
android·so·包体积
龚礼鹏4 小时前
深入解析 Android Automotive (AAOS) 启动流程与 CarService 核心机制(基于 Android 16 最新源码视角)
android
rosmis4 小时前
agent各指标定义
android·java·开发语言
风样滴男人哟5 小时前
PHP特性之反射类ReflectionClass机制
android·开发语言·php
小孔龙6 小时前
RenderNode 与 DisplayList:Android 硬件加速的绘制记录与复用
android·性能优化
qizayaoshuap6 小时前
鸿蒙 ArkTS 实战:搜索列表 城市实时过滤(示例 94)
android·华为·harmonyos