Gezinme çekmecesi

Gezinme çekmecesi bileşeni, kullanıcıların uygulamanızın çeşitli bölümlerinde gezinmesine olanak tanıyan kaydırmalı bir menüdür. Kullanıcılar, ekranı yana kaydırarak veya bir menü simgesine dokunarak bu menüyü etkinleştirebilir.

Gezinme çekmecesi uygulamak için aşağıdaki üç kullanım alanını göz önünde bulundurun:

  • İçerik düzenleme: Kullanıcıların haber veya blog uygulamaları gibi farklı kategoriler arasında geçiş yapmasını sağlayın.
  • Hesap yönetimi: Kullanıcı hesaplarının bulunduğu uygulamalarda hesap ayarlarına ve profil bölümlerine hızlı bağlantılar sağlayın.
  • Özellik keşfi: Karmaşık uygulamalarda kullanıcıların keşfini ve erişimini kolaylaştırmak için birden fazla özelliği ve ayarı tek bir menüde düzenleyin.

Material Design'da iki tür gezinme çekmecesi vardır:

  • Standart: Ekrandaki alanı diğer içeriklerle paylaşın.
  • Modal: Bir ekrandaki diğer içeriklerin üzerinde görünür.
Şekil 1. Gezinme çekmecesi örneği.

Örnek

Gezinme çekmecesi uygulamak için ModalNavigationDrawer bileşenini kullanabilirsiniz.

drawerContent yuvasını kullanarak bir ModalDrawerSheet sağlayın ve aşağıdaki örnekte gösterildiği gibi çekmecenin içeriğini sağlayın:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer, bir dizi ek çekmece parametresini kabul eder. Örneğin, çekmecenin sürüklemelere yanıt verip vermeyeceğini aşağıdaki örnekte gösterildiği gibi gesturesEnabled parametresiyle değiştirebilirsiniz:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Davranışı kontrol etme

Çekmecenin nasıl açılacağını ve kapanacağını kontrol etmek için DrawerState simgesini kullanın. drawerState parametresini kullanarak DrawerState değerini ModalNavigationDrawer değerine iletmeniz gerekir.

DrawerState, open ve close işlevlerinin yanı sıra geçerli çekmece durumuyla ilgili mülklere erişim sağlar. Askıya alma işlevleri için rememberCoroutineScope kullanarak örneklendirebileceğiniz bir CoroutineScope gerekir. Askıya alma işlevlerini kullanıcı arayüzü etkinliklerine yanıt olarak da çağırabilirsiniz.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt

Gezinme çekmecesinde grup oluşturma

Aşağıdaki snippet'te, bölümler ve ayırıcılar içeren ayrıntılı bir gezinme çekmecesinin nasıl oluşturulacağı gösterilmektedir:

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

Kodla ilgili önemli noktalar

  • drawerContent öğesini bölümler, ayırıcılar ve gezinme öğeleri içeren bir Column ile doldurur.
  • ModalDrawerSheet, çekmece için Materyal Tasarım stilini sağlar.
  • HorizontalDivider, çekmecedeki bölümleri ayırır.
  • ModalNavigationDrawer, çekmeceyi oluşturur.
  • drawerContent, çekmecenin içeriğini tanımlar.
  • ModalDrawerSheet içinde, Column çekmece öğelerini dikey olarak düzenler.
  • NavigationDrawerItem bileşenleri, çekmecedeki bağımsız öğeleri temsil eder.
  • Scaffold, TopAppBar dahil olmak üzere ekranın temel yapısını sağlar.
  • TopAppBar içindeki navigationIcon, çekmecenin açık ve kapalı durumunu kontrol eder.

Sonuç

Aşağıdaki resimde, çekmecenin açılmış hâli gösterilmektedir. Bölümler ve öğeler de gösterilmiştir:

Her biri birden fazla etiketli öğe ve simge içeren iki bölümden oluşan ayrıntılı bir gezinme çekmecesi.
Şekil 2. İç içe yerleştirilmiş iki grup içeren bir gezinme çekmecesi.

Ek kaynaklar