安卓APP_ jetPack —— Bottom Navigation 底部页面导航实现

最新推荐文章于 2023-09-23 13:45:40 发布
最新推荐文章于 2023-09-23 13:45:40 发布
阅读量725 收藏 1
点赞数 2
分类专栏： JetPack框架 文章标签： java 移动开发 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44742824/article/details/116497393
版权

本文为学习笔记，所用的图片、案例均为教学视频截图

源视频地址：BottomNavigation：实现一下底部导航
作者：longway777

目录

实现效果

快速实现底部导航切换页面功能

在这里插入图片描述

创建工程的时候，这个底部导航的模板可以直接拿来用

在这里插入图片描述
但是为了更好地运用这个模板，我们必须了解他的结构，所以自己创建一个。

需要做的事情大致为：创建三个fragment构成三个静态页面，每个fragment要保存一些UI的数据，所以每个fragment还要创建对应的viewModel,菜单（底部导航条）,navigation组件控制页面切换。

一、获取三个图标

选择创建位图
在这里插入图片描述

二、创建三个带ViewModel的Fragment

一般底部导航的几个页面功能都是比较独立的，所以给每个页面都配带有专门的ViewModel比较合适。

如图
在这里插入图片描述

三、创建底部菜单

最低0.47元/天 解锁文章
丶PURSUING
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android Studio 使用BottomNavigationView 实现底部 tabs (二)
03-20
在Android应用开发中，BottomNavigationView是一种常用的组件，用于在底部展示多个可切换的视图，类似于底部导航栏。本教程将深入探讨如何在Android Studio中使用BottomNavigationView来创建底部tabs，这是系列教程...
Android-一个示例App展示了如何使用NavigationUI库将BottomNavigationView和NavigationView与导航图挂钩
08-13
`NavigationUI`库是Google在Android Jetpack组件中提供的一种工具，它简化了与导航图（Navigation Graph）的交互，帮助开发者更轻松地实现底部导航栏（BottomNavigationView）和侧滑导航菜单（NavigationView）的...
Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换
lb220303082的博客
07-02 7824
本教程详细全面，对新手友好
（Android View）底部导航栏—BottomNavigationView简单使用
黑马小杰的博客
03-17 1万+
虽然很早就知道BottomNavigationView,但是以前导航栏都是各种第三方凑合用。既然Android Support Library 25 才增加了BottomNavigationView 控件，就简单看一下使用方法。首先创建一个工程。既然是系统组件，当然创建的时候就可以自动选择，不多说，看图。OK，Activity创建完毕，我们简单看一下代码。public class LanuchAc...
【Android】BottomNavigationView的使用笔记
夏夏的博客
04-17 2035
我们在使用控件的时候，总是有两个必须填写的值，一个是`width`，一个是`height`，而它们分别对应我们印象中的物体的长度和宽度。当控件被遮盖住，这时候我们就需要指定控件的`Z`轴高度了。   何为`Z`轴高度？比如我们在三维空间中定义一个物体的具体位置，需要知道它的空间属性值，通过`XYZ`轴来精确定。这里的`Z`轴高度，其实就是指真正的“高度”，而不是宽度！ 总结： 让添加的`ImageView`在`Z`轴上的高度 大于等于`BottomNavigationView`的。
BottomNavigationView的通用修改记录（新解决方案）
最新发布
一个IT人的技术成长历程。创造未来的行为就发生在今天，没有明天的目标，今天的行动就是重复昨天的事情。
09-23 742
BottomNavigationView是design包下的一款底部导航控件，初次使用发现效果特别不错，可是到了实际开发中，我们要的效果就不能按照谷歌的标准来开发了。都会有美工给我们切好图，而我们把图片放入后，却被bottomNavigationView修改成了他默认的颜色切换，而有时候我们的图片就不是纯色的图。自动模式，该模式使用item数来确定是否显示或隐藏标签，即自动开启shifting mode，默认的模式。这里注意margin的使用，不是越大，文字图片的间距就越大，还是拿修改参数看图说话。
安卓 BottomNavigationView底部导航的使用
HelloWord的博客
06-10 5858
简介：上一篇讲解了BottomNavigationBar底部导航栏的使用，这一篇还是底部导航栏，它属于Material Design下面的 ，用法更加简单，扩展稍微少些，属于弱化版~ 1、 2、项目build.gradle添加依赖：（注意studio3.0以下将implementation 换成 compile） implementation 'com.android.sup...
安卓app开发之新旧两版android导航条tab外观对比 附源代码.zip_android底部tabdemo
01-12
新版"文件可能展示了如何使用BottomNavigationView来创建现代的底部导航条，这将涉及到对Material Design组件的使用，如Ripple效果、颜色过渡以及切换事件的处理等。 在实际开发中，开发者需要考虑多种因素，包括但...
Android实现页面底部仿新浪微博导航栏菜单源码
12-12
Android Design Support Library 提供了 BottomNavigationView 来帮助开发者实现这一设计模式。 1. **使用BottomNavigationView** - 引入依赖：在`build.gradle`文件中添加对`design`库的依赖，例如： ``` ...
Android Jetpack 之Navigation组件demo
06-14
3. **UI支持**：Navigation组件还提供`AppBarConfiguration`和`BottomNavigationView`等组件的集成，自动处理返回按钮和底部导航栏。 ### 六、NavigationDemo实践 在`NavigationDemo`项目中，你可以找到一个简单的...
Android 使用BottomNavigationView实现底部导航栏
02-02
Android 使用BottomNavigationView实现底部导航栏，在Android Support Library 25 中增加了 BottomNavigationView 控件，官方为我们提供了这样这一个控件。
Android底部导航栏之BottomNavigationView
u010855711的博客
03-10 2988
Android底部导航栏之BottomNavigationView
使用Bottom Navigation Activity和Fragment仿微信页面切换
qq_42357940的博客
06-10 1836
使用使用Bottom Navigation Activity和Fragment仿微信页面切换已经不是什么新鲜的技术了，但前几天尝试了一下，觉得还是写点东西。 Bottom Navigation Activity本质上是个普通的Activity，不一样的是它在创建的时候会自动创建一些相关的资源，方便程序员的使用。那话不多说，直接写怎么用。 1.首先新建一个Bottom Navigation Acti...
Android 学习笔记 BottomNavigationView（底部导航栏）控制多个fragment切换
jijiyyoyo的博客
04-29 2864
实现： BottomNavigationView是由谷歌官方指定的安卓底部导航栏,基本适用方法为: 在res文件中添加menu文件夹,并创建menu.mxl文件.用于存放bottomNAvigationView中的文字和图片. 创建5个fragment (with ViewModel) 用于之后方便之后对fragment进行编辑. 要实现BottomNavigationView对多个fragment进行切换,需在res中创建一个navigation文件夹并创建navigation.xml文件用于存放新建
Android Jetpack 学习之Navigation、BottomNavigationView
zoujin6649的博客
07-23 1490
先上效果图： Navigation组件，也可以理解成FragmentNavigation。它提供了多Fragment之间的转场、栈管理，帮助我们可以更轻松的使用Fragment。在抽屉式导航栏、底部导航栏、顶部导航栏的需求中我们可以尝试使用这个新组件。甚至，可以尝试写一个单Activity的应用 Navigation 导航组件由以下三个关键部分组成： Navigation视图：在res/navigation包下面的xml视图资源，包括应用内所有单个内容区域以及用户可以通过应用获取的可能路径。
Android学习（简单使用Bottom Navigation Activity来实现底部导航栏）
热门推荐
qq_42893430的博客
06-17 3万+
在我们实际编写程序时，不必每一个activity都要从零开始，利用好系统自带的模板往往可以起到事半功倍的效果。下面我们就来看看如何使用Bottom Navigation Activity来完成简单的底部导航栏功能。先来看一下效果图吧： 创建activity 首先在创建面板，我们选择 然后next,finish就OK了。创建成功以后我们来运行一下，发现 已经基本实现了底部导航栏的功能了！但是还没有结...
Android开发（三）：BottomNavigationView+Fragment实现底部导航栏和页面的切换
一世纤华的博客
12-05 3191
创建新项目，选择Empty Activity,点击Next 填写相关信息，点击finish 创建四个类和对应的布局文件 在res下创建menu目录和navigation目录 在menu目录下创建menu_bottom_nav.xml文件 在navigation目录下创建nav_bottom_nav.xml文件 回到创建的四个类中，继承Fragment,并重写onCreateView方法，并绑定布局文件 OneFragment.kt package edu.nju..
Android JetPack navigation 结合 BottomNavigationView 组件使用
LeakCollector的博客
03-10 1082
Android JetPack navigation 结合 BottomNavigationView 组件使用 简要说一下流程 1. 添加依赖 在build.gradle文件中添加： ext.navigationVersion = "2.0.0" dependencies { //... implementation "androidx.navigation:navigatio...
android底部导航进行跳转,Android实现底部导航菜单的跳转--BottomNavigationView
weixin_39610229的博客
05-26 1018
效果： 项目结构： 需要用到design依赖： 现在是：implementation ‘com.android.support:design:28.0.0’代码：activity_main.xmlmy_fragment.xml(其他两个类似不在累述)home_bottom_tab_color_selsctor.xmlhome_bottom_tab_my_selector.xmlMainActi...
jetpack compose 底部导航栏
06-02
在 Jetpack Compose 中创建底部导航栏可以使用 `BottomNavigation` 和 `BottomNavigationItem` 组件。以下是创建底部导航栏的步骤： 1. 导入所需的组件： ```kotlin import androidx.compose.foundation.Icon import androidx.compose.foundation.layout.Row import androidx.compose.material.BottomNavigation import androidx.compose.material.BottomNavigationItem import androidx.compose.material.IconToggleButton import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.painterResource import androidx.navigation.NavHostController import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController ``` 2. 创建底部导航栏的选项卡： ```kotlin sealed class BottomNavItem(val route: String, val icon: ImageVector, val title: String) { object Home : BottomNavItem("home", Icons.Filled.Home, "Home") object Search : BottomNavItem("search", Icons.Filled.Search, "Search") object Profile : BottomNavItem("profile", Icons.Filled.Person, "Profile") } val bottomNavItems = listOf( BottomNavItem.Home, BottomNavItem.Search, BottomNavItem.Profile ) ``` 3. 创建底部导航栏： ```kotlin @Composable fun BottomNavigationBar( navController: NavHostController ) { var selectedTab by remember { mutableStateOf(BottomNavItem.Home) } BottomNavigation { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route bottomNavItems.forEach { screen -> BottomNavigationItem( icon = { Icon(screen.icon, contentDescription = null) }, label = { Text(screen.title) }, selected = currentRoute == screen.route, onClick = { selectedTab = screen navController.navigate(screen.route) { popUpTo(navController.graph.startDestinationId) launchSingleTop = true } } ) } } } ``` 在 `BottomNavigationBar` 中，我们首先定义了一个 `selectedTab` 变量，用于跟踪当前选中的选项卡。然后，我们使用 `BottomNavigation` 组件创建底部导航栏，并使用 `BottomNavigationItem` 组件创建每个选项卡。我们使用 `navController` 控制导航，在点击选项卡时，更新 `selectedTab` 变量，然后导航到对应的目的地。 最后，我们可以将 `BottomNavigationBar` 组件添加到 `Scaffold` 中，创建一个带有底部导航栏的应用程序界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值