Kotlin Navigation可視化開發詳解

Posted on 2023-02-07 by WalkonNet

前言

其實小編之前一直都是用的Java來開發Android，但是工作需求，開始瞭Kotlin的編程，接觸到瞭JetPack，發現其中的Navigation特別有意思，今天來給大傢分享一下，我們做一個四個頁面吧，從APP的歡迎頁面——>新手引導頁面——>註冊登錄頁面——>APP主頁面，我來帶大傢入門，希望大傢不要嫌棄

Navigation的優勢

站在Fragment角度：不用把Fragment添加到集合裡面去操作瞭，也不用去操作SupportFragmentManager瞭

站在Activity角度：可以減少大量的Activity，增加Fragment的使用，畢竟Fragment有更加詳細的生命周期，更好的傳遞信息

站在開發者角度：Navigation的可視化導航圖非常優美，導航路徑清晰可見，讓開發人員更方便的開發

Navigation開發流程

一.註入依賴

    // Kotlin Navigation
    implementation("androidx.navigation:navigation-fragment-ktx:2.5.1")
    implementation("androidx.navigation:navigation-ui-ktx:2.5.1")

二.創建Fragment和XML視圖

在app/java/com.example.項目名目錄下先創建一個Fragment文件夾，在文件夾中創建4個Fragment，分別為 WelcomeFragment（歡迎頁面），NoviceGuidePageFragment（新手引導頁面），RegistrationLandingPageFragment（註冊登錄頁面），MainFragment（APP主頁面），具體如下圖所示：

在app/res/layout文件夾下創建4個XML，分別為fragment_welcome.xml，fragment_novice_guide_page.xml，fragment_registration_landing_page.xml，fragment_main.xml，具體如下圖所示：

WelcomeFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.siyi2.R
class WelcomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_welcome, container, false)
        return view
    }
}

fragment_welcome.xml：

<?xml version="1.0" encoding="utf-8"?>
<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">
    <TextView
        android:id="@+id/to_fragment_novice_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="歡迎頁面"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

NoviceGuidePageFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class NoviceGuidePageFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_novice_guide_page, container, false)
        return view
    }
}

fragment_novice_guide_page.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/to_fragment_registration_landing_page"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="新手引導頁面"
        android:textSize="30dp"
        android:textColor="#F18C8C"
        android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

RegistrationLandingPageFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class RegistrationLandingPageFragment :Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_registration_landing_page,container,false)
        return view
    }
}

fragment_registration_landing_page.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/to_fragment_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="登錄註冊頁面"
        android:textSize="30dp"
        android:textColor="#DC0404"
        android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

MainFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class MainFragment :Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_main,container,false)
        return view
    }
}

fragment_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/main_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="APP主頁面"
        android:textSize="30dp"
        android:textColor="@color/teal_200"
        android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

三.建立Navigation導航圖並關聯

1. 建立導航圖

在app/res目錄下新建一個文件夾取名navigation，在navigation文件夾下新建nav_graph.xml，如下圖所示

提醒大傢一下，我們開發過程中，大傢的這個文件夾的名字和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/fragment_welcome">
    <fragment
        android:id="@+id/fragment_welcome"
        android:name="com.example.siyi2.fragment.WelcomeFragment"
        android:label="WelcomeFragment" >
        <action
            android:id="@+id/action_fragment_welcome_to_fragment_noviceGuide"
            app:destination="@id/fragment_noviceGuide"
            />
    </fragment>
    <fragment
        android:id="@+id/fragment_noviceGuide"
        android:name="com.example.siyi2.fragment.NoviceGuidePageFragment"
        android:label="NoviceGuideFragment" >
        <action
            android:id="@+id/fragment_noviceGuide_to_fragment_registarationLandingpage"
            app:destination="@+id/fragment_registrationLandingPage" />
    </fragment>
    <fragment
        android:id="@+id/fragment_registrationLandingPage"
        android:name="com.example.siyi2.fragment.RegistrationLandingPageFragment"
        android:label="RegistrationLandingPageFragment" >
        <action
            android:id="@+id/fragment_registrationLandingPage_to_fragment_main"
            app:destination="@+id/fragment_main" />
    </fragment>
    <fragment
        android:id="@+id/fragment_main"
        android:name="com.example.siyi2.fragment.MainFragment"
        android:label="MainFragment" >
    </fragment>
</navigation>

navigation是根標簽，通過startDestinationlai配置默認啟動時的第一個頁面，小編這裡配置的第一個fragment_welcome，我們也可以在代碼中動態修改啟動時的第一個Fragment，也可以在可視化面板中去修改

fragment標簽就代表著這是一個Fragment

name指的是Fragment在項目中的路徑

action標簽定義瞭頁面跳轉的行為，也就是Navigation導航圖的每一條線

destination定義跳轉的Fragment目標，還可以加入跳轉時的動畫

Navigation首先要有起始頁面，叫startDestination，處於棧底，是啟動時的第一個頁面，也是返回可見的最後一個頁面。多個destination連接起來就構成瞭一個Navigation導航圖，類似於一種棧結構，頁面先進後出。destination之間的連接叫做action。

Navigation導航圖如下圖所示：

大傢可以看到，這樣的可視化頁面流程導航圖非常好看，對吧，這也是Google官方推薦大傢使用的，便於開發和維護

2. 為Navigation導航綁定在Activity上

我們的navigation導航圖也必須依賴於一個Activity上

MainActivity.kt：

package com.example.siyi2
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

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">
    <fragment
        android:id="@+id/nav_host_fragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3. 為Navigation導航頁面添加跳轉事件

WelcomeFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
    class WelcomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_welcome, container, false)
        view.findViewById<TextView>(R.id.to_fragment_novice_guide)
            .setOnClickListener {
                Navigation.findNavController(view)
                    .navigate(R.id.action_fragment_welcome_to_fragment_noviceGuide)
            }
        return view
    }
}

NoviceGuidePageFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class NoviceGuidePageFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_novice_guide_page, container, false)
        view.findViewById<TextView>(R.id.to_fragment_registration_landing_page)
            .setOnClickListener {
                Navigation.findNavController(view)
                    .navigate(R.id.fragment_noviceGuide_to_fragment_registarationLandingpage)
            }
        return view
    }
}

RegistrationLandingPageFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class RegistrationLandingPageFragment :Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_registration_landing_page,container,false)
        view.findViewById<TextView>(R.id.to_fragment_main)
            .setOnClickListener {
                Navigation.findNavController(view)
                    .navigate(R.id.fragment_registrationLandingPage_to_fragment_main)
            }
        return view
    }
}

MainFragment.kt：

package com.example.siyi2.fragment
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.navigation.Navigation
import com.example.siyi2.R
class MainFragment :Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_main,container,false)
        return view
    }
}

到此為止，我們就萬事俱備，隻欠東風瞭，直接運行，上效果圖

四.Navigation效果演示

Navigation開發

視頻鏈接

到此這篇關於Kotlin Navigation可視化開發詳解的文章就介紹到這瞭,更多相關Kotlin Navigation 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Kotlin Navigation可視化開發詳解

目錄

前言

Navigation的優勢

Navigation開發流程

一.註入依賴

二.創建Fragment和XML視圖

三.建立Navigation導航圖並關聯

1. 建立導航圖

2. 為Navigation導航綁定在Activity上

3. 為Navigation導航頁面添加跳轉事件

四.Navigation效果演示

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

前言

Navigation的優勢

Navigation開發流程

一.註入依賴

二.創建Fragment和XML視圖

三.建立Navigation導航圖並關聯

1. 建立導航圖

2. 為Navigation導航綁定在Activity上

3. 為Navigation導航頁面添加跳轉事件

四.Navigation效果演示

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆