说明

安卓小白第一次学习安卓，这里记录下自己学习开发安卓的底部导航栏的过程，用原生安卓实现，使用Java语言进行代码编写，使用BottomNavigationView+Fragment组件来实现底部导航栏切换。

Android Studio官网下载：https://developer.android.google.cn/studio?hl=zh-cn
Android BottomNavigationView组件地址：https://developer.android.google.cn/reference/com/google/android/material/bottomnavigation/BottomNavigationView

项目创建

用Android Studio新建一个项目，操作如下：

我这里选择的是Empty Views Activity，因为选择这个可以选择Java语言进行开发。

新建完成后，如下，它会去下载这个依赖，因为这个依赖是国外的，所以下载很慢。

如果需要使用国内的镜像进行下载，方法如下：

java">distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.7-bin.zip

在gradle-wrapper.properties中将下载源改为国内镜像地址。

在settings.gradle添加如下代码：

java">maven { url = uri("https://maven.aliyun.com/nexus/content/repositories/google") }
maven { url = uri("https://maven.aliyun.com/nexus/content/groups/public") }
maven { url = uri("https://maven.aliyun.com/nexus/content/repositories/jcenter") }maven { url = uri("https://plugins.gradle.org/m2/") }

修改后如下：

添加完成后，关闭项目然后重新打开。就能发现右下角下载依赖的时候，下载源变为自己设置的国内镜像源了。

页面代码实现

在app/src/main/res目录下新建drawable-xxhdpi目录，表示里面存放的是高清图片。举个例子，以视频画质作为例子，比如drawable表示480视频画质，drawable-hdpi表示720的高清画质，drawable-xhdpi表示1080的画质，依次类推越往后越清晰。然后随便在网上找几个图标图片，好像只能存放jpg和png图片。不能放svg图片，这里以png图片为例。

这里放了四个图片

在app/src/main/res目录下新建menu目录，用来存放底部导航栏的菜单项。

在这个目录下面新建一个xml，名字为bottom_bar_menu.xml，操作如下：

选择中间这个，左边用来写代码，右边查看布局。

bottom_bar_menu.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/menu_message"android:icon="@drawable/home"android:title="微信"/><itemandroid:id="@+id/menu_address_book"android:icon="@drawable/analysis"android:title="通讯录"/><itemandroid:id="@+id/menu_discovery"android:icon="@drawable/report"android:title="发现"/><itemandroid:id="@+id/menu_me"android:icon="@drawable/performance"android:title="我的"/>
</menu>

效果如下：

在app/src/main/res/values增加一个灰色。

在app/src/main/res目录下新建color目录，文件名为color_bottom_bar.xml，用来存放底部导航栏切换时选中的颜色和未选中的颜色。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!--底部导航栏选中时为绿色,未选中时为灰色-->
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="#1aad19" android:state_selected="true"/><item android:color="#333333" android:state_selected="false"/>
</selector>

修改app/src/main/res/layout下的activity_main.xml代码，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><!--显示底部导航栏对应内容--><FrameLayoutandroid:id="@+id/container"android:background="@color/white"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><!--底部导航栏控件--><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottom_navigation"app:menu="@menu/bottom_bar_menu"app:labelVisibilityMode="labeled"app:itemActiveIndicatorStyle="@null"app:itemBackground="@color/grey"app:itemTextColor="@color/color_bottom_bar"app:itemIconTint="@color/color_bottom_bar"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>

效果图如下：

然后删除掉MainActivity中的这部分代码，因为在activity_main.xml删除掉了id为main这个属性，为了防止启动报错，所以这里删除掉。

这里我是用的雷电模拟器看的页面效果，效果如下：

底部导航栏切换代码实现

在app/src/main/java/com.example.bottom_navigation_demo下新建一个fragment目录。在该目录下新建一个Fragment的HomeFragment文件，表示的是微信的首页。如下：


在HomeFragment文件中删除掉冗余代码，修改后如下：

然后再重复三次操作，新建其他三个页面的Fragment。如下：
layout下的fragment_home.xml表示微信的页面布局。
layout下的fragment_address_book.xml表示通信录的页面布局。
layout下的fragment_discovery.xml表示发现的页面布局。
layout下的fragment_me.xml表示我的页面布局。
HomeFragment类表示的是fragment_home.xml的交互逻辑。
AddressBookFragment类表示的是fragment_address_book.xml的交互逻辑。
DiscoveryFragment类表示的是fragment_discovery.xml的交互逻辑。
MeFragment类表示的是fragment_me.xml的交互逻辑。

然后修改layout下的fragment_home.xml里面的代码，修改完后代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".fragment.HomeFragment"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="30sp"android:layout_centerInParent="true"android:text="首页" /></RelativeLayout>

效果如下：

其他三个依次坐重复的修改，只是要将android:text="首页"改为对应的页面字段。

点击底部导航栏时，切换到对应的页面，MainActivity代码如下：

java">package com.example.bottom_navigation_demo;import android.os.Bundle;
import android.view.MenuItem;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;import com.example.bottom_navigation_demo.fragment.AddressBookFragment;
import com.example.bottom_navigation_demo.fragment.DiscoveryFragment;
import com.example.bottom_navigation_demo.fragment.HomeFragment;
import com.example.bottom_navigation_demo.fragment.MeFragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {//定义Fragment列表用于切换List<Fragment> fragmentList;//定义底部导航栏用于切换BottomNavigationView bottomNavigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化fragmentListfragmentList=new ArrayList<>();fragmentList.add(new HomeFragment());fragmentList.add(new AddressBookFragment());fragmentList.add(new DiscoveryFragment());fragmentList.add(new MeFragment());//默认显示第一个首页fragmentshowFragment(fragmentList.get(0));//找到底部导航栏idbottomNavigationView=findViewById(R.id.bottom_navigation);//底部导航栏点击时触发bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {//用switch报错，改用if实现if(item.getItemId()==R.id.menu_message){showFragment(fragmentList.get(0));//显示微信}else if(item.getItemId()==R.id.menu_address_book){showFragment(fragmentList.get(1));//显示通讯录}else if(item.getItemId()==R.id.menu_discovery){showFragment(fragmentList.get(2));//显示发现}else {showFragment(fragmentList.get(3));//显示我的}return true;}});}//显示fragmentpublic void showFragment(Fragment fragment){FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();// 替换FragmentfragmentTransaction.replace(R.id.container,fragment);// 提交事务fragmentTransaction.commit();}
}

用雷电模拟器展示的效果如下：




到这里示例代码就写完了，点击底部导航栏时，里面的内容也发生了对应的变化，达到了想要的效果，如果要写具体的页面和交互，比如我的要写一个页面内容，就去fragment_me.xml去写具体的页面布局，然后再去MeFragment类实现对应的事件类进行交互即可。