首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

导航组件概览 | MAD Skills

概览 本文会简要概述导航组件,包括如何创建一个带有导航能力启用导航 UI 中有关包含层级细节新应用,以及对于一些主要 API 和导航组件工作原理解释。...IDE 加载完毕该应用之后,打开导航资源文件 nav_graph.xml 并在 Design 模式 (此外还有 Code 与 Split 模式) 下查看。您会看到当前应用导航样子。...我们可以用导航工具来定义新目的地,当我们还没有准备好目的地 Fragment 类时候,我们可以用占位符,也可以使用存在 Fragment 类。...应用展示了 NavigationView (抽屉导航栏) 覆盖在 activity 内容上方 接下来是 NavigationView,它是一个从左边划入抽屉导航栏。...大部分导航相关图像更新发生在 NavHostFragment 内部,但是系统中仍然存在其他需要更新且不在容器内部件,比如我们上面看到抽屉导航栏,以及类似 tab bar 元素 (该组件可以被用来展示当前目的地信息

1.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

Jetpack组件之Navigation

优点 可视化页面导航图,可以使用 Android Studio Navigation Editor 来查看和编辑导航图。 通过destination和action完成页面间导航。...页面间类型安全参数传递。 支持深层链接DeepLink。 通过NavigationUI类,对菜单、底部导航抽屉菜单导航进行统一管理。 主要元素 Navigation Graph。...使用Toolbar时,Navigation组件会自动处理导航按钮点击事件,因此无需覆盖onSupportNavigateUp()。...当用户通过显式深层链接打开应用时,任务返回堆栈会被清除,并被替换为相应深层链接页面。当用户从深层链接页面按下返回按钮时,他们会返回到相应导航堆栈。...定制FragmentNavigator 阅读FragmentNavigator源码时,可以看到页面切换时候使用是replace(),这会造成Fragment生命周期重启,界面数据重新加载,不能复用

2.9K20

【Jetpack】Navigation 导航组件 ① ( Navigation 引入 | Navigation 特点 | Navigation 重要组件 | Navigation 使用流程 )

主要功能就是帮助 Activity 管理 Fragment ; App Bar 是应用程序顶部一个可用于导航和操作应用程序界面元素。...管理 , 可以对 菜单 , 底部导航栏 , 抽屉菜单 页面及跳转逻辑 , 进行统一管理 ; 支持 DeepLink 深层链接 , 可以直接跳转到指定 Fragment 中 ; 三、Navigation...中定义 Fragment 页面 需要通过 NavHostFragment 进行展示 ; NavController 组件 : 该组件是 NavHostFragment管理对象 , 用于管理应用中导航操作...指定 Fragment 显示到 NavHostFragment 组件中 ; 四、Navigation 使用流程 ---- Navigation 使用流程 : 创建若干 Fragment 页面 创建 Navigation...Graph , 并指定要跳转 destination 页面 创建 NavHostFragment 组件 执行 Fragment 页面跳转 , 并添加动画效果 使用 NavController 组件实现页面导航

35540

深入浅出 NavigationUI | MAD Skills

这是第二个关于导航 (Navigation) MAD Skills 系列,如果您想回顾过去发布内容,请参考下面链接查看: 导航组件概览 导航到对话框 在应用中导航使用 SafeArgs 使用深层链接导航...在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉导航栏之类 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面,所以有必要使用抽屉导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...抽屉导航栏 虽然看上去不错,但是如果您设备屏幕尺寸较大,那么底部标签栏恐怕无法提供最佳用户体验。...Donut Tracker 应用并不需要底部标签栏或者抽屉导航栏,但是添加了新功能和目的页面后,NavigationUI 可以很大程度上帮助我们处理应用中导航功能。

3K30

Android Jetpack架构组件(五)之Navigation

通过destination和action完成页面间导航 方便添加页面切换动画 页面间类型安全参数传递 通过Navigation UI类,对菜单/底部导航/抽屉蓝菜单导航进行统一管理 支持深层链接...Navigation Graph:一个包含所有导航和页面关系相关 XML资源。 NavHostFragment:一种特殊Fragment,用于承载导航内容容器。...2.4 NavHostFragment 我们知道,Fragment需要有一个Activity容器才能正常运行,NavHostFragment就是承载导航内容容器,并且它需要和Activity绑定。...[在这里插入图片描述] 4.2 URL 使用URL链接方式,当用户通过手机浏览器浏览网站上某个页面时,可以通过网页浏览器方式打开对应应用页面。...如果用户手机安装有我们得应用程序,那么通过DeepLink就能打开相应页面;如果没有安装,那么网站可以导航到应用程序下载页面,从而引导用户安装应用程序。

1.2K00

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

是 Google 官方提供 用于管理 Navigation 导航组件 , 属于 Android 系统 Jetpack 工具包 ; 借助 NavigationUI 可以很方便 创建和组织应用程序导航界面...; 如 : 构建复杂导航结构,垂直或水平主菜单 , 侧边栏 , 抽屉导航栏等 ; 开发者 可以 通过 NavigationUI 轻松地管理页面的转换和导航 ; NavigationUI 提供了一些静态方法来处理...顶部应用栏 / 抽屉导航栏 / 底部导航栏中 界面导航 ; 本篇博客中介绍一种使用场景 : 使用 AppBar 中的菜单选项控制 Navigation 界面跳转 ; 在 Activity 中 ,...Activity 导入 NavHostFragment 进入 Launcher 界面 MainActivity 布局中 , 删除布局中其它元素 ; 将 NavHostFragment 拖入到 布局中..., navController) 代码含义是 : 优先使用 NavigationUI 进行导航 , 如果跳转失败 , 再使用传统方式执行默认动作 , 代码为 super.onOptionsItemSelected

61440

使用导航组件: 对话框目的地 | MAD Skills

大部分导航发生在 Fragment 目的地之间,在 UI 中 NavHostFragment 对象内部,fragment 会被替换出去。但其实导航到容器外目的地包括对话框也是可行。...导航组件默认行为确实是替换掉 NavHostFragment fragment。但是导航组件同样可以处理在 NavHostFragment 之外对话框目的地。....actionDonutListToDonutEntryDialogFragment(donut.id)) 关于上述代码片段,有几点需要注意: 首先,我们在此使用 navigate...这是因为上述代码片段来自于 DonutTracker 应用最终版本,在该版本中我使用了 SafeArgs。...点击任一甜甜圈会导航到编辑其信息对话框 点击 DONE 按钮,将保存更改到数据库中并且返回更新列表;而点击 CANCEL 按钮,将放弃掉所有的编辑并返回。

1.4K30

为任意屏幕尺寸构建 Android 界面

更改之前 Trackr 样式 上图是我们进行更改之前 Trackr 样式,您会发现不管在什么设备或屏幕下,都会有一个单窗口任务列表以及用于导航到归档或设置页面的底部应用栏。...△ 警告窗口 展开警告可以查看到 Android Studio 是否提供了修改建议,这里关于底部应用栏警告修改建议就是使用 Navigation Rail、抽屉导航栏,或使用顶部应用栏代替。...对于 Trackr,我认为使用导航路由更有建设性。而针对 MaterialTextView 修改建议是要么减少 TextView 宽度,要么考虑使用多列布局,这里使用多列布局更适合我们应用。...我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑导航模型,所幸我们不会更改很多具体视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系中,可以通过它导航到任何其他视图...△ JetNews 侧边抽屉导航栏展示 回到 JetNews,我们可以看到在大屏状态下,侧边抽屉导航栏会以模态方式出现,但它会延伸到整个屏幕而出现大量空白区域。

4.1K20

Navigation用法

5.通过NavigationUI类,对菜单,底部导航抽屉菜单导航进行统一管理     6.支持深层链接DeepLink 二.Navigation主要元素   在正式学习Navigation...Navigation Graph:导航图,包括应用程序所有的页面以及页面间关系   NavHostFragment:这是一个特殊Fragment,你可以认为它是其他Fragment容器,Navigation...Graph中Fragment正是通过NavHostFragment进行展示   NavController:导航控制器,用于在代码中完成Navigation Graph中具体页面切换动作   它们三者之间关系可以通过下面的这段话来理解...5.使用NavController完成导航       经过以上步骤后,我们还需要通过NavController对象,在代码中完成具体页面跳转工作,我们需要在MainFragment布局文件中添加一个...如果没有的话,可以重新编译一下项目。

25520

谷歌官方组件Navigation你了解了吗?

以及Android Studio3.3使用 在更新之后,其中还有一大亮点就是Navigation Editor(导航编辑器) Navigation 说到Navigation Editor我们就不得不先简单说一下...导航组件构成 导航组件由三个关键部分组成: Navigation graph(导航图): 这是一个包含所有位置导航相关信息XML资源文件。...Navigation组件包含一个实现NavHostFragment默认NavHost,它是用来展示fragment目的地。...当我们通过导航浏览我们应用程序时候,我们可以通知NavController我们要沿着导航图当中特定路径进行导航,或者直接导航到特定目的地。...可以供标准化过渡动画资源。 实现和处理深度链接。 涵盖了一些导航UI模式,比如只需要很少额外工作就能实现抽屉导航和底部导航

1.1K00

1. Jetpack源码解析---看完你就知道Navigation是什么了?

基本使用 虽然在之前文章中已经很详细介绍了Navigation,但是这里也简单叙述一下我在项目中具体使用: 2.1 Navigation+DrawerLayout+ToolBar 我们可以通过使用...,NavHostFragment通过navGraph与navigation导航编辑器进行关联。...打开Desgin面板,进入设计模式,在里面我们可以新建我们目标页面。...打开Text模式xml我们可以看到我们选择Fragmengt配置信息,当然你也可以不通过面板设计,也可以直接在xml里进行代码编写。...大致意思就是NavHostFragment在布局中提供了一个区域,用于进行包含导航 接下来我们看一下它源码: public class NavHostFragment extends Fragment

2.5K30

Material Design — App bars: bottomApp bars: bottom

当 bar 脱离FAB时,会恢复到默认形状。 在返回到屏幕并重新附着 FAB 后,bar 重新获得了缺口形状。 ? ---- 海拔 Bottom app bar 海拔高度为8dp。...底部导航抽屉从底部应用栏打开抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...Drawer 在 bottom app bar 前面打开,并显示 top app bar 以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer,但该 bar 本身不包含任何导航操作(例如向上导航至主屏幕或一个关闭图标...不要将导航操作置于bottom app bar中,因为它们可以被临时表面覆盖 与 top app bar 同时使用 当与 bottom app bar 一起使用时,top app bars 可以提供向上导航和其他操作

2.3K80

1. Jetpack源码解析---看完你就知道Navigation是什么了?

基本使用 虽然在之前文章中已经很详细介绍了Navigation,但是这里也简单叙述一下我在项目中具体使用: 2.1 Navigation+DrawerLayout+ToolBar 我们可以通过使用...,NavHostFragment通过navGraph与navigation导航编辑器进行关联。...打开Desgin面板,进入设计模式,在里面我们可以新建我们目标页面。...打开Text模式xml我们可以看到我们选择Fragmengt配置信息,当然你也可以不通过面板设计,也可以直接在xml里进行代码编写。...大致意思就是NavHostFragment在布局中提供了一个区域,用于进行包含导航 接下来我们看一下它源码: public class NavHostFragment extends Fragment

2.1K20

安卓Navigation系列——进阶篇

R.id.fragment) as NavHostFragment //管理应用导航对象 val navController = navHostFragment.navController...navigation坑 分别在三个fragment中主要生命周期中打印各自log,运行程序,打开FragmentHome,可以看到生命周期是正常执行 [ki8v26fq4w.png] 然后点击底部发现切换到...FragmentHome,神奇事情发生了,原来FragmentHome销毁了,却又重新创建了一个新FragmentHome实例,即fragment重绘,并且从log日志中也可以看到,刚刚打开FragmentDiscover...我们知道replace方法每次都会重新创建fragment,所以使用Navigation创建底部导航页面,每次点击切换页面当前fragment都会重建。...,发现已经不会重新走生命周期了。

2.9K30

2. Jetpack源码解析---Navigation为什么切换Fragment会重绘?

它可以自动构建正确“向上”和“返回”行为,包含对深层链接完整支持,并提供了帮助程序,用于将导航关联到合适 UI 小部件,例如抽屉导航栏和底部导航。...2.Fragment切换 通过现象分析,发现当切换NavigationView中menu菜单来切换Fragment时,DrawerLayout抽屉关闭有一个短暂动画(具体这里就不分析了,感兴趣可以自行查看...基于Navigation用来承载Fragment容器是NavHostFragment,所以我们并不能使用ViewPager+Fragment通过setUserVisibleHint实现懒加载方式;...4.1 建议 这里我建议是:如果你每个Fragment真的每次都需要重新绘制的话,你可以考虑使用Navigation组件来实现,毕竟通过Navgation组件真的很方便帮助我们切换导航,而且虽然布局会重新绘制...我还发现一个问题,就是Play商店,现在就是这样情况,抽屉栏中Item每个基本都是重新绘制,而且第一个Item我应用和游戏切换时候就会有很明显的卡顿和闪屏,猜测Google play 商店具体是不是使用

2.2K40

如何将 Stackdriver 连接到智能家居服务器以进行错误记录

启动时,你可以导航到项目的 Google Cloud 控制台,在抽屉导航 Stackdriver 部分中选择 Logging 选项: ?...让我们看看如何将你日志从 Stackdriver 导出到你基础设施中,让你在这些数据之上构建额外集成。 使用 Stackdriver,你可以设置包含带有特定过滤器日志接收装置。...在这里,你可以创建一个连接到 Google Cloud 发布/订阅主题接收器。这将是你能够在每次出现日志条目时处理事件: ? 在抽屉导航中,打开发布/订阅概述,创建一个新订阅: ?...下面的代码片段显示了使用 Node.js 实现: app.post('/alerts/stackdriver', (req, res) => { console.log('post stackdriver...在你服务器中,你也会看到此错误正在被记录。当你遇到此错误时,你可以查看发送 SYNC,并确定该错误来自设备类型错误。你可以通过修复返回此设备信息字符串来修复 webhook 中错误。

1.9K30

AngularDart Material Design 应用布局 顶

自述 应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序层叠关系。 它根据材料规格提供应用栏,抽屉导航样式。...-- Content goes here --> 持久性抽屉 持久抽屉是可以通过动作打开和关闭抽屉,例如按钮触发器。这些抽屉重新定位内容以适应抽屉流动。...最后,将打开/关闭抽屉动作连系到抽屉使用引用变量语法最容易完成。持久抽屉指令将其自身导出为抽屉,这允许其它操作可以轻松使用它。toggle()可用于打开/关闭抽屉。...临时抽屉具有可选overlay属性,可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。...如果它在material-content之内,它将与内容一起使用,并且如果适用,则与内容重新定位。

4K30
领券