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跳转逻辑以及创建,让我们使用起来更加的舒服和方便。

相关推荐
_李小白5 小时前
【Android FrameWork】延伸阅读:SurfaceFlinger线程
android
csdn12259873366 小时前
JetPack Compose 入门先搞清楚
android·compose·jetpack
liang_jy7 小时前
Android LaunchMode
android·面试
阿里云云原生8 小时前
Android App 崩溃排查实战:如何利用 RUM 完整数据与符号化技术定位问题?
android·阿里云·云原生·rum
过期动态8 小时前
JDBC高级篇:优化、封装与事务全流程指南
android·java·开发语言·数据库·python·mysql
没有了遇见10 小时前
Android 音乐播放器之MotionLayout实现View流畅变换
android
TheNextByte111 小时前
在 PC 和Android之间同步音乐的 4 种方法
android
君莫啸ོ11 小时前
Android基础-Activity属性 android:configChanges
android
TimeFine12 小时前
Android AI解放生产力(七):更丰富的AI运用前瞻
android
保持低旋律节奏12 小时前
linux——进程状态
android·linux·php