TrainApp Navigation创建

258 阅读4分钟

导航是指支持用户导航、进入和退出应用中不同内容片段的交互。Android Jetpack 的导航组件可帮助您我们实现导航,无论是简单的按钮点击,还是应用栏和抽屉式导航栏等更为复杂的模式,该组件均可应对。

导航组件由以下三个关键部分组成:

导航图:在一个集中位置包含所有导航相关信息的 XML 资源。 NavHost:显示导航图中目标的空白容器。 NavController:在 NavHost 中管理应用导航的对象。

创建新项目TrainApp,接下我们就进行Navigation的基础配置,以便我们在项目中进行使用。

添加Navigation dependencies

我们可以参考下图进行对应的dependencies进行添加:

另外我们也可以通过直接修改build.gradle文件

dependencies {
    // navigation 版本
    def nav_version = "2.2.0-rc04"
  
    // 添加navigation依赖
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

然后点击"Sync Project with Gradle Files"更新项目。

创建HomeFragment和LaunchFragment页面,并创建对应的布局文件。

Android Studio帮我们创建Blank Fragment里面有很多代码,在这里我们暂时不需要,所以直接删除无用代码,只保留onCreateView方法。

这里我们尝试使用Material Components,添加如下依赖:

// 添加material design依赖
implementation 'com.google.android.material:material:1.2.0-alpha03'

创建HomeFragment和LaunchFragment对应的布局文件,并在其中添加简单的textveiw来展示文字内容:

创建navigation.xml

创建好的navigation.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/navigation">

</navigation>

此时编辑器提示我们navigation至少需要一个layout文件。选择design模式:

选择下图中的按钮进行添加Destination fragment:

将HomeFragment和LaunchFragment添加至导航文件中来:

在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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

其中我们需要注意下面三个属性:

android:name:该属性指定包含NavHost类实现的类名称,android中已经为我们实现了NavHostFragment,这里直接使用。

app:defaultNavHost: 指定默认的NavHost,注意在同一个项目中只有一个NavHost可以被指定为默认值

app:navGraph:将我们创建的导航文件和NavHostFragment进行关联。

我们试着运行app:

可以看到,我们在Activity中并没有实现任何代码,HomeFragment已经正确的显示了。那么为什么会显示HomeFragment呢?

我们一起来看下导航文件:

可以看到HomeFragment后面多了一个Start,显而易见,这里是将HomeFragment作为导航的起始页面,查看xml文件:

app:startDestination属性指定的是导航的第一个目标,也就是我们在屏幕上显示的第一个页面,同时也是我们离开app时看到的最后一个页面。在导航编辑器中使用Home图标来标识。

如果我们需要修改起始页面,可以在xml中直接修改对应的资源id,也可以通过导航编辑器中在目标页面右键的方式调出菜单进行设置:

这里还有一个小问题,那就是在导航编辑器中显示的页面都无法进行预览,其实这个问题很好解决,我们只需要添加对应的layout属性即可。

接下来我们需要在导航中创建不同页面之间的action,也就是页面跳转的逻辑。

Action在导航编辑器中是以箭头的方式表现,箭头方向指示的就是待跳转页面。在导航编辑中可以通过如下步骤实现Action的创建:

关于动画部分暂不做介绍,我们也可以在xml中直接添加action属性,指定id和destination属性即可。

到这里,关于导航创建的基础知识我们就算完成了,如果运行app,大家会发现此时app没有办法进行页面切换。

注意:要导航到实际的目标,我们仍然需要编写代码进行控制