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

如何使用安卓导航组件+ BottomNavigationView+ NavigationView (导航抽屉)

安卓导航组件是一种用于构建导航界面的工具,它可以帮助开发者实现应用程序的导航功能。其中,BottomNavigationView是一种底部导航栏组件,NavigationView是一种侧边导航栏组件。

使用安卓导航组件+ BottomNavigationView+ NavigationView可以实现以下步骤:

  1. 首先,在项目的build.gradle文件中添加依赖项,以引入导航组件:
代码语言:txt
复制
implementation 'androidx.navigation:navigation-fragment-ktx:2.3.5'
implementation 'androidx.navigation:navigation-ui-ktx:2.3.5'
  1. 在布局文件中添加BottomNavigationView和NavigationView组件,分别用于底部导航栏和侧边导航栏的展示:
代码语言:txt
复制
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_navigation_menu" />

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/navigation_menu" />
  1. 创建menu文件夹,并在其中创建bottom_navigation_menu.xml和navigation_menu.xml文件,分别用于定义底部导航栏和侧边导航栏的菜单项。
  2. 在Activity或Fragment中,使用Navigation组件进行导航的配置和管理。首先,创建一个NavHostFragment用于承载导航的目的地(即各个页面),并将其添加到布局文件中:
代码语言:txt
复制
<fragment
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />
  1. 在Activity或Fragment中,通过NavController来管理导航操作。可以通过NavController的navigate()方法来实现导航到指定目的地的功能,例如:
代码语言:txt
复制
val navController = findNavController(R.id.navHostFragment)
findViewById<BottomNavigationView>(R.id.bottomNavigationView)
    .setupWithNavController(navController)
findViewById<NavigationView>(R.id.navigationView)
    .setupWithNavController(navController)

通过上述步骤,就可以实现使用安卓导航组件+ BottomNavigationView+ NavigationView来构建导航界面的功能了。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云移动应用分析(MTA):提供移动应用数据分析服务,帮助开发者了解用户行为和应用性能。详情请参考:https://cloud.tencent.com/product/mta
  • 腾讯云移动推送(TPNS):提供移动应用消息推送服务,支持多种推送方式和个性化推送。详情请参考:https://cloud.tencent.com/product/tpns
  • 腾讯云移动直播(LVB):提供移动直播服务,支持实时音视频传输和互动功能。详情请参考:https://cloud.tencent.com/product/lvb
  • 腾讯云云服务器(CVM):提供弹性计算服务,支持按需分配和管理云服务器资源。详情请参考:https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

10系统如何增加双导航

系统默认支持一个导航栏和一个状态栏,有时客户需求双边按键或者三屏分开显示,例如左右显示按键中间为界面显示或者左边显示仪表盘中间显示导航界面右边显示车速时钟等,这种情况使用一个导航栏无法实现...代码中实现导航栏的代码在frameworks\base\services\core\java\com\android\server\wm\DisplayPolicy.java文件中,从代码中我们看到系统创建了一个名为...NavigationBar的BarController,然后通过layoutNavigationBar实现了导航栏的布局,那么要实现双导航栏,则我们只需增加一个BarController,并实现导航栏的布局就行...FLAG_TRANSLUCENT_NAVIGATION, View.NAVIGATION_BAR_TRANSPARENT); 2,在prepareAddWindowLw函数中添加导航栏...mNavigationBarController2.checkHiddenLw(); } 除此之外还需进行左右逻辑控制和一些布局调整,这样应用就可以通过TYPE_NAVIGATION_BAR_PANEL类型设置来显示另外一个导航栏了

1.5K41

design-使用返回和向上导航

一致的导航操作是整体用户体验的重要组成部分。如果基本的导航方法都不能保持一致,甚至让用户意想不到的话,恐怕没有比这更让人沮丧的事情了。 Android 3.0对全局导航行为做出了重大改变。...对用户来说,认真遵照“返回”和“向上”的指导准则可让应用的导航更可靠、更符合预期。 Android 2.3 及更早的版本使用系统返回按钮来支持应用内的导航。...在 Android 3.0 中引入操作栏后,出现了第二种导航机制:即向上按钮,由应用图标和左向箭头构成。 “向上”按钮用于根据屏幕之间的层级关系在某个应用内部导航。...系统的“返回”按钮用于按照用户最近操作的屏幕历史记录,按时间逆序导航。...它通常基于屏幕之间的时间关系,而非应用的层级关系 “返回”按钮还支持与屏幕间导航并无直接关联的一些行为: 清除浮动窗口(对话框、弹出窗口) 清除上下文操作栏,并取消高亮显示所选项目 隐藏屏幕键盘 (IME

59310

【React Native 开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

前言 做过原生开发的童鞋们应该都做过侧边栏这个东西,而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。...DrawerLayoutAndroid 介绍 封装了平台DrawerLayout(仅限平台)的React组件。...导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。...onDrawerClose function 每当导航视图(抽屉)被关闭之后调用此回调函数。 onDrawerOpen function 每当导航视图(抽屉)被打开之后调用此回调函数。...抽屉可以有3种状态: idle(空闲),表示现在导航条上没有任何正在进行的交互。 dragging(拖拽中),表示用户正在与导航条进行交互。

6.6K40

深入浅出 NavigationUI | MAD Skills

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

3K30

react-navigation,刷新你的导航一、属性介绍二、案例

当然只有在5.0以上才有效果 gesturesEnabled:是否支持滑动返回手势。...iOS默认支持,默认关闭 screen:对应界面名称,需要填入import之后的页面 mode:定义跳转风格 card:使用iOS和默认的风格。...默认为左侧位置 contentComponent - 用于呈现抽屉内容的组件,例如导航项。 接收抽屉导航。...端和iOS的文件混合成为index.js文件。而文件App.js注册到了又注册到了index.js文件。故我们将需要用到的代码编写在App.js文件中。...定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面,将它们定义到DrawerNavigator中。在抽屉导航中,将组件的属性也一起设置好。

19.6K90

基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...DrawerLayoutAndroid 属性 drawerBackgroundColor color 设置抽屉导航的背景色。默认值是白色。如果你想设置抽屉的透明度,使用RGBA。...抽屉可以有3种状态: dle(空闲),表示现在导航条上没有任何正在进行的交互。 dragging(拖拽中),表示用户正在与导航条进行交互。...它将只对API 21以上的效果 DrawerLayoutAndroid 方法 openDrawer(0) 打开抽屉导航 closeDrawer(0) 关闭抽屉导航 实例演示 还是老样子,看代码前,我们先看看效果图

2.4K70

导航组件概览 | MAD Skills

概览 本文会简要概述导航组件,包括如何创建一个带有导航能力的、已启用导航的 UI 中有关包含层级的细节的新应用,以及对于一些主要 API 和导航组件工作原理的解释。...导航部件 我们已经在层级结构中查看了几个 UI 组件,以及它们彼此之间是如何关联的,接下来我想介绍一下几个重要部件,导航组件正是利用它们来在目的地之间实现导航。...应用展示了 NavigationView (抽屉导航栏) 覆盖在 activity 内容上方 接下来是 NavigationView,它是一个从左边划入的抽屉导航栏。...总结 这篇文章只是关于导航组件的一个快速概览,目的是为了让您体验如何创建一个可以使用导航功能的应用,以及看一下这种应用的大致结构。...在未来的文章和视频中,针对如何同特定导航 API 进行交互,我会介绍更多的技术细节,比如导航到对话框目的地、使用 SafeArgs 以及处理深层链接。

1.6K30

Android Design Support Library初探-更新中

tabs(选项卡) a motion and scroll framework to tie them together(将这些控件结合在一起的手势滚动框架) 官方视频简介 Navigation View 抽屉导航是...app识别度与内部导航的关键,保持这里设计上的一致对app的可用性至关重要,尤其是对第一次使用的用户。...NavigationView 通过提供抽屉导航所需要的框架让实现更简单,同时它还能够直接通过菜单资源文件来直接生成导航元素。 ?...把NavigationView 作为DrawerLayout的内容视图来使用,比如下面的布局: <android.support.v4.widget.DrawerLayout xmlns...NavigationView处理好了和状态栏的关系,可以确保NavigationView在API21(5.0)设备上正确的和状态栏交互。

95120

TAB导航与侧边抽屉导航的巅峰对决

你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫团队给它的名字“侧边抽屉导航”。...目前,侧导航设备上比较流行,而iOS平台上使用的还不是很普遍。所以我们的讨论还要面对一个问题:和iOS应用是不是有一样的用户习惯,适用一样的导航模式?...而后,友好而乐于提供指导的Google Play团队建议侧边栏抽屉导航(navigation drawers)作为一种新的导航方式用于应用。 所以6个月后,我们决定冒险尝试改为侧边栏导航。...抽屉导航和tab导航对用户使用频率的影响 周使用频率在下降(对比明显),日使用频率在下降,用户在应用中花费的时间在下降。侧边栏导航在第一轮测试中看起来像个灾难。...而在上,他们又是怎么处理的呢。在我的设备上显示的是下图左一的方案(通过二级tab切换不同页面),在我同事的手机上显示的是右一的方案,通过(侧导航切换不同页面)。

2.7K70

干货!iOS 与 Android 的APP 设计差异

左侧就是抽屉导航;右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是规范其实不建议同时使用底部导航和标签,因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中,没有类似抽屉菜单的标准导航控件。...正如你看到的那样,这个组件非常像端的底部导航,只是在iOS中这种形式的导航更加常用。...而对比规范,通常会把主要导航也放在汉堡菜单中。...用户对iOS中常见的老虎机形式的日期选择器并不熟悉。在Android中使用这种类型的日期选择器还需要重新布局,这样无形中增加了开发的难度和时间,并使界面看起来与系统风格格格不入。

3.2K10

Android开发笔记(一百三十三)导航视图NavigationView

总结一下,要想正常使用导航视图NavigationView,App需要增加三个库的引用,分别是design库、appcompat-v7库和recyclerview-v7库。...在布局文件中使用NavigationView,可设置以下几个专门属性: app:headerLayout : 指定头部布局的资源文件。 app:menu : 指定导航菜单的资源文件。...下面是使用上述导航菜单的导航页面截图,之所以看到菜单图标都变成蓝色,是因为在布局文件中指定了菜单图标的色彩为蓝色(app:itemIconTint="#5555ff")。 ?...下面是显示原始菜单图标颜色的导航页面截图。 ? 自定义导航菜单 系统自带的NavigationView已经基本满足导航需求,然而它对于个性化的定制上面支持的并不好。...虽说是自定义,其实也没这么复杂,只需把布局文件中原来NavigationView的节点位置换成ListView即可,使用ListView就能随意定制菜单项的布局和风格了。

2.4K40

瓣呀,一个基于豆瓣api仿网易云音乐的开源项目

项目整体采用mvp+rxjava+retrofit 框架,使用glide进行图片展示,用butterknif注解,另外使用了java 8 新特性,拉姆达表达式,原生并不支持,需要导插件,具体见项目。...后续会采用本地数据库对数据进行缓存,初步定为使用realm。...主界面: 主界面采用material design 设计风格,使用NavigationView和DrawerLayout的抽屉效果,CoordinatorLayout和viewpager 配合,使用behavior...抽屉界面: 抽屉界面 使用到的icon来自google 的开源icon库,material design icon 地址:点击进入 ,看来谷歌为material design 花费了大量的精力,然而,一般的项目组都是...ios的设计风格,让android去开发,作为一名开发者,感觉到非常的不幸,为什么好的东西不能被产品和设计接受。

74540

一顿火锅钱+一台旧手机 = 自主导航机器人?

然而,英特尔实验室最近开源的 OpenBot,只需要 50 美元(一顿火锅钱)和一台从抽屉里翻出来的旧手机(四舍五入成本为 0)。...OpenBot 的「大脑」是一台智能手机,「机身」则是花费 50 美元打造的一款电动小车。此外,研究人员还开发了软件堆栈,使智能手机可以对小车执行移动操作。...软件堆栈 如下图 4 所示,该软件堆栈包含两部分:应用和 Arduino 程序。 应用在智能手机上运行,可以提供操作界面,收集数据集,运行高阶的感知和控制任务。...应用和 Arduino 应用通过串行通信链路进行通信。 ? 与其他轮式机器人有何区别? 该研究将这款轮式机器人与现有的机器人平台进行了对比,参见下表 2。...而该研究使用系统——最大且持续发展的软件生态系统之一。无需机器人社区多做努力,所有用于传感器集成和处理的低级软件已经存在且不断改进。

70720

ApacheCN 译文集 20211225 更新

二十三、支持不同版本的、音效和旋纽小部件 二十四、设计模式、多重布局和片段 二十五、构建简单的图片库应用 二十六、使用导航抽屉和片段的高级 UI 二十七、数据库 二十八、临别赠言 Kotlin...二十二、粒子系统和处理屏幕触摸 二十三、音效和旋转小部件 二十四、设计模式、多种布局和片段 二十五、带分页和滑动的高级用户界面 二十六、带有导航抽屉和片段的高级用户界面 二十七、数据库 二十八...、临别赠言 如何使用 Kotlin 构建安应用 零、前言 一、创建您的第一个应用 二、构建用户屏幕流 三、用片段开发用户界面 四、构建应用导航 五、基本库:RetroFit 库、Moshi 库和 Glide...库 六、回收器视图 七、权限和谷歌地图 八、服务、工作管理器和通知 九、JUnit、Mockito 和 Espresso 的单元测试和集成测试 十、架构组件 十一、持久化数据 十二、ButterKnife...Java 代码 使用片段创建动态 UI 零、前言 一、片段和用户界面模块化 二、片段和用户界面灵活性 三、片段生命周期和专业化 四、使用片段事务 五、创建丰富的导航 六、片段与材质设计 Unity

7.1K20

导航设计的10种模式

导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。...06 抽屉导航 描述: 抽屉式也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在使用底部Tab会造成双底栏,视觉观感不佳; 一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用...07 下拉式/菜单导航 描述: 与抽屉导航的目的相同,都是为了突出内容。...优点: 菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置; 缺点: 位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用; 考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容...09 弹窗式 描述: 算是菜单式的一种变种,区别是位置在界面中央不依赖于某个边缘; 弹出框在系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些; ?

3.4K40

React Native 系列(八) -- 导航

NavigatorIOS使用步骤 初始化路由 注意:component,需要传入组件,自定义组件 NavigatorIOS上的按钮图片,默认会被渲染成蓝色 NavigatorIOS上的按钮,只能放一张图片...: StackNavigator: 用来页面跳转和传递参数 TabNavigator: 类似底部导航栏,用来在同一屏幕下切换不同界面 DrawerNavigator: 侧滑菜单导航栏,用于设置带有抽屉导航的...title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用 header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle...:设置导航栏颜色 headerPressColorAndroid:独有的设置颜色纹理,需要版本大于5.0 gesturesEnabled:是否支持滑动返回手势,iOS默认支持...,默认关闭 screen:对应界面名称,需要填入import之后的页面 mode:定义跳转风格 card:使用iOS和默认的风格

6K80

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

上篇文章我们简单的介绍了Navigation组件使用,以及深入分析了源码中的具体实现,基本原理我们已经很清晰了。...它可以自动构建正确的“向上”和“返回”行为,包含对深层链接的完整支持,并提供了帮助程序,用于将导航关联到合适的 UI 小部件,例如抽屉导航栏和底部导航。...确实经过源码分析我们就可以发现,Navigation组件封装了Menu菜单栏、Fragment的切换、NavigationView、Drawerlayout等一系列涉及到的组件,为了更方便的让我们使用单...2.Fragment切换 通过现象分析,发现当切换NavigationView中的menu菜单来切换Fragment时,DrawerLayout抽屉关闭有一个短暂的动画(具体的这里就不分析了,感兴趣的可以自行查看...4.1 建议 这里我的建议是:如果你的每个Fragment真的每次都需要重新绘制的话,你可以考虑使用Navigation组件来实现,毕竟通过Navgation组件真的很方便帮助我们切换导航,而且虽然布局会重新绘制

2.2K40

Android 10 终于来了!增加了不少新特性

前言 Android 10 正式发布了,根据官网的介绍,聚焦于隐私可控、手机自定义与使用效率,此版本主要带来了十大新特性: [image] 智能回复 使用机器学习来预测你在回复信息时可能会说些什么,这项功能在...手势导航 引入手势导航后,应用程序不仅可以实现全屏幕的内容显示,还能最大限度地减少系统导航键的可见程度,这对于当下主流的全面屏手机尤为重要。...另外,团队还为包含导航抽屉(Navigation Drawer)的应用增加了一个名为 peek 的动作:用户轻压屏幕边缘然后再向内划动,便可拉出应用抽屉页面。...在使用时,你可以选择只与应用程序共享位置数据。当你没有使用的应用程序访问你的位置时,你也会收到提醒,以决定是否继续分享。...2、的外观和LOGO都将大改, 而新LOGO从一整个机器人的身体变成了头部 。这样标志显得大方简洁了不少.详情可以查看之前我写过的一篇文章:新LOGO刚刚出炉!

1.3K40

App之底部导航栏的设计

先来看看app常用的导航模式有哪些:列表式、网格式、标签导航抽屉导航等。...抽屉式是把所有功能都收到一个按钮里,这样界面就非常干净了,同时给功能操作带来了隐蔽性,例子就不举啦,机的app很多这类的。。...那么,有没有一种方式应用在一级页面,可以集合这些优点: 列表式的结构清晰明了, 网格式的紧凑、直观, 标签式底部导航的便利拇指操作, 抽屉式容纳更多选项,简洁界面。...这里把抽屉式的汉堡包按钮,变成了“更多",我们可以把一些不常用的功能全部收纳到这里。 3、然后其中居中的一个按钮可以展开更多的选项,把底部导航栏变成网格式或者列表式的导航模式。...“中间功能项突出”模式,主次分明,把最频繁使用的功能置于中间,也有的中间功能键起到收纳作用,点击是开启更多选项。

4.8K110
领券