Basit Jetpack Oluşturma Gezinti Örneği

Bu basit uygulamayı denemek için oluşturdum. navigasyon bileşeni Jetpack Compose’da. Uygulama böyle görünüyor.

Bunlar, bu basit uygulamayı uygulama adımlarıdır.

1. Gezinti Oluşturma Kitaplığı Ekle

İçinde appbuild.gradlebu bağımlılığı ekleyin.

dependencies {
    implementation "androidx.navigation:navigation-compose:2.5.0-alpha01"
}

2. NavHostController oluşturun

NavHostController bir sonraki adımda farklı ekranlara gitmek için kullanılan navigasyon grafiğini oluşturmak için gereklidir.

Bunu oluştur NavHostController kullanarak rememberNavController() kök birleştirilebilir işlevinizde ve bunu BuildNavGraph() birleştirilebilir işlev.

@Composable
private fun MainScreen() {
    SimpleNavComposeAppTheme {
        val navController = rememberNavController()
        BuildNavGraph(navController)
    }
}

3. Gezinme Grafiği Oluşturun

Navigasyon grafiği şöyle görünür:

• Giriş Ekranı -> Ana Ekran -> Profil Ekranı
• Giriş Ekranı -> Ana Ekran -> Arama Ekranı

Giriş ekranı başlangıç ​​hedefidir. Ana ekran gezinme argümanı almaz. Profil ekranı 2 navigasyon argümanı alır ve arama ekranı 1 navigasyon argümanı alır.

Navigasyon grafiğini oluşturmak için NavHost() birleştirilebilir fonksiyon ve NavGraphBuilder.composable() her bir şekillendirilebilir ekranı oluşturma işlevi.

fun BuildNavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "login"
    ) {
        composable(route = "login") {
            
        }

        composable(route = "home") {
            
        }
        ...
    }
}

Ana ekrana gitmek için:

navController.navigate("home")

Mevcut yığını geri açmak için:

navController.popBackStack()

Giriş ekranına çıkmak için:

navController.popBackStack(NavRoute.Login.path, inclusive = false)

Bağımsız Değişkenlerle Gezinme

navGraphBuilder.composable 2 parametresi vardır – route ve arguments. Argümanla gezinmek için her ikisini de güncellemek istiyoruz route ve arguments parametreler.

Bu, profil ekranı için rota formatıdır. id ilk parametredir. showDetails ikinci parametredir.

route = "profile/{id}/{showDetails}"

bu arguments parametre şöyle görünür:

arguments = listOf(
    navArgument("id") {
        type = NavType.IntType
    }
    ,
    navArgument("showDetails") {
        type = NavType.BoolType
    }
)

belirtebilirsiniz NavType parametrenin Ayrıca defaultValue argümanı isteğe bağlı yapmak için.

...
    navArgument("showDetails") {
        type = NavType.BoolType
        defaultValue = false
    }
...

Şahsen kullanmaktan kaçınacağım defautValue çünkü rotanızın belirli bir formatı izlemesini gerektirir (ör. "profile/{id}/?showDetails={showDetails}"). ?showDetails belirtmenize izin veren isteğe bağlı argümandır. defaultValue.

Argüman değerini almak için NavBackStackEntry.arguments:

composable(
   ...
) { navBackStackEntry ->

    val args = navBackStackEntry.arguments

    
    val id = args?.getInt("id")!!
    
    val showDetails = args?.getBoolean("showDetails")!!

    
    ...
}

Bu, profil ekranına gitmek için bir örnektir.

val id = 7
val showDetails = true
navController.navigate("profile/$id/$showDetails")

Herhangi Bir Rota Formatı İyidir!

Bunu kullanmak yerine (en basit form olduğu için tercih ederim):

route = "profile/{id}/{showDetails}"

Bunu kullanabilirsiniz (isterseniz gerekli showDetails isteğe bağlı olmak için):

route = "profile/{id}/?showDetails={showDetails}"

Veya bu (her ikisini de istiyorsanız gereklidir) id ve showDetails isteğe bağlı olmak için): :

route = "profile/?id={id}/?showDetails={showDetails}"

Ama lütfen bunu KULLANMAYIN:

route = "profile/{id}{showDetails}"

Lütfen navigasyon parametreleri arasına en azından bir ayırıcı (herhangi bir dize) koyduğunuzdan emin olun. Bu navigasyon parametreleri, özellikle aynı veri tipinde olduklarından yanlış ayrıştırılmış olabilir.

Rota biçimini değiştirirseniz, navigasyon çağrısını da güncellemeniz gerekir. Örneğin:

val id = 7 
val showDetails = true
navController.navigate("profile/$id/?showDetails=$showDetails")

Çok Fazla Kazan Kodu

Fark etmiş olabilirsiniz, sabit kodlanmış dizeler her yerdedir. Bir hata sadece uygulamayı çökertebilir. Hatalara eğilimlidir.

Yani yaptığım şey bunu yaratmak NavRoute orada tüm sabit kodlanmış dizelere sahip sınıf. Ayrıca bir yardımcı program işlevi de ekliyorum (ör. withArgs() navigasyon yolunu oluşturmak ve withArgsFormat() inşa etmek route biçim dizesi.

sealed class NavRoute(val path: String) {

    object Login: NavRoute("login")

    object Home: NavRoute("home")

    object Profile: NavRoute("profile") {
        val id = "id"
        val showDetails = "showDetails"
    }

    object Search: NavRoute("search") {
        val query = "query"
    }

    
    fun withArgs(vararg args: String): String {
        return buildString {
            append(path)
            args.forEach{ arg ->
                append("/$arg")
            }
        }
    }

    
    fun withArgsFormat(vararg args: String) : String {
        return buildString {
            append(path)
            args.forEach{ arg ->
                append("/{$arg}")
            }
        }
    }
}

Bazı kullanım örnekleri:

navController.navigate(NavRoute.Home.path)


navController.navigate(NavRoute.Search.withArgs(query))


route = NavRoute.Search.withArgsFormat(NavRoute.Search.query)

Son düşünceler

emin değilim benim NavRoute yaklaşımı yukarıdaki iyi olanıdır. Kodu okunamaz hale getirip getirmediğinden de emin değilim? Belki birazcık? Bununla birlikte, en azından birçok sabit kodlanmış diziden kurtulabilir ve artık ortak kod koduna gerek kalmaz.

Var Hedef Oluştur daha da fazla kazan plakası kodunu kaldıran kitaplık. Bu kütüphaneyi denemeden önce temel bilgileri anlamanın daha iyi olacağını düşünüyorum.

Bu uygulamayı bu kitaplığı kullanacak şekilde dönüştürme adımları şunlardır:

Kaynak kodu

GitHub Deposu: Demo_SimpleNavigationOluştur

Ayrıca bakınız