Android Studio使用BottomNavigationView实现底部导航栏demo

说明

安卓小白第一次学习安卓，这里记录下自己学习开发安卓的底部导航栏的过程，用原生安卓实现，使用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语言进行开发。

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

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

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

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

在settings.gradle添加如下代码：

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">

    <item
        android:id="@+id/menu_message"
        android:icon="@drawable/home"
        android:title="微信"/>

    <item
        android:id="@+id/menu_address_book"
        android:icon="@drawable/analysis"
        android:title="通讯录"/>

    <item
        android:id="@+id/menu_discovery"
        android:icon="@drawable/report"
        android:title="发现"/>

    <item
        android: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">

    <!--显示底部导航栏对应内容-->
    <FrameLayout
        android: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.BottomNavigationView
        android: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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        android:text="首页" />

</RelativeLayout>

效果如下：

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

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

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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化fragmentList
        fragmentList=new ArrayList<>();
        fragmentList.add(new HomeFragment());
        fragmentList.add(new AddressBookFragment());
        fragmentList.add(new DiscoveryFragment());
        fragmentList.add(new MeFragment());
        //默认显示第一个首页fragment
        showFragment(fragmentList.get(0));
        //找到底部导航栏id
        bottomNavigationView=findViewById(R.id.bottom_navigation);
        //底部导航栏点击时触发
        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public 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;
            }
        });
    }

    //显示fragment
    public void showFragment(Fragment fragment){
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        // 替换Fragment
        fragmentTransaction.replace(R.id.container,fragment);
        // 提交事务
        fragmentTransaction.commit();
    }
}

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




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