Android Navigation + Fragment 制作APP主页面导航

最终成品

先创建一个MainActivity

大概是这样 反正能用就行

1.第一步先添加依赖

        Navigation 是JetPack中的组件，官方文档-导航  |  Android Developers (google.cn)

打开你的app下的build.gradle。在dependencies闭包中添加如下依赖：

// Navigation components
    val nav_version="2.4.0"
    implementation("androidx.navigation:navigation-fragment:$nav_version")
    implementation("androidx.navigation:navigation-ui:$nav_version")

添加好之后，点击Sync进行项目同步，同步时会自动下载这些依赖库并配置到你的项目中

Android Navigation 组件主要分为以下5个部分：

1. Navigation Graph:

   • 一个 XML 文件，用于定义应用的导航结构，包括目标（如 Fragment 和 Activity）以及它们之间的关系和跳转操作。

2. NavController:

   • 负责管理导航操作的类，通过它可以执行跳转、传递参数以及处理返回操作。

3. NavHost:

   • 显示导航图中定义的界面的容器，通常是 NavHostFragment，它负责加载和显示当前界面。

4. NavDestination:

   • 定义导航目标（Fragment、Activity 等）的抽象表示，包含目标的基本信息和参数。

5. Safe Args:

   • 一个 Gradle 插件，用于类型安全地传递参数，避免手动解析 Bundle 的复杂性。

主要用到三个东西：导航图（Navigation Graph），控制器（NavController），容器（NavHost）

接下来就是操作步骤：

1.添加导航图

右键res—>new->Android Resource File

2.创建四个Activity，并绑定四个layout

代码如下：

public class AFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_a, container, false);
    }
}

创建四个layout，a,b,c,d

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A Fragment"
        android:textColor="#000"
        android:textSize="24sp" />
</LinearLayout>

每一个一一对应

3.打开这个nav_graph.xml进行Fragment的添加，在navigation标签下增加对AFragment的添加。

在导航图里添加，代码如下：

<?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">
    <!--AFragment-->
    <fragment
        android:id="@+id/afragment"
        android:name="com.example.munuseummobileapp.Fragment.AFragment"
        android:label="afragment"
        tools:layout="@layout/fragment_a" />
    <fragment
        android:id="@+id/bfragment"
        android:name="com.example.munuseummobileapp.Fragment.BFragement"
        android:label="bfragment"
        tools:layout="@layout/fragment_B" />
    <fragment
        android:id="@+id/cfragment"
        android:name="com.example.munuseummobileapp.Fragment.CFragemnet"
        android:label="cfragment"
        tools:layout="@layout/fragment_c" />
    <fragment
        android:id="@+id/dfragment"
        android:name="com.example.munuseummobileapp.Fragment.DFragemnet"
        android:label="dfragment"
        tools:layout="@layout/fragment_d" />
</navigation>

这里解释一下

这段代码是 Android XML 布局文件中的一个 <fragment> 标签，用于定义一个 Fragment 组件。具体解释如下：

1. android:id：为这个 Fragment 指定一个唯一标识符（ID），可以在代码中引用。
2. android:name：指定这个 Fragment 的类名，这里是 AFragment，它包含了 Fragment 的逻辑。
3. android:label：为 Fragment 设置一个标签，通常在用户界面上显示，用于描述该 Fragment。
4. tools:layout：这是一个用于设计工具的属性，指向 Fragment 的布局文件 fragment_a.xml，帮助开发者在设计视图中看到该 Fragment 的样子。

4.添加NavHost

它负责加载和显示当前Fragment界面,都知道Fragment是要依附在Activity上的，那么很明显这个NavHost也是要放在Activity中，那么下面打开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=".Activitys.MainActivity">

    <!--NavHost-->
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后你就会爆一个错误 ，xml页面显示灰色，这个时候不要急往后面看

这里的name指明的是androidx.navigation.fragment.NavHostFragment，这个属性就表明这个fragment指明的就是NavHost，然后它还要添加需要显示的子Fragment，那么就通过navGraph来绑定这个导航图，之前导航图里面不是就有五个Fragment吗？所以这样NavHost的任务就完成了。

那么问题来了 我们有四个fragment那么NavHost一开始要显示哪一个，这里就有一个方法

打开nav_graph.xml。通过startDestination来指明启动Activity时显示的第一个Fragment

到这里的时候当你添加完startDestination，错误自然会消失

那么现在的问题是我们navHost也写好了 但是我们没有按钮可以实现页面的跳转

做到这里就完成整个的一半了 不要跑继续看！！！

4.添加底部导航栏

鼠标右键点击res → New → Android Resource File，然后选择Menu

添加子选项

这里的id要跟nav_graph.xml里面的对应好

icon自己去阿里矢量图标库里面去下载，下载完放在mipmap里面 如果没有就创建一个资源包，然后选mipmap

然后在activity_main.xml里面添加

 <!-- 底部导航 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:background="#FFF"
        app:menu="@menu/menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="675dp" />

这就出来了，按钮可以点击但是页面不会跳转因为这个需要在Activity里面去添加java代码

4.实现Fragment之间的跳转

1）打开MainActivity.java,将底部导航与控制器绑定，到这里就全部结束了