Jetpack Compose ile Android, parçalı işlemler, gezintiler ve etkinlikler için amaçlarla hareket etmenin üstü kapalı yollarını terk ediyor. Günümüzde, uygulama, kullanıcıların başlangıçta izleyebileceği tüm olası yolları bildirmelidir.

Jetpack oluşturma, birden çok bileşeniniz arasında gezinmek için yerel bir yol sağlar. NavHost ve NavController ile , birleştirilebilir öğelerinizi ihtiyacınıza göre itebilir veya açabilirsiniz. Öyleyse başlayalım.

Bağımlılıklar

Öncelikle, projenize bir bağımlılık eklemeniz gerekecek. Geçerli sürümü almak için buraya gidin .

implementation "androidx.navigation:navigation-compose:2.5.3"

uygulama

Öncelikle NavHost ve NavController projeye tanıtılır .

NavHost, kullanıcıların izleyebileceği yolların bildirimini barındırır. NavController, bildirilen rotalarda gezinmek için API sağlar. Rota , uygulamada gösterilebilen her ekran/diğer şekillendirilebilir için benzersiz olan yoldur.

somutlaştırma

NavController, RememberNavController() ile başlatılır , dolayısıyla birleştirilebilirlerin yeniden oluşturulmasında bile NavController aynıdır.

Başlangıç ​​hedefi

NavController ile NavHost ve başlangıç ​​hedefi bildirilir. Başlangıç ​​yeri, ilk ekran rotamızın adıdır.

Güzergah beyanı

Bir kullanıcının hareket edebileceği tüm seçenekler bildirilir. Her iki ekranın da rotaları bildirmesi gerekir. Rota adı benzersizdir, çünkü NavController bunları bir sonraki gösterilecek düzenlenebiliri belirlemek için kullanacaktır.

Herhangi bir şekillendirilebilir, navcontroller.navigate(“oluşturulabilir rota”) aracılığıyla gösterilebilir .

Kullanıcının geri düğmesini taklit etmek için navcontroller.popBackStack() kullanılabilir. Bu, tüm birleştirilebilirler yığınından geçerli birleştirilebilir olanı çıkaracaktır.

Yığın , birleştirilebilirlerin/ekranların geçmişi olarak görüntülenebilir, bu nedenle ilk ekran köktür ve diğer birleştirilebilirler bunun üstüne konur. Böylece ikinci ekrana gidilerek, yığının üstüne ikinci ekran eklenir. Yığını dışarı çıkararak, üstteki şekillendirilebilir kaldırılır.

Temizlemek

Gelecekte daha fazla hataya açık olmak için, [aths daha temiz bir şekilde bildirilmelidir. Bu nedenle, her yere dize eklemekten kaçının ve uygulamanız için tüm yolları koyduğunuz bağımsız dosyayı oluşturun. Daha sonra, bildirilen sabitler kullanılmalıdır. Utanç verici yazım hatalarından gelecekte kaçınılacaktır. Ayrıca, uygulamanın nasıl yapılandırıldığına dair daha açıklayıcı bir görünüm sağlar.

Birden fazla ekrandan geçmek ve köke geri dönmek

Artık navigasyonumuza sonraki ekranları eklemek çok kolay. NavHost'un bir şekillendirilebilir dosyayla daha genişletilmesi ve ekranların hareket etmesi için daha fazla düğme kullanması gerekir.

Üçüncü ekran, kullanıcıyı ilk ekrana geri götüren ve yığılmış tüm bileşenleri temizleyen bir düğme içerir.

Yığındaki birden fazla şekillendirilebilir öğeyi açmak için navController.popBackStack(“Patlamayı durdurmak istediğiniz ekran”, dahil: false) kullanılabilir.

Inclusive parametresi , hedeflenen birleştirilebilir öğenin de kaldırılması gerekip gerekmediğini bize söyler. İlk ekranın kaldırılması boş bir ekrana neden olur, bu nedenle yanlış değer iletilir.

Değeri ekrana geçirmek

Çoğu uygulama, kullanıcının önceki seçimine bağlı olarak bilgi veya veri göstermek ister. Başka bir ekranın ne göstereceğini bilmesi gerekir, bu nedenle değerin iletilmesi gerekir.

Bu, değeri rotanın içine koyarak yapılır, böylece değer bir dizge olarak kodlanır ve ardından başka bir ekranda ayrıştırılır.

beyanname

İlk olarak, rotanın şu şekilde yapılan değerin varlığını bildirmesi gerekir:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

İlk ekran şimdi içeriği ikinci ekrana aktarılan bir metin alanı içerir.

Navigasyondaki görünümlere karmaşık verileri iletmeyin

Görünüme yalnızca bir değer iletilmelidir. Diğer veriler ViewModel veya başka bir mantık birimi yardımıyla elde edilmelidir. Kodunuzu çok daha temiz ve test edilebilir hale getirecektir.

Örneğin, bir ürün veya kullanıcıyla ilgili ayrıntıları göstermek istiyorsanız, yalnızca görünüme bir kimlik geçirilmelidir. Mantık birimi, kimliği alır ve internetten veya bir veri tabanından daha ayrıntılı bilgiler çıkarır. Veriler daha sonra navigasyon bileşenlerinin yardımı olmadan doğrudan görünüme aktarılır.

Kaynaklar:

Android geliştirmeden daha fazlası: