【Jetpack】Navigation 导航组件 ⑤ ( NavigationUI 类使用 )

编程语言 2023-09-03 08:57:19 阅读次数: 0

文章目录


代码地址 :


NavigationUI 类支持一些系统自带的控件 , 配置后 , 自动跳转 Fragment 界面的功能 , 使用起来非常简洁 , 支持的可配置 Navigation 跳转的控件有 :

  • ActionBar
  • ToolBar
  • CollapsingToolbarLayout
  • Menu

在 Android 开发中 , NavigationUI 是 用于构建 和 管理应用程序导航界面 的重要工具 , 可以极大地提高开发效率 ;





一、NavigationUI 类简介


NavigationUI 是 Google 官方提供的 用于管理 Navigation 导航的组件 , 属于 Android 系统的 Jetpack 工具包 ;

借助 NavigationUI 可以很方便的 创建和组织应用程序的导航界面 ;

如 : 构建复杂的导航结构，垂直或水平的主菜单 , 侧边栏 , 抽屉导航栏等 ;


开发者 可以 通过 NavigationUI 轻松地管理页面的转换和导航 ;

NavigationUI 提供了一些静态方法来处理 顶部应用栏 / 抽屉式导航栏 / 底部导航栏中 的界面导航 ;


本篇博客中介绍一种使用场景 : 使用 AppBar 中的菜单选项控制 Navigation 界面跳转 ;

在 Activity 中 , 使用 Navigation 组件 切换 Fragment 界面时 , 除了进行界面切换之外 , 不同的界面对应的顶部 标题栏 AppBar 需要进行相应的改变 ;

Navigation 组件中 , 提供了 NavigationUI 类 , 统一管理 Fragment 页面切换相关的 UI 改变 ;





二、NavigationUI 类使用流程


本章节介绍使用 AppBar 中的菜单选项控制 Navigation 界面跳转 的流程 ;


1、创建 Fragment


创建两个 Fragment , 分别作为要 互相跳转 的 两个界面 ;

右键点击包名 , 选择 " New / Fragment / Fragment (Blank) " 选项 ,

在这里插入图片描述

在弹出的界面中 , 输入 Fragment 名称 , 创建新的 Fragment ;

在这里插入图片描述

创建 Fragment 时 , 会自动生成对应的 布局文件 :

在这里插入图片描述


注意 : 该操作比较坑 , 生成 Fragment 时 , 会自动添加 Kotlin 语言插件的 Gradle 依赖 , 必要时可以删除该依赖 ; 自动生成的依赖没有配置 Maven 源 , 会报错 ;

buildscript {
    
    
    dependencies {
    
    
        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0-RC2'
    }
}

2、创建 NavigationGraph


创建完 Fragment 之后 , 才能开始创建 NavigationGraph , 否则没有对应的 Fragment 选项 ;

创建 NavigationGraph ,

右键点击 res 目录 , 选择 " New / Android Resource File " 选项 ,

在这里插入图片描述

在弹出的 " New Resource File " 对话框中 , 设置 文件名 , 资源类型 , 目录名称 ;

在这里插入图片描述

下面开始编辑 NavigationGraph , 进入 Design 模式后 , 会提示 Design editor is unavailable until after a successful project sync , 这是因为创建 Fragment 之后 , 还没有进行第一次编译 ,

在这里插入图片描述

选择 " 菜单栏 / Build / Make Project " 选项 , 编译一次应用 ;

在这里插入图片描述

编译成功之后 , 就可以使用 NavigationGraph 的 Design 模式 ;

在这里插入图片描述

点击 " New Destination " 按钮 , 添加两个 Fragment 到 NavigationGraph 中 ;

在这里插入图片描述

将两个 Fragment 添加到 NavigationGraph 中 , 不需要做其它配置 ;

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/my_navigation_graph"
    app:startDestination="@id/fragmentA">

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.app2.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" />
    <fragment
        android:id="@+id/fragmentB"
        android:name="kim.hsl.app2.FragmentB"
        android:label="fragment_b"
        tools:layout="@layout/fragment_b" />
</navigation>

在这里插入图片描述

设置默认的 Fragment , 在根标签 navigation 中 ,

app:startDestination="@id/fragmentA"

配置 , 用于配置默认的初始 Fragment 是哪一个 ;


3、Activity 导入 NavHostFragment


进入 Launcher 界面 MainActivity 的布局中 , 删除布局中的其它元素 ;

将 NavHostFragment 拖入到 布局中 ,
在这里插入图片描述

拖入空间到布局后 , 松开鼠标 , 会弹出如下 " Navigation Graph " 对话框 , 选择要拖入的 NavigationGraph , 然后点击右下角 " OK " 按钮 ;

在这里插入图片描述

拖入后 , 为该空间添加约束 , 最终源码如下 :

<?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"
    tools:context=".MainActivity">

    <!--<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />-->

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_navigation_graph"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"  />
    
</androidx.constraintlayout.widget.ConstraintLayout>

4、创建菜单


右键点击 res 目录 , 选择 " New / Android Resource File " 选项 ,

在这里插入图片描述

在弹出的 " New Resource File " 对话框中 , 选择 资源类型为 Menu 菜单类型 , 目录名称是 menu , 然后输入 文件名 , 点击 " OK " 按钮 , 创建菜单 ;

在这里插入图片描述

创建完毕后 , 在该菜单配置文件中 , 配置 android:id="@+id/fragmentB" , 其含义是跳转到 NavigationGraph 中 id 为 fragmentB 对应的 Fragment 界面中 , 也就是跳转到 FragmentB 界面 , 触发该菜单选项 , 就会跳转到 FragmentB 界面 ;

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/fragmentB"
        android:icon="@mipmap/ic_launcher"
        android:title="跳转到 Fragment B"/>
</menu>

5、Activity 界面开发 NavigationUI 的主要逻辑 ( 重点 )



a、添加 Fragment 布局


在 Activity 的布局文件中 , 添加如下代码 , 不建议在 Design 界面直接拖动 NavHostFragment , 生成的代码报错 , 直接拷贝下面的代码即可 ;

将 app:navGraph="@navigation/my_navigation_graph" 修改成你自己创建的 NavigationGraph 即可 ;

name 属性必须设置成 android:name="androidx.navigation.fragment.NavHostFragment" 样式的 ;

    <fragment
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/my_navigation_graph"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"  />

b、处理 Navigation 导航逻辑 ( 重点 )


首先 , 获取 NavController , 从布局文件中定义的 Fragment 布局中获取 ;

        // 1. 获取 NavController
        navController = Navigation.findNavController(this, R.id.fragmentContainerView)

然后 , 创建 AppBarConfiguration , 这是之后绑定 Navigation 与 AppBar 的重要参数 ;

        // 2. 创建 AppBarConfiguration
        appBarConfiguration = AppBarConfiguration.Builder(navController.graph).build()

再后 , 将 Navigation 导航 与 AppBar 进行关联 , 关联后 , 就可以使用 菜单 选项进行界面跳转了 ;

        // 3. 将 Navigation 导航 与 AppBar 进行关联
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)

最后 , 监听 Navigation 页面切换状态 , 如果通过 Navigation 切换了界面 , 会触发 DestinationChangedListener 监听器的 onDestinationChanged 函数 ;

        // 4. 监听页面切换状态
        navController.addOnDestinationChangedListener{
    
    
                /*
                    相当于重写了下面的函数
                    public fun onDestinationChanged(
                        controller: NavController,
                        destination: NavDestination,
                        arguments: Bundle?)
                 */
                navController: NavController, navDestination: NavDestination, bundle: Bundle? ->

c、启用菜单选项


重写 Activity 的 onCreateOptionsMenu 方法 , 加载资源文件中的菜单 ,

此时 只加载菜单 , 此时不能跳转 , 需要重写 onOptionsItemSelected 方法才可以 ;

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    
    
        super.onCreateOptionsMenu(menu)
        // 加载资源文件中的菜单
        // 只加载菜单 , 此时不能跳转 , 需要重写 onOptionsItemSelected 方法才可以
        menuInflater.inflate(R.menu.my_menu, menu)
        return true
    }

d、使用菜单进行 NavigationUI 导航


只显示菜单是不行的 , 还需要设置菜单的行为 , 重写了该方法 , 菜单选项才能生效 ,

NavigationUI.onNavDestinationSelected(item, navController) 代码的含义是 : 优先使用 NavigationUI 进行导航 ,

如果跳转失败 , 再使用传统的方式执行默认动作 , 代码为 super.onOptionsItemSelected(item) ;

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    
    
        // 重写了该方法 , 菜单选项才能生效
        // 优先使用 NavigationUI 进行导航 , 如果跳转失败 , 再使用传统的方式
        return NavigationUI.onNavDestinationSelected(item, navController)
                || super.onOptionsItemSelected(item)
    }

e、支持导航回退功能


默认状态下通过 Navigation 导航 , 跳转到 FragmentB 后是无法返回的 , 如果想要返回, 需要重写 onSupportNavigateUp 方法 ;

NavigationUI.navigateUp(navController, appBarConfiguration) 的作用就是将 Navigation 导航切换界面 , 记录到回退栈中 ;

    // 默认状态下进入 FragmentB 后是无法返回的
    // 如果想要返回, 需要重写 onSupportNavigateUp 方法
    override fun onSupportNavigateUp(): Boolean {
    
    
        return NavigationUI.navigateUp(navController, appBarConfiguration)
                || super.onSupportNavigateUp()
    }




三、完整源码示例 - NavigationUI 类使用



1、Fragment 相关源码



a、FragmentA 界面的 Kotlin 源码和布局文件


FragmentA 基本是默认代码 , 删除了参数传递相关的逻辑 , 显得更加简洁 ;


FragmentA 代码 :

package kim.hsl.app2

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class FragmentA : Fragment() {
    
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
    
    
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_a, container, false)
    }
}

布局文件 :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentA">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="FragmentA" />

</FrameLayout>

b、FragmentB 界面的 Kotlin 源码和布局文件


在该界面中 , 设置了 隐藏 AppBar 中的 菜单按钮 的功能 , 跳转到 FragmentB 之后 , 右上角 就不再显示菜单按钮 ;


FragmentB 代码 :

package kim.hsl.app2

import android.os.Bundle
import android.view.*
import androidx.fragment.app.Fragment

class FragmentB : Fragment() {
    
    

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
    
    
        // 确保 onCreateOptionsMenu 函数执行
        setHasOptionsMenu(true)
        // 为 Fragment 加载布局
        return inflater.inflate(R.layout.fragment_b, container, false)
    }

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    
    
        // 清空菜单
        menu.clear()
        super.onCreateOptionsMenu(menu, inflater)
    }
}

FragmentB 的布局文件 :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentB">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="FragmentB" />

</FrameLayout>

2、NavigationGraph 相关源码


在这里配置两个 Fragment , 不需要配置跳转动作 , 只需要在此处定义 Fragment 即可 ;

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/my_navigation_graph"
    app:startDestination="@id/fragmentA">

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.app2.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" />
    <fragment
        android:id="@+id/fragmentB"
        android:name="kim.hsl.app2.FragmentB"
        android:label="fragment_b"
        tools:layout="@layout/fragment_b" />
</navigation>

3、MainActivity 主界面相关源码 ( 重点 )


package kim.hsl.app2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.Menu
import android.view.MenuItem
import androidx.navigation.NavController
import androidx.navigation.NavDestination
import androidx.navigation.Navigation
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.NavigationUI

class MainActivity : AppCompatActivity() {
    
    

    lateinit var navController: NavController
    lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. 获取 NavController
        navController = Navigation.findNavController(this, R.id.fragmentContainerView)

        // 2. 创建 AppBarConfiguration
        appBarConfiguration = AppBarConfiguration.Builder(navController.graph).build()

        // 3. 将 Navigation 导航 与 AppBar 进行关联
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)

        // 4. 监听页面切换状态
        navController.addOnDestinationChangedListener{
    
    
                /*
                    相当于重写了下面的函数
                    public fun onDestinationChanged(
                        controller: NavController,
                        destination: NavDestination,
                        arguments: Bundle?)
                 */
                navController: NavController, navDestination: NavDestination, bundle: Bundle? ->
                Log.i("octopus", "OnDestinationChangedListener 监听器中 onDestinationChanged 函数触发")
        }
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    
    
        super.onCreateOptionsMenu(menu)
        // 加载资源文件中的菜单
        // 只加载菜单 , 此时不能跳转 , 需要重写 onOptionsItemSelected 方法才可以
        menuInflater.inflate(R.menu.my_menu, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    
    
        // 重写了该方法 , 菜单选项才能生效
        // 优先使用 NavigationUI 进行导航 , 如果跳转失败 , 再使用传统的方式
        return NavigationUI.onNavDestinationSelected(item, navController)
                || super.onOptionsItemSelected(item)
    }

    // 默认状态下进入 FragmentB 后是无法返回的
    // 如果想要返回, 需要重写 onSupportNavigateUp 方法
    override fun onSupportNavigateUp(): Boolean {
    
    
        return NavigationUI.navigateUp(navController, appBarConfiguration)
                || super.onSupportNavigateUp()
    }
}

配套的 布局文件 :

<?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"
    tools:context=".MainActivity">

    <!--<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />-->

    <fragment
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/my_navigation_graph"
        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 布局文件 :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/fragmentB"
        android:icon="@mipmap/ic_launcher"
        android:title="跳转到 Fragment B"/>
</menu>

4、执行结果


进入界面 , 显示默认的 FragmentA ,

在这里插入图片描述

点击右上角菜单栏 , 弹出 " 跳转到 FragmentB " 按钮 , 点击该菜单选项 , 跳转页面 ,

在这里插入图片描述

此时跳转到了 FragmentB 页面 , 并且触发了监听器 ,

在这里插入图片描述

点击回退按钮 , 回到了 FragmentA 界面 , 又触发了监听器 ;

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/han1202012/article/details/132544587
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022