Kotlin?Navigation可視化開發(fā)詳解
前言
其實(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)文章
Android編程加密算法小結(jié)(AES、Base64、RAS加密算法)
這篇文章主要介紹了Android編程加密算法,結(jié)合實(shí)例分析了AES、Base64及RAS加密算法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Android利用ContentProvider讀取短信內(nèi)容
這篇文章主要為大家詳細(xì)介紹了Android利用ContentProvider讀取短信內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11Android 使用SharedPreferrences儲(chǔ)存密碼登錄界面記住密碼功能
Android存儲(chǔ)方式有很多種,在這里所用的存儲(chǔ)方式是SharedPreferrences, 其采用了Map數(shù)據(jù)結(jié)構(gòu)來存儲(chǔ)數(shù)據(jù),以鍵值的方式存儲(chǔ),可以簡(jiǎn)單的讀取與寫入,下面通過實(shí)例代碼給大家講解下,需要的朋友參考下吧2017-04-04Android實(shí)現(xiàn)EditText添加下劃線
這篇文章主要為大家詳細(xì)介紹了Android如何實(shí)現(xiàn)給EditText添加下劃線,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android ndk獲取手機(jī)內(nèi)部存儲(chǔ)卡的根目錄方法
今天小編就為大家分享一篇Android ndk獲取手機(jī)內(nèi)部存儲(chǔ)卡的根目錄方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08flutter 實(shí)現(xiàn)多布局列表的示例代碼
這篇文章主要介紹了flutter 實(shí)現(xiàn)多布局列表的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Android(2.2/2.3系統(tǒng))Gallery解決默認(rèn)和橫豎屏切換選中狀態(tài)問題
本文主要介紹Android Gallery,在Android開發(fā)過程中肯定會(huì)遇到版本不同,在開發(fā)過程中需要調(diào)整的,這里針對(duì)Android(2.2/2.3系統(tǒng)版本) Gallery解決默認(rèn)和橫豎屏切換選中狀態(tài)問題2016-07-07Android中的Shape和Selector的結(jié)合使用實(shí)例
這篇文章主要介紹了Android中的Shape和Selector的結(jié)合使用實(shí)例,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-06-06