Android Academy · Ders

Alt Gezinme

Sekmeli bir alt gezinme çubuğu oluşturun.

Alt Gezinme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Alt Gezinme Çubukları

Birçok uygulama üst düzey bölümlerini alt gezinme çubuğuna yerleştirir. Compose bunun için NavigationBar ve NavigationBarItem sağlar.

NavigationBar

NavigationBar, genellikle bir Scaffold öğesinin bottomBar yuvasına yerleştirilen kapsayıcıdır. Birkaç NavigationBarItem barındırır.

NavigationBar {
    // items go here
}

NavigationBarItem

Her sekme; bir icon, isteğe bağlı bir label, bir selected bayrağı ve bir onClick içeren bir NavigationBarItem öğesidir.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Sekmeleri Modelleme

Sekmelerinizi veri olarak tanımlayın; böylece üzerlerinde döngü kurabilirsiniz. Rota, etiket ve simge içeren basit bir veri sınıfı işinizi görür.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Geçerli Rotayı İzleme

Etkin sekmeyi vurgulamak için geçerli rotaya ihtiyacınız vardır. Bu rotayı denetleyicinin geçerli geri yığını girdisinden okuyun.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Seçili Olarak İşaretleme

Doğru öğenin çubukta vurgulanması için her sekmenin rotasını currentRoute ile karşılaştırarak selected bayrağını ayarlayın.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Geri Yığını Birikmesini Önleme

Sekmelere tekrar tekrar dokunmak hedefleri üst üste biriktirmemelidir. Sekmeler arasında gezinirken başlangıç hedefi üzerinde popUpTo ile birlikte launchSingleTop kullanın.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState ve restoreState, bir sekmeden ayrılıp geri döndüğünüzde sekmenin kaydırma konumunu ve durumunu korur. Alt sekmeler için beklenen davranış budur.

Scaffold ile Tümleştirme

Her şeyi bir Scaffold içine sarın. Çubuğu bottomBar içine, NavHost öğesini ise içeriğe yerleştirin. İçeriğin çubuğun arkasında gizlenmemesi için sağlanan dolguyu kullanın.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Ögeler Üzerinde Döngü Kurma

Çubuğu sekme listeniz üzerinde yineleme yaparak oluşturun; bu, kodu kısa ve tutarlı tutar.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Hepsini Bir Araya Getirme

Etkin sekmeyi vurgulayan ve denetleyiciye bağlanmış eksiksiz alt çubuk.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Hızlı Kontrol

Hangi NavigationBarItem öğesini selected olarak işaretleyeceğinizi nasıl belirlersiniz?

Özet

Alt gezinme:

NavigationBar, NavigationBarItem öğelerini barındırır.
currentBackStackEntryAsState() aracılığıyla etkin sekmeyi izleyin ve selected değerini ayarlayın.
Sekmeler arasında düzenli geçiş için popUpTo + launchSingleTop + saveState/restoreState kullanın.
Bu yapıyı bir Scaffold bottomBar içine yerleştirin.

Sıkça Sorulan Sorular

“Alt Gezinme” dersi ücretsiz mi?

Evet — “Alt Gezinme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Alt Gezinme” dersinde ne öğreneceğim?

Sekmeli bir alt gezinme çubuğu oluşturun. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Alt Gezinme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön