Jetpack Compose’da Alt Gezinme Nasıl Eklenir?

Bu makale, bundan alt gezinmeyi eklemek için yapmanız gereken adımları gösterir. jetpack oluşturmada basit gezinme örnek.

1. Simge Vektör Varlığı Ekle

Bu örnekte, ic_home.xml ve ic_search.xml ekran gezinme sekmesi için vektör varlıkları.

Bu, adımları vurgular:

• Yeni -> vektör varlığı
• Tıkla Küçük Resim Simge varlığını seçmek için
• yeniden adlandır

Bu simgeleri ekledikten sonra aşağıdaki derleme hatasını alabilirsiniz.

AAPT: error: resource attr/colorControlNormal not found.

Bu, bağımlılığa bağlı olduğu için androidx.appcompat:appcompat Jetpack Compose uygulaması tarafından gerekli olmayan kitaplık.

Hatayı düzeltmek için bu kitaplığı dosyanıza ekleyin. appbuild.gradle dosya:

dependencies {
    ...
    
    implementation 'androidx.appcompat:appcompat:1.4.1'
    ...
}

2. BottomNavigation() Composable Ekle

androidx.compose.material.BottomNavigation() birleştirilebilir işlevi, alt çubuk gezinmesini uygulamak için kullanılır.

@Composable
fun BottomBarNavigation(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    if (currentRoute == null || currentRoute == NavRoute.Login.path) {
        return
    }

    BottomNavigation {
        
        ...
    }
}

navController.currentBackStackEntryAsState() navigasyon rotası değiştirildiğinde çalıştırılabilir işlevi yeniden tetikleyebilmek için kullanılır.

3. BottomNavigationItem() Birleştirilebilir Ekle

BottomNavigation() içinde, RowScope.BottomNavigationItem() her satır gezinme sekmesi için.

BottomNavigation {

    val homeSelected = currentRoute == NavRoute.Home.path
    BottomNavigationItem(
        icon = {
            Icon(
                painter = painterResource(R.drawable.ic_home),
                contentDescription = NavRoute.Home.path
            )
        },
        selected = homeSelected,
        onClick = {
            if(!homeSelected) {
                navController.navigate(NavRoute.Home.path) {
                    popUpTo(NavRoute.Home.path) { inclusive = true }
                }
            }
        },
        label = {Text(NavRoute.Home.path)}
    )

    ...
}

icon, selected ve onClick zorunlu parametrelerdir, geri kalanı isteğe bağlıdır.

4. Scaffold bottomBar’ı uygulayın

eklemek için BottomBarNavigation()sen onu Scaffold -> bottomBar parametre aşağıdaki gibidir:

val navController = rememberNavController()

Scaffold(
    bottomBar = { BottomBarNavigation(navController = navController) }
) {
    BuildNavGraph(navController)
}

Kaynak kodu

GitHub Deposu: Demo_SimpleNavigationCompose (bottom_nav dalı)