如何为安卓应用的底部导航条编码你要创建的东西谷歌的材料设计团队对Android中底部导航条的功能定义如下。根据安卓底

Final product image 你要创建的东西

谷歌的材料设计团队对Android中底部导航条的功能定义如下。

底部导航栏让你可以轻松地探索和切换顶层视图，只需一次点击。

点击一个底部导航图标可以直接进入相关的视图，或者刷新当前的活动视图。

根据安卓底部导航条的官方Material Design指南，它应该在你的应用程序有以下内容时使用。

三到五个顶层目的地
需要直接访问的目的地

一个实现底部导航条的流行应用的例子是来自谷歌的谷歌发现安卓应用，它使用它来导航到应用的不同目的地。你可以通过从谷歌应用商店下载谷歌发现应用（如果你的设备上还没有），自己看到这一点。下面的截图来自谷歌发现应用，显示了一个安卓底部导航栏。

Android Studio Bottom Navigation Bar Tutorial Screenshot of Google Discover App With Android Bottom Bar

在这篇文章中，你将学习如何在安卓的底部导航栏内显示菜单项。你将使用AndroidX导航，这是Jetpack库套件的一部分。Jetpack是一套库，可以帮助开发者编写在不同的Android版本和设备上一致运行的代码。作为奖励，你还将学习如何使用Android Studio模板来快速启动带有底部导航栏的项目。

入门

打开Android Studio，创建一个新项目并选择一个空白活动模板，如下图所示。从下拉菜单中选择Kotlin语言，然后点击**完成。**等待Android Studio完成对项目资源的创建。

android project

添加项目的依赖性

在我们开始之前的第一件事是添加项目的依赖性。打开应用程序的build.gradle文件，添加以下依赖项。

dependencies {
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    def nav_version = "2.3.5"

    //The rest of the depencencies here

    // Kotlin
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

}

创建一个导航图

导航图是一个XML资源文件，包含了你所有的应用程序的目的地和操作。右键点击res目录，选择新建>Android资源文件。提供一个名称并选择导航作为资源类型，然后点击确定。导航图会被放置在导航文件夹中，如下面的结构所示。

在导航图中添加目的地

导航文件将包含我们应用程序的所有目的地。要添加一个目的地，请点击设计标签顶部的加号**（+**），或者如果你已经创建了片段，请选择一个现有的目的地。

我们的应用程序将有三个屏幕，即。

主页
档案页
设置页面

因此，我们将在导航XML文件中添加三个目的地。要添加一个新的目的地，点击加号**（+）** 并选择创建新的目的地 选项**。**在下一个屏幕上，选择一个空白片段并提供细节，如下图所示。

home fragment

重复同样的步骤，为简介和设置屏幕创建另外两个片段。最终的导航图XML现在看起来像这样。

每个片段都有它的布局，你可以按照你的意愿进行定制。下面是在每个片段的中心添加一个文本视图后每个片段的样子。

fragments

添加一个导航主机片段和底部导航视图

接下来，在主布局**（main_activity.xml**）中定义一个主机片段。导航主机片段是一个空的容器，当用户在你的应用程序中导航时，目的地会被换入和换出。我们还将在主布局中添加 BottomNavigationView ，如下图所示。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://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">
    
    <fragment
    android:id="@+id/nav_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@id/bottom_navigatin_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph " />



    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigatin_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

添加菜单项

下一步是为底部导航视图添加菜单项。右键点击res目录，选择新建>Android资源文件 ，并选择菜单，提供一个名称并点击确定。

打开菜单的XML文件，添加三个菜单项，如下图所示。

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

    <item android:title="Home" />
    <item android:title="Profile" />
    <item android:title="Setting" />

</menu>

为菜单项添加矢量资产

矢量资产是一个XML文件，在其文件中定义了一个虚拟图像。矢量资产保证了清晰的图像，可以被调整到任何屏幕尺寸而不损失其质量。要添加一个矢量资产，右击可画性> 新建>创建矢量资产，为主菜单选择一个主页图标，如下图所示。

add vector asset

重复同样的步骤，为其余的菜单项目创建矢量资产。如下图所示，将矢量资产添加到各自的菜单项中。

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

    <item android:title="Home"
        android:icon="@drawable/home"/>
    <item android:title="Profile"
        android:icon="@drawable/profile"/>
    <item android:title="Setting"
        android:icon="@drawable/settings"/>

</menu>

下一步是为每个菜单项添加id属性。菜单项的id应该与导航图目的地的id相同，以便允许在整个片段中进行导航。

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

    <item
        android:id="@+id/homeFragment"
        android:title="Home"
        android:icon="@drawable/home"/>
    <item
        android:id="@+id/profileFragment"
        android:title="Profile"
        android:icon="@drawable/profile"/>
    <item
        android:id="@+id/settingsFragment"
        android:title="Setting"
        android:icon="@drawable/settings"/>

</menu>

在底部导航视图中添加菜单项

最后一步是将菜单添加到底部导航视图中。打开main_activity.xml并添加属性，app:menu="@menu/bottom_nav" 到BottomNvigationView 。

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigatin_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav" />

关于导航控制器

NavController 是一个在NavHost 内管理应用程序导航的对象。当用户在你的应用程序中移动时，它可以协调片段的交换。在主活动类中，调用 [setupWithNavController()](https://developer.android.com/reference/androidx/navigation/ui/NavigationUI#setupWithNavController(android.support.design.widget.NavigationView,%20androidx.navigation.NavController))从你的主活动的onCreate() 方法，如下所示。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Initialize the bottom navigation view
        //create bottom navigation view object
        val bottomNavigationView = findViewById<BottomNavigationView
                >(R.id.bottom_navigatin_view)
        val navController = findNavController(R.id.nav_fragment)
        bottomNavigationView.setupWithNavController(navController
        )


    }
}