Jetpack Compose’da Alt Gezinme Nasıl Eklenir?

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

How_to_Add_Bottom_Navigation _in_Jetpack_Compose_01.gif

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ı)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.