חלונית הזזה לניווט

הרכיב תפריט הניווט הוא תפריט שנפתח בהחלקה ומאפשר למשתמשים לנווט לקטעים שונים באפליקציה. המשתמשים יכולים להפעיל אותו על ידי החלקה מהצד או הקשה על סמל התפריט.

הדלת נפתחה על ידי האיש.

כדאי להביא בחשבון את שלושת התרחישים הבאים להטמעת חלונית ניווט:

• ארגון תוכן: מאפשרים למשתמשים לעבור בין קטגוריות שונות, למשל באפליקציות חדשות או בבלוגים.
• ניהול חשבון: הצגת קישורים מהירים להגדרות החשבון ולקטעי הפרופיל באפליקציות עם חשבונות משתמשים.
• גילוי תכונות: ארגון של כמה תכונות והגדרות בתפריט אחד כדי להקל על המשתמשים לגלות את התכונות ולגשת אליהן באפליקציות מורכבות.

ב-Material Design יש שני סוגים של תיבות ניווט:

• רגיל: שיתוף שטח במסך עם תוכן אחר.
• מודל: מופיע מעל תוכן אחר במסך.

איור 1. דוגמה למגירה ניווט.

דוגמה

אפשר להשתמש ברכיב ה-composable ModalNavigationDrawer כדי להטמיע תפריט ניווט.

משתמשים בחריץ drawerContent כדי לספק ModalDrawerSheet ולספק את התוכן של התיבה, כמו בדוגמה הבאה:

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 מקבל מספר פרמטרים נוספים של תיבות נפתחות. לדוגמה, אפשר להחליף את המצב של התגובה של התיבה הנשלפת לגרירה באמצעות הפרמטר gesturesEnabled, כמו בדוגמה הבאה:

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

שליטה בהתנהגות

כדי לשלוט באופן שבו המגירה נפתחת ונסגרת, משתמשים במקש DrawerState. צריך להעביר DrawerState אל ModalNavigationDrawer באמצעות הפרמטר drawerState.

DrawerState מספק גישה לפונקציות open ו-close, וגם לנכסים שקשורים למצב הנוכחי של התיבה הנשלפת. כדי להשתמש בפונקציות ההשהיה האלה, צריך CoroutineScope. אפשר ליצור מופע של CoroutineScope באמצעות rememberCoroutineScope. אפשר גם להפעיל את הפונקציות להשהיה בתגובה לאירועים בממשק המשתמש.

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

יצירת קבוצות בתוך תפריט הניווט

קטע הקוד הבא מראה איך יוצרים תפריט ניווט מפורט עם קטעים ומחיצות:

@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

נקודות עיקריות לגבי הקוד

• הפונקציה מאכלסת את drawerContent ב-Column שמכיל קטעים, מחיצות ופריטי ניווט.
• ModalDrawerSheet מספק סגנון של Material Design למגירה.
• HorizontalDivider מפריד בין קטעים בתוך המגירה.
• ModalNavigationDrawer יוצר את המגירה.
• drawerContent מגדיר את התוכן של התיבה הנשלפת.
• בתוך ה-ModalDrawerSheet, הרכיב Column מסדר את רכיבי התיבה האנכית.
• רכיבי NavigationDrawerItem מייצגים פריטים נפרדים במגירה.
• ה-Scaffold מספק את המבנה הבסיסי של המסך, כולל TopAppBar.
• ה-navigationIcon ב-TopAppBar קובע את מצב הפתיחה והסגירה של התיבה.

התוצאה

בתמונה הבאה אפשר לראות איך המגירה נראית כשהיא פתוחה, עם הקטעים והפריטים שמוצגים בה:

איור 2. חלונית ניווט פתוחה עם שתי קבוצות בתצוגת עץ.

מקורות מידע נוספים

• עיצוב חדשני תלת-ממדי: חלונית ההזזה לניווט