Android Studio 基于Menu和BottomNavigationView实现底部导航栏，并实现自 ...

#前言

        众所周知，要做一个安卓app，对于导航栏的需求是一直都不外时的，像市面上的大部门app它们都是浩繁导航栏叠加实现了多种酷炫的效果，当然最告急的是页面跳转这个功能。

        本期教程我将告诉小搭档们如何使用 Menu 和 BottomNavigationView 来实现底部导航栏，实现效果如下：
     屏幕录制 2024-11-13 124246
  

注意：一目十行，保证头疼，请逐步看  ~^<^~

步调一：

        实现我们要确保我们的 res 资源文件夹下有 menu 资源文件夹，由于我们必要这个资源文件夹下的一些属性及方法：
 (1) res -> New -> Android Resource Directory 

(2) 在Resource type 下选择menu，并点击OK

（3）在 menu 资源文件夹下创建一个menu类的资源文件

menu -> New -> Menu Resource File

(4) 命名为 bottom_menu （这个根据个人习惯自行命名就行，不外得注意后续引用资源文件时要注意名称）点击OK

 （5）在 bottom_menu.xml 文件下加入如下代码，（可以根据个人需求进行更改，代码并不复杂）

1. <?xml version="1.0" encoding="utf-8"?>
2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
3.     <item
4.         android:id="@+id/bottom_group"
5.         android:title="分组"
6.         android:icon="@drawable/icon_group"></item>
8.     <item
9.         android:id="@+id/bottom_crony"
10.         android:title="好友"
11.         android:icon="@drawable/icon_crony"
12.         ></item>
14.     <item
15.         android:id="@+id/bottom_add"
16.         android:title="发现"
17.         android:icon="@drawable/icon_discover"
18.         ></item>
20.     <item
21.         android:id="@+id/bottom_myself"
22.         android:title="我的"
23.         android:icon="@drawable/icon_myself"></item>
24. </menu>

复制代码

这里必要注意的是，我们的 icon 资源是我们个人定义的，这里我只展示此中一个的创建方法，其余的小搭档们根据个人需求自行创建，这个创建是比较简朴的，小搭档们应该能轻松闻一知十

[1] drawable -> New -> Vector Asset

 [2] 在Clip art 中选择一个你喜欢的图标

[3] 自定义一个名称，我这里统一命名规范为 icon_****** ，然后Next -> Finish

然后我们把创建的 icon 资源文件加入到我们的 bottom_menu.xml 文件中

 
步调二：

        然后我们便必要转到我们的  activity_main.xml 文件中加入如下布局代码：
（稍后我会解释此中关键代码的涵义）

1. <com.google.android.material.bottomnavigation.BottomNavigationView
2.         android:id="@+id/bottom_menu"
3.         android:layout_width="match_parent"
4.         android:layout_height="wrap_content"
5.         android:background="@drawable/bottom_background"
6.         app:labelVisibilityMode="labeled"
7.         app:itemIconTint="@color/selected_color"
8.         app:itemTextColor="@color/selected_color"
9.         app:itemRippleColor="@android:color/transparent"
10.         app:layout_constraintBottom_toBottomOf="parent"
11.         app:layout_constraintEnd_toEndOf="parent"
12.         app:layout_constraintStart_toStartOf="parent"
13.         app:menu="@menu/bottom_menu" />

复制代码

关键代码解释：
        （1）app:labelVisibilityMode="labeled" ，这个代码意思是让我们未选中时也显示我们的 label或者 title，为什么要添加这个呢？由于我们 Android 开发计划规范导致的，当我们在 menu 中定义的 <item> 数目大于 3 个时，系统会默认取消显示 label 或者 title ，而这种肯定不利于我们用户操纵，所以我们加入这个代码让底部导航栏其他未被选择的也显示 label或者 title
大家也可以试着看看当没有这个代码会出现什么情况  ~^<^~

        (2) android:background="@drawable/bottom_background"，这个资源文件的代码如下：
（它的创建过程我就不展示了，比较简朴，假如着实不会，请实时接洽我） ~^<^~

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:shape="rectangle">
4.     <solid android:color="#fff"></solid>
5.     <corners android:radius="5dp"></corners>
6. </shape>

复制代码

（3）这里大家对于这两个资源文件可能会有疑问：
app:itemIconTint="@color/selected_color"
app:itemTextColor="@color/selected_color"
不要慌，作者肯定是会告诉你的，但是我得先来告诉你这个代码的作用，它们俩实现的就是自定义选中和未选中的颜色，第一行是 icon 的，第二行是 title 的；


步调三：

        接下来我们便要来实现我们的自定义选中和未选中的颜色功能了，这个功能是比较实用的，由于它所实现的效果可以给我们的用户带来精良的app体验
（1）首先我们要创建一个新的资源文件夹，由于我们必要用到这个资源文件中的一些属性和方法：res -> New -> Android Resource Directory 

(2) 在Resource type 下选择color，并点击OK

（3）color -> New -> Color Resource File

 (4) 命名为 selected_color （这个根据个人习惯自行命名就行，不外得注意后续引用资源文件时要注意名称）点击OK

（5） 末了在 selected_color.xml 文件中加入如下代码:

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3.     <item android:color="#666" android:state_checked="true"/>
4.     <item android:color="#bbb" android:state_checked="false"/>
5. </selector>

复制代码

如许我们便实现了自定义选中和未选中的颜色功能了
好的，本期分享到这里就结束了，假如你喜欢作者，请为作品点个赞，加个关注哦

作者热衷于分享，假如你对于这篇文章的内容有不明确的地方，请关注并私信作者，我肯定会实时答复你的  ~^<^~

对于这篇文章，假如要借用，请记得标明出处，支持原创哦！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。