Android Jetpack Navigation: Kiến Thức Cần Biết
Mỗi ứng dụng Android sẽ chứa rất nhiều màn hình. Việc Navigate giữa các màn hình cần được quản lý chặt chẽ, đồng thời phải dễ dàng cho lập trình viên. Jetpack Navigation được tạo ra với mục đích này. Một số tính năng của Jetpack Navigation sẽ giúp bạn phát triển ứng dụng nhanh hơn.
Kiến thức cần nắm trước khi học đến phần này: Android Activity Lifecycle, Android View System
- Define trước các
Fragmentvà sự liên kết giữa chúng thông quaNavigation Id - Tùy biến
Navigationđến mộtFragmentcụ thể nhờ tính năngDeep-link - Hỗ trợ quản lý
Fragment Back Stack(support multiple backstack) trong Activity (cực kỳ hữu ích)
Bài viết này sẽ hướng dẫn bạn tích hợp Jetpack Navigation Component vào dự án và sử dụng một cách dễ dàng!
GitHub Repository: https://github.com/dantech0xff/SpotifyKt
Thêm Nav Graph vào trong Activity
// Jetpack Nav
// Thêm dependencies vào build.gradle module app
implementation("androidx.navigation:navigation-fragment-ktx:2.7.7")
implementation("androidx.navigation:navigation-ui-ktx:2.7.7")// Thêm NavHostFragment vào Activity của bạn
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/mobile_navigation" />// Tạo các Fragment và setup chúng trong file mobile_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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mobile_navigation"
app:startDestination="@id/navigation_home">
<fragment
android:id="@+id/navigation_home"
android:name="com.creative.spotifykt.ui.home.HomeFragment"
android:label="@string/title_home"
tools:layout="@layout/fragment_home">
</fragment>
</navigation>Với mỗi Fragment tạo thêm bạn cần tạo thêm 1 fragment bên trong mobile_navigation
Để tạo liên kết navigation giữa 2 fragment bạn có thể thực hiện kéo thả bên trong Visualize Panel, code sẽ được tạo ra như bên dưới.
Ngoài ra bạn cũng có thể navigate đến một Fragment thông qua việc định nghĩa 1 deep-link cho nó.
<fragment
android:id="@+id/navigation_search"
android:name="com.creative.spotifykt.ui.search.SearchFragment"
android:label="@string/title_search"
tools:layout="@layout/search_fragment">
<action
android:id="@+id/action_navigation_search_to_searchResultFragment"
app:enterAnim="@anim/fade_in_anim"
app:exitAnim="@anim/fade_out_anim"
app:popExitAnim="@anim/fade_out_anim"
app:popEnterAnim="@anim/fade_in_anim"
app:destination="@id/searchResultFragment"/>
</fragment>
<fragment
android:id="@+id/searchResultFragment"
android:name="com.creative.spotifykt.ui.search.result.SearchResultFragment"
android:label="search_result_fragment"
tools:layout="@layout/search_result_fragment">
// khai bao deeplink phuc vu cho deeplink navigation
<deepLink app:uri="spotifykt://app/search-result" />
</fragment>// Để thực hiện navigation theo một Nav Id bạn có thể gọi trong dự án như sau
findNavController()
.navigate(R.id.action_navigation_search_to_searchResultFragment)// Để thực hiện navigation theo một Nav Deep-link bạn có thể gọi trong dự án như sau
fun NavController.handleDeeplinkInternal(deeplink: String?): Boolean {
return graph.hasDeepLink(android.net.Uri.parse(deeplink)).let { hasDeepLink ->
if (hasDeepLink) {
navigate(
android.net.Uri.parse(deeplink), NavOptions.Builder()
.setEnterAnim(R.anim.fade_in_anim)
.setExitAnim(R.anim.fade_out_anim)
.setPopEnterAnim(R.anim.fade_in_anim)
.setPopExitAnim(R.anim.fade_out_anim)
.build()
)
}
hasDeepLink
}
}Về cơ bản Jetpack Navigation chỉ có thế. Để ứng dụng hiệu quả các công năng của Jetpack Navigation bạn hãy tham khảo qua source code tại đây.
