摸清安卓 BottomNavigationView 之底层Navigation原理，做个好工程师！

2023-11-24 11:02:46

从0到1打造一款安卓app之8-使用BottomNavigationView+Navigation实现主页

##1. 前言
在移动端开发中，底部导航栏作为一种常见的UI元素，能够帮助用户轻松切换不同页面。Android平台提供了BottomNavigationView控件，可以轻松实现底部导航栏的功能。本文将介绍如何使用BottomNavigationView和Navigation实现主页。

##2. 新建项目

打开Android Studio，点击“新建项目”按钮，在“新建项目”对话框中，选择“空项目”，并输入项目名称和路径，然后点击“下一步”。
在“选择最低SDK版本”对话框中，选择最低SDK版本，然后点击“下一步”。
在“选择目标SDK版本”对话框中，选择目标SDK版本，然后点击“下一步”。
在“选择模板”对话框中，选择“基本活动”，然后点击“下一步”。
在“配置活动”对话框中，输入活动名称，然后点击“完成”。

##3. 布局设计

在res/layout目录下新建一个名为activity_main.xml的布局文件。
在activity_main.xml中，添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav" />
</androidx.constraintlayout.widget.ConstraintLayout>

##4. 代码编写

在res/menu目录下新建一个名为bottom_nav.xml的文件。
在bottom_nav.xml中，添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
</menu>

在res/navigation目录下新建一个名为nav_graph.xml的文件。
在nav_graph.xml中，添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/FirstFragment">

    <fragment
        android:id="@+id/FirstFragment"
        android:name="com.example.android.navigationadvancedsample.FirstFragment"
        android:label="@string/first_fragment_label" />

    <fragment
        android:id="@+id/SecondFragment"
        android:name="com.example.android.navigationadvancedsample.SecondFragment"
        android:label="@string/second_fragment_label" />

    <fragment
        android:id="@+id/ThirdFragment"
        android:name="com.example.android.navigationadvancedsample.ThirdFragment"
        android:label="@string/third_fragment_label" />
</navigation>

在MainActivity.java中，添加以下代码：

package com.example.android.navigationadvancedsample;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.fragment.NavHostFragment;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

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

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
        NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_container);
        NavController navController = navHostFragment.getNavController();

        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.FirstFragment, R.id.SecondFragment, R.id.ThirdFragment).build();
        bottomNavigationView.setupWithNavController(navController);
    }
}