Gezinme çekmecesi

Gezinme çekmecesi bileşeni, kullanıcıların uygulamanızın çeşitli bölümlerine gitmesine olanak tanıyan bir kaydırma menüsüdür. Kullanıcılar, yandan kaydırarak veya bir menü simgesine dokunarak bu bileşeni etkinleştirebilir.

Gezinme çekmecesini uygulamak için şu üç 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ına olanak tanıyın.
  • Hesap yönetimi: Kullanıcı hesabı olan uygulamalarda hesap ayarları 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.

Materyal Tasarım'da iki tür gezinme çekmecesi vardır:

  • Standart: Ekrandaki alanı diğer içeriklerle paylaşın.
  • Kalıcı: Ekrandaki diğer içeriklerin üzerinde görünür.
Açık ve koyu modda Materyal Tasarım 3 gezinme çekmecesi örneği.
Şekil 1. Gezinme çekmecesi örneği.

Örnek

Gezinme çekmecesi uygulamak için ModalNavigationDrawer composable'ını kullanabilirsiniz.

Aşağıdaki örnekte gösterildiği gibi, drawerContent alanını kullanarak bir ModalDrawerSheet ve ç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
}

ModalNavigationDrawer, bir dizi ek çekmece parametresini kabul eder. Örneğin, aşağıdaki örnekte olduğu gibi gesturesEnabled parametresiyle çekmecenin sürüklemelere yanıt verip vermeyeceğini açıp kapatabilirsiniz:

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

Kontrol davranışı

Çekmecenin nasıl açılıp kapanacağını kontrol etmek için DrawerState kullanın. drawerState parametresini kullanarak ModalNavigationDrawer composable'ına DrawerState iletmeniz gerekir.

DrawerState, open ve close işlevlerinin yanı sıra mevcut çekmece durumuyla ilgili özelliklere erişim sağlar. Bu askıya alma işlevleri, rememberCoroutineScope kullanarak örneklendirebileceğiniz bir CoroutineScope gerektirir. 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
    }
}

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

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, çekmece içindeki bölümleri ayırır.
  • ModalNavigationDrawer, çekmeceyi oluşturur.
  • drawerContent, çekmecenin içeriğini tanımlar.
  • ModalDrawerSheet içinde, bir 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çıldığında nasıl göründüğü, bölümler ve öğeler gösterilmektedir:

Her birinde birden fazla etiketli öğe ve simge bulunan iki bölümlü ayrıntılı bir gezinme çekmecesi.
Şekil 2. İki iç içe yerleştirilmiş grup içeren bir gezinme çekmecesi açılır.

Ek kaynaklar