实践案例:使用Jetpack Navigation创建一个新闻应用

在这里插入图片描述

在这个实践案例中,我们将使用Jetpack Navigation创建一个简单的新闻应用。这个应用将包含以下功能:

  1. 新闻列表页面:显示一组新闻文章。
  2. 新闻详情页面:显示选定新闻文章的详细信息。
  3. 用户资料页面:显示用户的资料信息。

我们将通过导航图、传递数据、处理返回操作和集成底部导航来展示Jetpack Navigation的强大功能。

第一步:项目设置

添加依赖项

build.gradle文件中添加必要的依赖项:

dependencies {def nav_version = "2.4.0"implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"implementation "androidx.navigation:navigation-ui-ktx:$nav_version"implementation "com.google.android.material:material:1.4.0"
}

创建导航图

res/navigation目录中创建一个新的导航图文件nav_graph.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"xmlns:tools="http://schemas.android.com/tools"app:startDestination="@id/newsListFragment"><fragmentandroid:id="@+id/newsListFragment"android:name="com.example.newsapp.NewsListFragment"android:label="News List"tools:layout="@layout/fragment_news_list" ><actionandroid:id="@+id/action_newsListFragment_to_newsDetailFragment"app:destination="@id/newsDetailFragment" /><actionandroid:id="@+id/action_newsListFragment_to_userProfileFragment"app:destination="@id/userProfileFragment" /></fragment><fragmentandroid:id="@+id/newsDetailFragment"android:name="com.example.newsapp.NewsDetailFragment"android:label="News Detail"tools:layout="@layout/fragment_news_detail" ><argumentandroid:name="articleId"app:argType="integer" /></fragment><fragmentandroid:id="@+id/userProfileFragment"android:name="com.example.newsapp.UserProfileFragment"android:label="User Profile"tools:layout="@layout/fragment_user_profile" /></navigation>

主Activity布局

创建主Activity布局文件activity_main.xml,包含一个NavHostFragmentBottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/nav_host_fragment"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="0dp"android:layout_height="0dp"app:defaultNavHost="true"app:navGraph="@navigation/nav_graph"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toTopOf="@id/bottom_nav"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent" /><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottom_nav"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="start"app:menu="@menu/bottom_nav_menu"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout></androidx.drawerlayout.widget.DrawerLayout>

BottomNavigationView菜单

res/menu目录中创建bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/newsListFragment"android:icon="@drawable/ic_news"android:title="News" /><itemandroid:id="@+id/userProfileFragment"android:icon="@drawable/ic_profile"android:title="Profile" />
</menu>

主Activity

MainActivity.kt中设置NavControllerBottomNavigationView

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)val navController = findNavController(R.id.nav_host_fragment)val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_nav)bottomNavigationView.setupWithNavController(navController)}override fun onSupportNavigateUp(): Boolean {val navController = findNavController(R.id.nav_host_fragment)return navController.navigateUp() || super.onSupportNavigateUp()}
}

第二步:创建Fragment

新闻列表Fragment

创建NewsListFragment.kt,显示一组新闻文章。

class NewsListFragment : Fragment(R.layout.fragment_news_list) {override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)val navController = findNavController()// 示例数据val articles = listOf("Article 1", "Article 2", "Article 3")val adapter = ArrayAdapter(requireContext(), android.R.layout.simple_list_item_1, articles)view.findViewById<ListView>(R.id.newsListView).adapter = adapterview.findViewById<ListView>(R.id.newsListView).setOnItemClickListener { _, _, position, _ ->val action = NewsListFragmentDirections.actionNewsListFragmentToNewsDetailFragment(position)navController.navigate(action)}}
}

新闻详情Fragment

创建NewsDetailFragment.kt,显示选定新闻文章的详细信息。

class NewsDetailFragment : Fragment(R.layout.fragment_news_detail) {override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)val args: NewsDetailFragmentArgs by navArgs()val articleId = args.articleIdview.findViewById<TextView>(R.id.articleTextView).text = "Displaying details for article $articleId"}
}

用户资料Fragment

创建UserProfileFragment.kt,显示用户的资料信息。

class UserProfileFragment : Fragment(R.layout.fragment_user_profile) {override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)// 示例用户信息view.findViewById<TextView>(R.id.userNameTextView).text = "John Doe"view.findViewById<TextView>(R.id.userEmailTextView).text = "john.doe@example.com"}
}

第三步:运行和测试

现在,我们已经完成了所有必要的步骤,可以运行应用程序并测试导航功能。

  • 启动应用程序,底部导航栏将显示新闻列表和用户资料页面。
  • 在新闻列表页面,点击任意文章将导航到新闻详情页面,并显示选定文章的详细信息。
  • 点击底部导航栏中的用户资料图标,将导航到用户资料页面,显示用户的相关信息。

结论

通过这个实践案例,我们展示了如何使用Jetpack Navigation创建一个简单的新闻应用。我们涵盖了设置导航图、在Fragment之间导航、传递数据、处理返回操作以及集成底部导航。Jetpack Navigation提供了强大且灵活的解决方案,使得管理复杂的导航场景变得更加简单和高效。

Best regards!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从爬取到分析:Faraday爬取Amazon音频后的数据处理

什么是Faraday&#xff1f; Faraday是一个简单、灵活的高级爬虫框架&#xff0c;支持多种编程语言。它提供了一套丰富的API&#xff0c;允许开发者快速构建复杂的爬虫应用。Faraday的主要特点包括&#xff1a; 模块化设计&#xff1a;易于扩展和自定义。多语言支持&#xff1…

Vite 动态导入警告问题解决方案

如上图我要实现从后台获取权限菜单并动态导入进行渲染 但由于 vite 暂时不支持这种导入方式 图中也给出了提示 本人也是这么去做了 但并没什么卵用 后来参考了 vite 的 import.meta.glob 这种方式 我在处理菜单权限控制的菜单里进行了如下操作&#xff1a; …

【网络架构】lvs集群

目录 一、集群与分布式 1.1 集群介绍 1.2 分布式系统 1.3 集群设计原则 二、LVS 2.1 lvs工作原理 2.2 lvs集群体系架构 ​编辑 2.3 lvs功能及组织架构 2.4 lvs集群类型中术语 三、LVS工作模式和命令 3.1 lvs集群的工作模式 3.1.1 lvs的nat模式 3.1.2 lvs的dr模式 …

从此以后,将硬件接入大语言模型(LLM)将变得如此简单~

一、前言 本文中将使用ESP-AI开源库来实现将硬件接入AI&#xff0c;整个过程将非常的轻松~ 什么是ESP-AI? 为你的开发板提供全套的AI对话方案&#xff0c;包括但不限于 ESP32 系列开发板的 IATLLMTTS 集成方案。 交流群 QQ 交流群: 854445223 技术栈 ESP-AI 分为了服务端和…

001 ElasticSearch7.x 、IK分词器、Kibana 环境搭建、安装

ElasticSearch 7.x 文章目录 ElasticSearch 7.x1.windows环境安装1.ik分词器安装2.es启动3.Kibana启动 2.Linux环境安装3.分词器1.分词测试2.ES中默认分词器3.IK分词器4.自定义分词器 1.windows环境安装 es下载地址&#xff1a; https://www.elastic.co/cn/downloads/past-rel…

超声波清洗机洗眼镜效果好吗?四大主流超声波清洗机终极大测评

清洗眼镜是日常生活中一件很麻烦的事情&#xff0c;常规的清洗方式无法完全清洁镜片上的细菌和污垢&#xff0c;而且容易造成划痕。也有很多朋友为了节省时间&#xff0c;每次清洗眼镜都用衣服衣角随便擦拭擦拭就完事了&#xff0c;但其实这样做往往会很伤眼镜&#xff0c;缩短…

矩阵新玩法,云微客AI矩阵系统开启新营销大门

在激烈的市场竞争中&#xff0c;商家企业们都在追求更加高效的营销方式&#xff0c;在如今流量至上的时代&#xff0c;短视频凭借其魅力&#xff0c;成为了众多企业吸引流量、获客引流的核心营销途径。而想要挤进短视频流量圈的你&#xff0c;是否经常听到矩阵这个词呢&#xf…

远程工具的使用

远程连接工具的作用&#xff0c;通过远程连接到服务器上&#xff0c;方便操作&#xff01; 1.常见的远程连接工具 XShell&#xff1a;这是一款Windows平台下的SSH客户端软件&#xff0c;支持SSH1、SSH2、SFTP、TELNET、RLOGIN等多种协议&#xff0c;功能丰富&#xff0c;包…

【MotionCap】conda 链接缺失的cuda库

conda 安装的环境不知道为啥python 环境里的 一些cuda库是空的要自己链接过去。ln 前面是已有的,后面是要新创建的 ln -s <path to the file/folder to be linked> cuda 有安装 libcublas 已经在cuda中 (base) zhangbin@ubuntu-server:~/miniconda3/envs/ai-mocap/lib/…

智能语音新革命:有道与Azure的API服务对决

在当今技术飞速发展的时代&#xff0c;API&#xff08;应用程序接口&#xff09;已经成为连接不同软件和服务的桥梁。无论是开发移动应用、构建网页服务&#xff0c;还是实现物联网设备的互联互通&#xff0c;API都在其中扮演着不可或缺的角色。随着市场上各种API接口的涌现&am…

整数智能与上海数据交易所携手,共筑数据要素市场新篇章

近期&#xff0c;整数智能荣获上海数据交易所“数据治理服务商”证书&#xff0c;正式加入上海数据交易所数商生态&#xff0c;成为上海数据交易所官方认证的数据治理服务商。 在数字经济的浪潮中&#xff0c;上海数据交易所一直扮演着引领者和推动者的角色。紧扣建设国家级…

8大趋势,重塑金融服务行业

谈论“金融服务行业”就像谈论“亚洲大陆”。这是因为&#xff0c;通用行业概念但它掩盖了许多细分领域的细微差别和多样性&#xff0c;以及人们思考、工作和感受方式的巨大差异。 银行应用程序和一个量化交易公司都是金融服务公司&#xff0c;但它们的运营方式可能天壤之别。…

Quads,一个无敌的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个无敌的 Python 库 - Quads。 Github地址&#xff1a;https://github.com/fogleman/Quads 在科学计算和工程应用中&#xff0c;数值积分是一个常见的问题。Python的Quads库…

WiFi模块ESP8266同阿里物联网云平台连接(超详细)

写在前面&#xff1a;本节主要的内容是利用ESP8266模块&#xff0c;同阿里云物联网平台的连接&#xff0c;为后面的实现数据的远程展示与处理做好铺垫。 本节的主要内容分为一下几个阶段进行&#xff1a; 1、阿里云物联网平台的创建2、阿里云 IOT studio界面绘制3、mqtt.fx软件…

Web服务器与Apache(虚拟主机基于ip、域名和端口号)

一、Web基础 1.HTML概述 HTML&#xff08;Hypertext Markup Language&#xff09;是一种标记语音,用于创建和组织Web页面的结构和内容&#xff0c;HTML是构建Web页面的基础&#xff0c;定义了页面的结构和内容&#xff0c;通过标记和元素来实现 2.HTML文件结构 <html>…

【初阶数据结构】二叉树(附题)

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念&#xff08;树结构的相关概念命名参考自然树和人的血缘关系&#xff09; 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff0c;初次之外网盘中使用到&#xff09; 2.二叉树概念及结构 …

【pytorch08】拼接与拆分

1.拼接与拆分 CatStackSplitChunk 2.Cat 有两张成绩单 [class1-4,students,scores] [class5-9,students,scores]’ 要把这两个成绩单合并在一起 如何理解该行为 注意&#xff1a;班级情况中 A的tensor是[4,32,8],B的tensor是[5,32,8]如果我们是在0维上进行拼接&#xff0c;要…

“水刊”来了!专注发表水方向的SCI刊物,此“水刊”非彼水刊

【SciencePub学术】曾经的超级“水刊”《WATER SUPPLY》因为触碰红线&#xff0c;现在依旧被“on hold”中&#xff0c;解封日期恐怕也是遥遥无期。 来源&#xff1a;科睿唯安官网 后台有人私信小编有没有关于“水”类的期刊推荐&#xff0c;小编后台整理了一下&#xff0c;今…

step6:改用单例模式

文章目录 文章介绍codemain.cppSerialPort.qmlSerialPortHandler.h 文章介绍 案例MF改为单例模式 参考之前写过的关于单例模式的文章单例模式1、单例模式2 code main.cpp qmlRegisterSingletonType(“com.example.serialport”, 1, 0, “SerialPortHandler”, SerialPortHan…

《software architecture patterns》学习笔记

了解通用的架构模式并知道什么时候使用它们。 软件架构定义了软件的基本特点和行为。比如&#xff0c;有些软件架构会让软件变得可扩展&#xff0c;而有些软件架构会让软件变得易于修改。 知道每一种软件架构的特点、优缺点是非常有必要的&#xff0c;因为它们能帮助你选择一种…