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

相关推荐
doublelixin4 小时前
AOSP (Android11) 集成Google GMS三件套
android
xzkyd outpaper7 小时前
onSaveInstanceState() 和 ViewModel 在数据保存能力差异
android·计算机八股
CYRUS STUDIO8 小时前
FART 脱壳某大厂 App + CodeItem 修复 dex + 反编译还原源码
android·安全·逆向·app加固·fart·脱壳
WAsbry8 小时前
现代 Android 开发自定义主题实战指南
android·kotlin·material design
xzkyd outpaper9 小时前
Android动态广播注册收发原理
android·计算机八股
唐墨1239 小时前
android与Qt类比
android·开发语言·qt
林林要一直努力10 小时前
Android Studio 向模拟器手机添加照片、视频、音乐
android·智能手机·android studio
AD钙奶-lalala10 小时前
Mac版本Android Studio配置LeetCode插件
android·ide·android studio
散人102411 小时前
Android Test3 获取的ANDROID_ID值不同
android·unit testing
雨白11 小时前
实现动态加载布局
android