亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Kotlin?Navigation可視化開發(fā)詳解

 更新時(shí)間:2023年02月07日 09:14:23   作者:小尹編碼中...  
Navigation?是?JetPack?中的一個(gè)組件,用于方便的實(shí)現(xiàn)頁面的導(dǎo)航,所以抽象出了一個(gè)?destination?的概念,大部分情況一個(gè)?destination?就表示一個(gè)?Fragment,但是它同樣可以指代?Activity、其它的導(dǎo)航圖

前言

其實(shí)小編之前一直都是用的Java來開發(fā)Android,但是工作需求,開始了Kotlin的編程,接觸到了JetPack,發(fā)現(xiàn)其中的Navigation特別有意思,今天來給大家分享一下,我們做一個(gè)四個(gè)頁面吧,從APP的 歡迎頁面——>新手引導(dǎo)頁面——>注冊(cè)登錄頁面——>APP主頁面,我來帶大家入門,希望大家不要嫌棄

Navigation的優(yōu)勢(shì)

站在Fragment角度:不用把Fragment添加到集合里面去操作了,也不用去操作SupportFragmentManager了

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

站在開發(fā)者角度:Navigation的可視化導(dǎo)航圖非常優(yōu)美,導(dǎo)航路徑清晰可見,讓開發(fā)人員更方便的開發(fā)

Navigation開發(fā)流程

一.注入依賴

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

二.創(chuàng)建Fragment和XML視圖

在app/java/com.example.項(xiàng)目名目錄下先創(chuàng)建一個(gè)Fragment文件夾,在文件夾中創(chuàng)建4個(gè)Fragment,分別為 WelcomeFragment(歡迎頁面),NoviceGuidePageFragment(新手引導(dǎo)頁面),RegistrationLandingPageFragment(注冊(cè)登錄頁面),MainFragment(APP主頁面),具體如下圖所示:

在app/res/layout文件夾下創(chuàng)建4個(gè)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="新手引導(dǎo)頁面"
        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="登錄注冊(cè)頁面"
        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導(dǎo)航圖并關(guān)聯(lián)

1. 建立導(dǎo)航圖

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

提醒大家一下,我們開發(fā)過程中,大家的這個(gè)文件夾的名字和XML的名字大家盡量去一些見名知義的名字,方便開發(fā)人員和后續(xù)維護(hù)

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是根標(biāo)簽,通過startDestinationlai配置默認(rèn)啟動(dòng)時(shí)的第一個(gè)頁面,小編這里配置的第一個(gè)fragment_welcome,我們也可以在代碼中動(dòng)態(tài)修改啟動(dòng)時(shí)的第一個(gè)Fragment,也可以在可視化面板中去修改

fragment標(biāo)簽就代表著這是一個(gè)Fragment

name指的是Fragment在項(xiàng)目中的路徑

action標(biāo)簽定義了頁面跳轉(zhuǎn)的行為,也就是Navigation導(dǎo)航圖的每一條線

destination定義跳轉(zhuǎn)的Fragment目標(biāo),還可以加入跳轉(zhuǎn)時(shí)的動(dòng)畫

Navigation首先要有起始頁面,叫startDestination,處于棧底,是啟動(dòng)時(shí)的第一個(gè)頁面,也是返回可見的最后一個(gè)頁面。多個(gè)destination連接起來就構(gòu)成了一個(gè)Navigation導(dǎo)航圖,類似于一種棧結(jié)構(gòu),頁面先進(jìn)后出。destination之間的連接叫做action。

Navigation導(dǎo)航圖如下圖所示:

大家可以看到,這樣的可視化頁面流程導(dǎo)航圖非常好看,對(duì)吧,這也是Google官方推薦大家使用的,便于開發(fā)和維護(hù)

2. 為Navigation導(dǎo)航綁定在Activity上

我們的navigation導(dǎo)航圖也必須依賴于一個(gè)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導(dǎo)航頁面添加跳轉(zhuǎn)事件

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
    }
}

到此為止,我們就萬事俱備,只欠東風(fēng)了,直接運(yùn)行,上效果圖

四.Navigation效果演示

Navigation開發(fā)

視頻鏈接

到此這篇關(guān)于Kotlin Navigation可視化開發(fā)詳解的文章就介紹到這了,更多相關(guān)Kotlin Navigation 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論