Jetpack学习之Navigation（1）

Navigation（一）

写这个系列文章的原因在于：自己作为一个新人小白，对于android jetpack组件的学习处于一个初入门的阶段。在网上也找了很多的教程，但是大多数都讲解的比较深奥，或者说版本比较老，很多东西不适用于现在。所以想要写一个纯小白文，加强自己对知识点的掌握，也希望能够帮助其他新人学习者。

通过这篇文章你可以学习到怎样通过navigation实现多个fragment页面之间的转跳（学不会拿板砖来找我=-=）
更多别的功能放在后续文章继续讲解
纯Kotlin

---

1. 首先第一步的话，还是和其他组件一样，需要引入相关的依赖包

implementation(“androidx.navigation:navigation-fragment-ktx:2.4.2”)
implementation(“androidx.navigation:navigation-ui-ktx:2.4.2”)

2. 既然要实现fragment之间的转跳，那肯定少不了fragment呀

   创建两个fragment并与对应的xml文件进行绑定（这个应该很简单可以实现）

page1

//这是第一个fragment 也是我们展示出来的fragment，取名叫做MainPage1Fragment
class MainPage1Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //创建对应的xml文件 fragment_page1 并进行对应的绑定
        return inflater.inflate(R.layout.fragment_page1,container,false)
    }
}

page2

//这是第一个fragment 跳转进入的界面
class MainPage2Fragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //对应的xml布局取名fragment_page2
        return inflater.inflate(R.layout.fragment_page2,container,false)
    }
}

page1_xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<!--    该xml文件放置一个按钮以及一个textview显示文本 -->
    <Button
        android:id="@+id/button_redirects"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Redirects"
        android:textAllCaps="false"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="50dp"/>

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toBottomOf="@id/button_redirects"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="这是page1"
        android:gravity="center" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

page2_xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<!--    一样的布局 放入一个按钮以及一个显示文本-->
    <Button

        android:id="@+id/button_return"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Return"
        android:textAllCaps="false"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="50dp"/>

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toBottomOf="@id/button_return"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="这是page2"
        android:gravity="center" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

3. 接下来在项目中添加导航图

在“Project”窗口中，右键点击 res 目录，然后依次选择 New > Android Resource File。此时系统会显示
NewResource File 对话框。 在 File name 字段中输入名称，例如“nav_graph”。 从 Resource
type 下拉列表中选择 Navigation，然后点击 OK。

这一步其实理解成添加一个navigation，然后我们可以在里面进行一些逻辑上的操作，比如说跳转逻辑等等

4. 在导航图中实现跳转逻辑

直接上代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/page1Fragment">
<!--    我们一步一步说-->
<!--    首先这个id在你创建navigation的时候自动生成，后面要作为布局引入使用-->
<!--    startDestination后面的属性 就是你界面刚开始需要展现的样子，类似与fragment中的add，我们给第一个fragment取名page1Fragment，那么在布局引入时会直接先调用它-->


    <fragment
        android:id="@+id/page1Fragment"
        android:name="com.example.navigationstudy.MainPage1Fragment"
        tools:layout="@layout/fragment_page1"
        android:label="fragment_page1">
<!--        引入一个fragment 给它设置一个id 以及 name 现阶段layout和label直接照抄，不需要理解什么意思，后面会讲解-->

        <action
            android:id="@+id/action_page2"
            app:destination="@id/page2Fragment"/>
<!--        action字面意思动作，也就是我们需要转跳的逻辑代码
            destination通过有道翻译可以知道是目的地，也就是我们需要转跳进入的位置-->
    </fragment>

    <fragment
        android:id="@+id/page2Fragment"
        android:name="com.example.navigationstudy.MainPage2Fragment"
        tools:layout="@layout/fragment_page2"
        android:label="fragment_page2">

        <action
            android:id="@+id/action_page1"
            app:popUpTo="@id/page1Fragment"/>
<!--        popupto也是就我们想要转跳回去的位置-->
    </fragment>
</navigation>

5. 最后在MainActivity.xml中引入导航图

<androidx.constraintlayout.widget.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView

        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"


        app:defaultNavHost="true"
        app:navGraph = "@navigation/nav_graph"/>

<!--    其中id可以自己设置，name是固定写法
        navGraph也就是引入我们的导航图，类似于inflate-->

</androidx.constraintlayout.widget.ConstraintLayout>

5. 最后分别在两个fragment中增加按钮的转跳逻辑，整个代码就大功告成

=======================================================================================

其实如果单纯的想要使用navigation设置两个页面之间的转跳功能的话，逻辑是很清晰的

首先创建两个转跳的fragment界面，然后创建一个导航图，导航图中再实现相关的转跳逻辑，最后在main.xml文件中实现导航图的加载，就完成了