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

深入浅出 NavigationUI | MAD Skills

概述 在之前的 导航系列文章中,Chet 开发了一个用于 跟踪甜甜圈的应用。知道什么是甜甜圈的最佳搭档吗?(难道是另一个甜甜圈?) 当然是咖啡!所以我准备增加一个追踪咖啡的功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...之后我会用到这些目的页面的 id ;) △ 带有新的目的页面的导航图 更新导航图之后,我们可以开始将元素绑定起来,并且实现导航到 SelectionFragment。...比如,当您在最顶层的目的页面时,就不会显示回退按钮,因为没有更高层级的页面。 默认情况下,您应用的最初页面是唯一的最顶层目的页面,但是您也可以定义多个最顶层目的页面。...setupWithNavController(navController) } 请注意我并没有从导航图中调用任何导航操作。实际上导航图中甚至没有前往 coffeeList Fragment 的路径。

3K30

自定义View:手撸一个带FAB凹槽的底部导航栏

链接:https://juejin.cn/post/7337354931480199208 本文由作者授权发布 前言 底部导航栏相信大部分的Androider都不陌生,毕竟对于绝大多数的应用来说底部导航栏是首页的标配...如果你的FAB移动了,导航栏怎么跟着变化? 同事:没得怎么变化,反正需求没有说要加动画 我:那要是PM要你的导航栏凹陷深度依赖于FAB的位置大小,你要怎么处理? 同事:......那阁下又当如何应对?...: 创建好了带导航栏的Activity后界面默认是这样子的效果: 接下来就是根据需求在小细节上修修补补了,由于只需要显示两个导航item,另外需要在导航栏的中间给大按钮预留个空位,于是在导航栏的menu...考虑到这个按钮需要显示在其他控件的最上层,而且需要以导航栏为参照物来确定位置,利用CoordinatorLayout的特性正好可以很方便地实现,于是将整个Activity的布局文件修改如下: //activity_main.xml...唉慢着,这凹槽的深度不是还得跟随按钮的位置动态变化吗,那这些坐标又当如何变动??老铁别急,下面继续来分析。

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

    Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)

    它就不报错了,这句话的意思是未使用导航的许可。因为我现在还没有使用这个nav_graph.xml所以要加上这一句话告诉AS,让它放心。等我们真正去使用时,是没有影响的,去不去掉都行。 3....,然后它还要添加需要显示的子Fragment,那么就通过navGraph来绑定这个导航图,之前导航图里面不是就有五个Fragment吗?...这个是用来控制NavHost显示Fragment,虽然我刚才在导航图nav_graph.xml中指明了第一个要显示的Fragment,但是它还缺少这个显示的动机,而这个动机由NavController来提供...明明这个NavController还什么都没有做的,为什么就可以显示了呢?实际上它已经在工作了,只是你没有注意而已。...底部导航栏控制Fragment切换 在上面已经添加了底部导航栏,但是这个导航栏还没有和NavHost绑定起来,所以自然就无法在切换底部导航的同时,改变NavHost中的Fragment。

    10.2K42

    导航: 多返回栈 | MAD Skills

    欢迎来到第二个关于导航的 MAD Skill 系列 的另一篇文章!本文我们将介绍一个呼声很高的功能,即导航 (Navigation) 对多返回栈的支持。...支持多返回栈 让我们通过这个 仓库 中的高级导航示例来看看实际效果。 该应用由 3 个标签页组成,每个标签页都有它自己的导航流。...通过这些扩展函数,应用可以为每个标签页保持一个单独的 NavHostFragment,每个 NavHostFragment 带有它自己的返回栈,当用户切换标签页时,应用在不同的 NavHostFragment...现在我们的 Activity 布局只包含一个带有单个导航图的 NavHostFragment。...注意这个行为是默认启用的。 最后,让我们运行测试来验证是否一切正常。该应用已经拥有一些验证多返回栈行为的测试。我运行 BottomNavigationTest 并观察每个底部导航行为测试的运行。

    82320

    安卓Navigation系列——进阶篇

    是谷歌的一个实现底部导航的组件, app:menu属性为底部导航栏指定元素,新建一个bottom_nav_menu的menu资源文件 BottomNavigationView是怎么做到页面切换的吗,把上面代码照样搬过来, public static boolean onNavDestinationSelected(...经过oncreate方法之后,navigatorProvider总共缓存了四个navigator吗, 由于在nav.graph.xml中,定义的是标签,所以这里navigator最终拿到的是一个...那么我们是不能在布局文件中通过app:navGraph属性指定自定义的导航资源文件了,只能在布局文件中去掉app:navGraph这个属性,然后在添加FixFragmentNavigator的同时,通过代码将导航资源文件设置进去...总结 本篇在上篇的基础上,结合BottomNavigationView实现了第一个底部导航切换的实例,然后介绍了这种方式引发的坑,进而通过源码分析了发生这种现象的原因,并给出了解决的思路。

    3.2K30

    Android Notes|BottomNavigationView 爱上 Lottie

    以前大部分项目底部导航栏关于图片部分的实现,要么两套图 selector 切换,要么通过着色器 tint 进行渲染,总之最后呈现的效果便是在点击时两张图静态切换,说 Low 吧,也还凑合,但是总是没那么高大上...需要单独说明的属性: app:labelVisibilityMode:item 标签显示模式 auto:item 少于等于 3 个时,标题处于显示状态;大于等于 4 个,选中才显示标题; selected...1、BottomNavigationView 切换对应的 Lottie 不改变,怎么玩? 这个问题是我从一开始就陷入了固有思维循环中。...下面是我陷入误区的思路: 我想着因为是通过 playAnimation 开始执行动画从而过渡到最后的颜色,那么对应的 endAnimation 应该是直接能回到初始状态。...小教训(心得): 真的是有时候不得不换种思维方式,首要的便是实现,随后才是优化。基本雏形都没有,何谈优化?

    3.7K21

    Android开发之漫漫长途 XIII——Fragment最佳实践

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。...但是殊不知,TabHost并非是那么的简单,它的可扩展性非常的差,不能随意地定制Tab项显示的内容,而且运行还要依赖于ActivityGroup。...其实上面的代码存在性能问题,尤其是在底部导航这种场景中,Fragment之间的来回切换,这里使用的replace方法。关于这个方法带来的问题以及如何进行优化,将在下一节详细说明。...(hide)其他,如果没有添加过呢,就添加。...targetFragment.isAdded()) {//如果要显示的targetFragment没有添加过 transaction .hide

    1.3K20

    Android交流会-碎片Fragment,闲聊单位与尺寸

    对于理解Fragment,可以说你在生活中看过的新闻,点击进入新闻详情界面。 女孩:Fragment有它自己的生命周期吗?...男孩:实例一下,最后再慢慢细分~ 在MainActivity页面中主要有两个区域: 一个是放Fragment 的main_body 一个是放底部导航栏的main_bottom_bar 主要的Fragment...代码块: 图片 主要的底部导航栏的代码块: 图片 实例化控件: 图片 实现底部导航栏的响应 导航栏文本颜色和图片切换效果的方法写好了,接下来是点击响应的方法 给MainActivity加上View.OnClickListener...里的代码 通常用这个来展示,但是代码过长,我们来简化一下 我们先来添加一个setMain() 方法,来显示打开界面时,显示的初始页面 实现点击底部导航栏来切换响应的fragment,我们在onClick...男孩:px在Android中为最小元素单元,px为像素,pt是磅数的意思,在Android通常作为字体的单位来用~ 女孩:那dp和sp呢?

    1.2K20

    听说谷歌Baba更新了 Material UI ...

    先来一个什么鬼样式都没有的: <?xml version="1.0" encoding="utf-8"?...Bottom Navigation BottomNavigationView创建底部导航栏,用户只需轻点一下即可轻松浏览和切换顶级内容视图。 ...使用也是很Easy,如下: 创建一个菜单资源 ,最多5个导航目标(BottomNavigationView不支持超过5个项目); 在内容下面放置BottomNavigationView; 将BottomNavigationView...下面着撸起实现: Step 1:搞个布局玩玩 外层使用CoordinatorLayout包裹,底部导航栏采用BottomNavigationView,中间内容区域,很Easy咯~ <?...这里再次简单描述相关细节: Bottom Sheets具有五种状态: STATE_COLLAPSED: Bottom Sheets是可见的,但只显示可视(部分)高度。

    3K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    也就是说您需要连接到设备或者模拟器上的一个正在运行的可调试应用,有两种方式可以满足该条件: 如果您没有正在运行的进程,那么需要首先连接到一台设备或者启动一个 Android 模拟器实例,并且点击窗口的...同样,您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。...,您会看到一个可爱的 android,但是里面少了一些东西: 底部的导航标签。...看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。

    2.5K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    和上一个版本不同的是,新版本的布局检查器可以以三维的视角来展现视图层次结构,您可以直观地看到视图的布局方式。...也就是说您需要连接到设备或者模拟器上的一个正在运行的可调试应用,有两种方式可以满足该条件: 如果您没有正在运行的进程,那么需要首先连接到一台设备或者启动一个 Android 模拟器实例,并且点击窗口的...同样,您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。...当您运行应用的时候,您会看到一个可爱的 android,但是里面少了一些东西: 底部的导航标签。看一下布局文件,我们可以看到底部的导航视图是存在的,但是屏幕却没有显示它。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。

    2.5K10

    (效率人生)程序员必备工具Dash

    功能介绍 官方用一句话就概括了它的用途:Dash是一个API文档浏览器和代码片段管理器。Dash存储代码片段,并立即搜索200多个API,100多个备忘单和更多的脱机文档集 。...您甚至可以生成自己的文档集或请求包含的文档集。功能单一,但是很强大,需要的文档都有。 支持的文档集 Dash带有200多个离线文档集。...强悍的API文档浏览、搜索功能 想必这个功能是大家最常用的了吧,每天要反复查看、搜索那么多的API细节,没有一个好工具,单靠自己的双手如何应付得来?窗口不停的切来切去,很烦啊!...上图便是Dash的API浏览器主界面:左侧边栏是各种编程语言以及框架(取决于你下载安装了多少文档集合)的导航大纲,点击某个节点,右边的内容区域就是文档的详细信息啦,非常直观。...看到这里你也许要问了,这跟我们平常切换到特定的文档窗口(比如一个PDF或者一个CHM文件),再ctrl + f查找有什么区别,不是多此一举吗?

    3.4K111

    Android入门教程 | Fragment 基础概念

    该类提供几种管理列表视图的方法,如用于处理点击事件的 onListItemClick() 回调。(请注意,显示列表的首选方法是使用 RecyclerView,而非 ListView。...如要为片段提供布局,必须实现 onCreateView() 回调方法,Android 系统会在片段需要绘制其布局时调用该方法。此方法的实现所返回的 View 必须是片段布局的根视图。...inflate() 方法带有三个参数: 想要扩展的布局的资源 ID。 将作为扩展布局父项的 ViewGroup。...将要显示的 show 出来,将其他 hide起来。这个过程 Fragment 的生命周期没有变化。...->onResume 的生命周期,明明 Fragment 没有显示却已经到onResume 了,在某些情况下会出现问题。比如数据的加载时机、判断 Fragment 是否可见等。

    3.5K40

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

    我想实现在当前 activity 上弹出一个相对轻量级的弹窗,而不是替换掉整个页面。我知道导航组件可以处理目的地,但是那只能替换掉单个 NavHostFragment 中的 fragment,对吗?...点击按钮会打开一个非常矮小的带有文本占位符的对话框 您可能注意到对话框显示的尺寸要远比它在设计工具中看起来小得多 — 这是因为这个对话框的内容只有那个 TextView 占位符作为内容。...我会带您浏览关键的实现步骤,大家可以看到我是如何使用对话框目的地导航的。 首先,这是应用的导航图: ?...这是因为上述代码片段来自于 DonutTracker 应用的最终版本,在该版本中我使用了 SafeArgs。...SafeArgs 可以生成 Directions 代码,这使得目的地之间带有参数传递的跳转实现起来更加容易。

    1.4K30

    Dash:程序员的的好帮手

    强悍的API文档浏览、搜索功能         想必这个功能是大家最常用的了吧,每天要反复查看、搜索那么多的API细节,没有一个好工具,单靠自己的双手如何应付得来?窗口不停的切来切去,很烦啊!...上图便是Dash的API浏览器主界面:左侧边栏是各种编程语言以及框架(取决于你下载安装了多少文档集合)的导航大纲,点击某个节点,右边的内容区域就是文档的详细信息啦,非常直观。...看到这里你也许要问了,这跟我们平常切换到特定的文档窗口(比如一个PDF或者一个CHM文件),再ctrl + f查找有什么区别,不是多此一举吗?...说到这里,之前的版本其实有个很不好的地方,就是如果不仔细琢磨一下,或者去看官方的帮助文档的话,用户是很难一眼就知道怎么用这个功能,新手引导做得确实不怎么样,不过最新版已经改善了这个问题,在主界面的导航边栏明确地给出了分类提示...,目前还没有哪一个能比得过Dash的(Dash is the best!)。

    2K20
    领券