Android Jetpack Compose之底部导航栏的实现

目录

  • 1.概述
  • 2. 效果展示
  • 3. 代码实现
    • 3.1 定义底部导航栏的tab项
    • 3.2 整体页面架构搭建
    • 3.3 底部导航栏的实现
    • 3.4 所有代码
  • 4.总结

1.概述

写过一段Android jetpack compose 界面的小伙伴应该都用过Compose的脚手架Scaffold，利用它我们可以很快的实现一个现代APP的主流界面架构，即一个带顶部导航栏和底部导航栏的界面架构，我们基于这个架构可以快速的搭建出我们想要的页面效果。而今天的文章就是要介绍如何实现一个有特点的底部导航栏。底部导航栏一般都是在界面的最底部有可供切换的几个按钮，点击对应的按钮可以切换到对应的页面，例如微信的底部导航栏，分为“微信、通讯录、发现、我”四个选项，这四个选项也比较中规中矩，使用Compose实现起来也很简单，只要配置好按钮和对应的文字就可以。但是如果设计的同学不按常理出牌，比如像咸鱼那样，搞5个按钮，其中有一个还特别大。如下图：
在这里插入图片描述那阁下该如何应对呢。本文就介绍下如何实现这样的底部导航栏。

2. 效果展示

实现其实也不难，只需要设计的小朋友给咱们切一张背景图，就是上图中的带弧形的背景图给我们，我们再绘制到底部导航栏的背后就行了，先看下效果：

在这里插入图片描述

3. 代码实现

3.1 定义底部导航栏的tab项

经过观察我们可以发现底部导航栏的显示有图标和文字，并且选中的时候颜色会变化，所以我们需要定义一个类来保存这些状态，代码如下：

sealed class ScreenPage(val route: String,@StringRes val resId: Int = 0, // 如果没有文字标题，就不需要使用这个属性val iconSelect: Int,val iconUnselect: Int,var isShowText: Boolean = true
) {object Home : ScreenPage(route = "home",resId = R.string.str_main_title_home,iconSelect = R.drawable.ic_home_selected,iconUnselect = R.drawable.ic_home_unselected)object Recommend : ScreenPage(route = "recommend",resId = R.string.str_main_title_recommend,iconSelect = R.drawable.ic_recom_selected,iconUnselect = R.drawable.ic_recom_unselected)object Capture : ScreenPage(route = "add",iconSelect = R.drawable.ic_add_selected,iconUnselect = R.drawable.ic_add_unselected,isShowText = false)object Find : ScreenPage(route = "find",resId = R.string.str_main_title_find,iconSelect = R.drawable.ic_find_selected,iconUnselect = R.drawable.ic_find_unselected)object Mine : ScreenPage(route = "mine",resId = R.string.str_main_title_mine,iconSelect = R.drawable.ic_mine_selected,iconUnselect = R.drawable.ic_mine_unselected)
}

如上面的代码所示，我们在对应的tab中添加上展示的文字的资源ID，选中和未选中的图片资源ID，以及路由，当我们需要切换到其他tab时改变这些属性就可以了，路由可以帮助我们跳转到其他页面。是否显示title的属性可以帮助我们自定义底部Tab的样式
注意：图中的图标资源可以去阿里的矢量图标库下载 阿里矢量图标库地址

3.2 整体页面架构搭建

使用Scaffold搭建页面的架构，这里的Scaffold需要特别注意，我们用到的是material中的Scafold，不是material3中的那个 代码如下：

    val items = listOf(ScreenPage.Home,ScreenPage.Recommend,ScreenPage.Capture,ScreenPage.Find,ScreenPage.Mine)val navController = rememberNavController()val context = LocalContext.currentScaffold(bottomBar = {.....省略底部导航栏的代码,这部分单独介绍......}},backgroundColor = Color.LightGray) { paddingValues ->Log.d("walt-zhong", "paddingValues: $paddingValues")NavHost(navController,startDestination = ScreenPage.Home.route,
//            modifier = Modifier.padding(paddingValues) 
// 加了会导致底部多出一些padding导致影响透明背景的显示) {composable(ScreenPage.Home.route) {HomePage()}composable(ScreenPage.Recommend.route) {RecPage()}composable(ScreenPage.Capture.route) {// CapturePage()}composable(ScreenPage.Find.route) {// FindPage()}composable(ScreenPage.Mine.route) {// MinePage()}}}

我们使用Compose的navigation做页面导航，这里就不介绍相关的知识了，有兴趣的自行百度。然后配置好需要跳转的页面
这里需要注意的是，不要将Scaffold提供的padding值设置给底部导航栏或者是NavHost，因为这样会导致我们的透明背景被遮挡，导致无法显示弧形的底部导航栏效果。

3.3 底部导航栏的实现

底部导航栏的实现主要有背景的绘制，选中tab的状态变更以及对应页面的切换，代码如下：

  BottomAppBar(elevation = 0.dp,backgroundColor = Color.Transparent,contentColor = Color.Transparent,modifier = Modifier.wrapContentHeight().fillMaxWidth().drawWithCache {val bgImg = ContextCompat.getDrawable(context,R.drawable.main_nav_bg)onDrawBehind {bgImg!!.updateBounds(0,0, // 这里可以调整中间的大按钮的上下位置。size.width.toInt(),size.height.toInt())bgImg.draw(drawContext.canvas.nativeCanvas)}}) {val navBackStackEntry by navController.currentBackStackEntryAsState()val currentDestination = navBackStackEntry?.destinationvar isSelected: Booleanitems.forEach { screenPage ->isSelected =currentDestination?.hierarchy?.any { it.route == screenPage.route } == trueCompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {BottomNavigationItem(selected = isSelected,selectedContentColor = Color(0xFF037FF5),unselectedContentColor = Color(0xFF31373D),onClick = {navController.navigate(screenPage.route) {//点击Item时，清空栈内到NavOptionsBuilder.popUpTo ID之间的所有Item// 避免栈内节点的持续增加，同时saveState用于界面状态的恢复popUpTo(navController.graph.findStartDestination().id) {saveState = true}// 避免多次点击Item时产生多个实列launchSingleTop = true// 当再次点击之前的Item时，恢复状态restoreState = true}},icon = {Image(painter = if (isSelected) {painterResource(screenPage.iconSelect)} else {painterResource(screenPage.iconUnselect)},null,modifier = if (!screenPage.isShowText) {Modifier.size(58.dp)} else {Modifier.size(25.dp)},contentScale = ContentScale.Crop)},alwaysShowLabel = screenPage.isShowText,label =if (!screenPage.isShowText) {null} else {{Text(text = stringResource(screenPage.resId),style = TextStyle(fontSize = 10.sp,fontWeight = FontWeight.Medium,color = if (isSelected) {Color.Yellow} else {Color.Black}))}},modifier = if (screenPage.isShowText) {Modifier.padding(top = 10.dp)} else {Modifier.padding(top = 0.dp)})}}}

上面的代码应该都很好懂，所以我们就只讲下绘制背景部分，其他的读者可以自行阅读代码，绘制背景部分的代码是：

   Modifier.drawWithCache {val bgImg = ContextCompat.getDrawable(context,R.drawable.main_nav_bg)onDrawBehind {bgImg!!.updateBounds(0,0, // 这里可以调整中间的大按钮的上下位置。size.width.toInt(),size.height.toInt())bgImg.draw(drawContext.canvas.nativeCanvas)}
}

这里我们可以使用Modiofier.drawBehind { }方法，但是这个方法会在每次重组的时候重新走一遍，所以我们使用Modifier.drawWithCache来优化它。这里我们将弧形背景绘制到底部导航栏的后面。就呈现出来一个弧形的底部导航栏，这时候我们还需要绘制tab，我们可以根据配置去改变TAB的图标大小和状态。添加动画等。
在这里我们还需要注意的是我们需将底部导航栏BottomAppBar的背景设置成透明的，否则他会影响我们的弧形背景的显示

还有设置文字的时候需要特别注意，如下面的代码所示：

BottomNavigationItem(...省略掉部分不相干代码....alwaysShowLabel = screenPage.isShowText,label =if (!screenPage.isShowText) {null} else {{Text(text = stringResource(screenPage.resId),style = TextStyle(fontSize = 10.sp,fontWeight = FontWeight.Medium,color = if (isSelected) {Color.Yellow} else {Color.Black}))}},modifier = if (screenPage.isShowText) {Modifier.padding(top = 10.dp)} else {Modifier.padding(top = 0.dp)}
)

如上面的代码所示，我们想要底部的部分Tab显示的时候不展示文字，这时就需要将alwaysShowLabel设置成false,但是这时候设置 label的时候，需要设置成null,否则我们的Tab显示会不正常，因为文字部分虽然不显示，但是内容还是占据着UI中的位置，导致不显示文字的TAB位置不正确。

3.4 所有代码

class BottomNavAct : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyComposeTheme {// A surface container using the 'background' color from the themeSurface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {MainContainerPage()}}}}
@Composable
fun MainContainerPage() {val items = listOf(ScreenPage.Home,ScreenPage.Recommend,ScreenPage.Capture,ScreenPage.Find,ScreenPage.Mine)val navController = rememberNavController()val context = LocalContext.currentScaffold(bottomBar = {BottomAppBar(elevation = 0.dp,backgroundColor = Color.Transparent,contentColor = Color.Transparent,modifier = Modifier.wrapContentHeight().fillMaxWidth().drawWithCache {val bgImg = ContextCompat.getDrawable(context,R.drawable.main_nav_bg)onDrawBehind {bgImg!!.updateBounds(0,0, // 这里可以调整中间的大按钮的上下位置。size.width.toInt(),size.height.toInt())bgImg.draw(drawContext.canvas.nativeCanvas)}}) {val navBackStackEntry by navController.currentBackStackEntryAsState()val currentDestination = navBackStackEntry?.destinationvar isSelected: Booleanitems.forEach { screenPage ->isSelected =currentDestination?.hierarchy?.any { it.route == screenPage.route } == trueCompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {BottomNavigationItem(selected = isSelected,selectedContentColor = Color(0xFF037FF5),unselectedContentColor = Color(0xFF31373D),onClick = {navController.navigate(screenPage.route) {//点击Item时，清空栈内到NavOptionsBuilder.popUpTo ID之间的所有Item// 避免栈内节点的持续增加，同时saveState用于界面状态的恢复popUpTo(navController.graph.findStartDestination().id) {saveState = true}// 避免多次点击Item时产生多个实列launchSingleTop = true// 当再次点击之前的Item时，恢复状态restoreState = true}},icon = {Image(painter = if (isSelected) {painterResource(screenPage.iconSelect)} else {painterResource(screenPage.iconUnselect)},null,modifier = if (!screenPage.isShowText) {Modifier.size(58.dp)} else {Modifier.size(25.dp)},contentScale = ContentScale.Crop)},alwaysShowLabel = screenPage.isShowText,label =if (!screenPage.isShowText) {null} else {{Text(text = stringResource(screenPage.resId),style = TextStyle(fontSize = 10.sp,fontWeight = FontWeight.Medium,color = if (isSelected) {Color.Yellow} else {Color.Black}))}},modifier = if (screenPage.isShowText) {Modifier.padding(top = 10.dp)} else {Modifier.padding(top = 0.dp)})}}}},backgroundColor = Color.LightGray) { paddingValues ->Log.d("walt-zhong", "paddingValues: $paddingValues")NavHost(navController,startDestination = ScreenPage.Home.route,// modifier = Modifier.padding(paddingValues) // 加了会导致底部多出一些padding导致影响透明背景的示) {composable(ScreenPage.Home.route) {HomePage()}composable(ScreenPage.Recommend.route) {RecPage()}composable(ScreenPage.Capture.route) {// CapturePage()}composable(ScreenPage.Find.route) {// FindPage()}composable(ScreenPage.Mine.route) {// MinePage()}}}
}object NoRippleTheme : RippleTheme {@Composableoverride fun defaultColor(): Color = Color.Unspecified@Composableoverride fun rippleAlpha(): RippleAlpha =RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}sealed class ScreenPage(val route: String,@StringRes val resId: Int = 0, // 如果没有文字标题，就不需要使用这个属性val iconSelect: Int,val iconUnselect: Int,var isShowText: Boolean = true
) {object Home : ScreenPage(route = "home",resId = R.string.str_main_title_home,iconSelect = R.drawable.ic_home_selected,iconUnselect = R.drawable.ic_home_unselected)object Recommend : ScreenPage(route = "recommend",resId = R.string.str_main_title_recommend,iconSelect = R.drawable.ic_recom_selected,iconUnselect = R.drawable.ic_recom_unselected)object Capture : ScreenPage(route = "add",iconSelect = R.drawable.ic_add_selected,iconUnselect = R.drawable.ic_add_unselected,isShowText = false)object Find : ScreenPage(route = "find",resId = R.string.str_main_title_find,iconSelect = R.drawable.ic_find_selected,iconUnselect = R.drawable.ic_find_unselected)object Mine : ScreenPage(route = "mine",resId = R.string.str_main_title_mine,iconSelect = R.drawable.ic_mine_selected,iconUnselect = R.drawable.ic_mine_unselected)
}

4.总结

本文主要介绍了一个特殊有趣的底部导航栏的实现方法，在大型项目的开发中，底部导航栏会被当成一个单独的模块维护，这就需要将底部导航栏抽取出来，本文只做一个抛砖引玉的作用，读者感兴趣可以试着抽取一下，我在项目中是抽取出来作为单独的模块的，发现的问题是抽取出来后 BottomNavigationItem的selectedContentColor 和unselectedContentColor 对于文字不生效了。最后我的解决方法是通过selected属性去动态修改对应的字体颜色和图片，在使用过程中读者有问题的话可以评论区一起交流

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

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

相关文章

MySQL窗口函数--lead（）函数

MySQL窗口函数--lead（）函数

lead()函数： 查询当前行向下偏移n行对应的结果 该函数有三个参数：第一个为待查询的参数列名，第二个为向下偏移的位数，第三个参数为超出最下面边界的默认值。 如下代码： 查询向下偏移 2 位的年龄 SELECT user_id,user…
阅读更多...
路灯哪个牌子好?2024年大路灯推荐合集

路灯哪个牌子好?2024年大路灯推荐合集

经常晚上学习的学生党、加班加点的打工人以及三更半夜备考的考公考研人士都看过来！你是否经常会出现眼睛酸痛、干涩、疲劳的情况，并且注意力不集中，长期下来不仅工作学习效率低，而且视力也受到了影响。这是一大部分原因是因为长期…
阅读更多...
前端通过nginx,访问一个文件夹里面的全部数据，nginx 咋配置

前端通过nginx,访问一个文件夹里面的全部数据，nginx 咋配置

目录 1 问题2 实现 1 问题 前端通过nginx,访问一个文件夹里面的全部数据，nginx 咋配置 2 实现 location /logs {alias /mnt/www/logs/;autoindex on; }
阅读更多...
配置了静态ip地址后，通过ssh连接到虚拟机比较慢

配置了静态ip地址后，通过ssh连接到虚拟机比较慢

配置了静态ip地址后，通过ssh连接到虚拟机比较慢 [rootlocalhost ~]# vim /etc/ssh/sshd_config#快速方式找到UsePAM，输入“/UsePAM”而后回车，直接跳到UsePAM位置，将yes修改成no #键盘输入" i "开始编译 #"Esc&qu…
阅读更多...
Redis核心技术与实战【学习笔记】 - 9.如何避免单线程模型的阻塞

Redis核心技术与实战【学习笔记】 - 9.如何避免单线程模型的阻塞

概述 Redis 被广泛应用的原因是因为它支持高性能访问。所以，我们要重视所有可能影响 Redis 性能的因素（如命令操作、系统配置、关键机制、硬件配置等）。 影响 Redis 性能的 5 大方面的潜在因素分别是： Redis 内部的阻塞式操作C…
阅读更多...
二叉树-堆应用（1）

二叉树-堆应用（1）

目录 堆排序 整体思路 代码实现 Q1建大堆/小堆 Q2数据个数和下标 TopK问题 整体思路 代码实现 Q1造数据CreateData Q2建大堆/小堆 建堆的两种方法这里会用到前面的向上/向下调整/交换函数。向上调整&向下调整算法-CSDN博客 堆排序 整体思路 建堆（直…
阅读更多...
【经典项目】Java小游戏 —— 会说话的汤姆猫

【经典项目】Java小游戏 —— 会说话的汤姆猫

一、游戏回顾 【预期效果】 【玩法介绍】 1、 和它说话，它将用有趣的声音重复你的话。 2、打它的头，它会装成被打的样子，连续打还会晕倒；抚摸肚子，它会打呼噜；打肚子，它会装肚子疼&#xff1b…
阅读更多...
AVR 328pb定时器0基本介绍和使用

AVR 328pb定时器0基本介绍和使用

AVR 328pb定时器0基本介绍和使用 📌参考ATmega328PB文档.📍结合参考同架构lgt8f328p中文文档：http://www.prodesign.com.cn/wp-content/uploads/2023/03/LGT8FX8P_databook_v1.0.4.pdf 📗定时器0基本功能描述 两个独立的输出比较…
阅读更多...
记一次java项目本地正常执行，打完包之后执行发现没有对应的类或配置的问题

记一次java项目本地正常执行，打完包之后执行发现没有对应的类或配置的问题

1、起因 线上有个spark的任务出了问题（该任务是通过sparkstreaming读取kafka中的数据，处理完之后推到es中），问题出在kafka中数据是有更新的，但是es中的对应索引中的数据却只更新到月初，因此我需要排查处理…
阅读更多...
JavaSE-项目小结-IP归属地查询（本地IP地址库）

JavaSE-项目小结-IP归属地查询（本地IP地址库）

一、项目介绍 1. 背景 IP地址是网络通信中的重要标识，通过分析IP地址的归属地信息，可以帮助我们了解访问来源、用户行为和网络安全等关键信息。例如应用于网站访问日志分析：通过分析访问日志中的IP地址，了解网站访问者的地理位置分…
阅读更多...
Linux进程通信基础

Linux进程通信基础

前要：本节内容主要是管道和共享内存块，而且我们需要明白我们所讲的进程通信本质是为了在内存中传递数据（看到同一份资源）。 而实际上，我们也可以通过磁盘传递数据，但是为什么不这么做呢？很简单&…
阅读更多...
【Linux】Daemon守护进程详解

【Linux】Daemon守护进程详解

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;Linux系列专栏&#xff1a;Linux基础 &#x1f525; 给大家…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023