תיבות דו-שיח לבוררי שעות

בוררי זמן מופיעים לעיתים קרובות בתיבות דו-שיח. אפשר להשתמש בהטמעה כללית יחסית ומינימלית של תיבת דו-שיח, או להטמיע תיבת דו-שיח בהתאמה אישית עם גמישות רבה יותר.

מידע נוסף על תיבת דו-שיח באופן כללי, כולל הסבר על השימוש במצב של בורר הזמן, זמין במדריך לבוררי זמן.

דוגמה בסיסית

הדרך הפשוטה ביותר ליצור תיבת דו-שיח לבורר הזמן היא ליצור רכיב מורכב שמטמיע את AlertDialog. קטע הקוד הבא הוא דוגמה לתיבת דו-שיח מינימלית יחסית באמצעות הגישה הזו:

@Composable
fun DialWithDialogExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

שימו לב לנקודות העיקריות בקטע הקוד הזה:

1. הרכיב הניתן לקיפול DialWithDialogExample עוטף את TimePicker בתיבת דו-שיח.
2. TimePickerDialog הוא רכיב מותאם אישית שמייצר AlertDialog עם הפרמטרים הבאים:
   • onDismiss: פונקציה שנקראת כשהמשתמש סוגר את תיבת הדו-שיח (דרך לחצן הסגירה או ניווט חזרה).
   • onConfirm: פונקציה שנקראת כשהמשתמש לוחץ על הלחצן 'אישור'.
   • content: רכיב מורכב שמוצג בו בורר השעה בתוך תיבת הדו-שיח.
3. ‫AlertDialog כולל את השדות האלה:
   • לחצן סגירה עם הכיתוב 'סגירה'.
   • לחצן אישור עם הכיתוב 'אישור'.
   • התוכן של בורר הזמן שהוענק כפרמטר text.
4. הפונקציה DialWithDialogExample מאתחלת את TimePickerState עם השעה הנוכחית ומעבירה אותה גם לפונקציה TimePicker וגם לפונקציה onConfirm.

דוגמה מתקדמת

קטע הקוד הזה מדגים הטמעה מתקדמת של תיבת דו-שיח לבחירת זמן בהתאמה אישית ב-Jetpack Compose.

@Composable
fun AdvancedTimePickerExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {

    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

שימו לב לנקודות העיקריות בקטע הקוד הזה:

1. הרכיב הניתן לקישור AdvancedTimePickerExample יוצר תיבת דו-שיח לבחירת זמן שניתנת להתאמה אישית.
2. הוא משתמש ב-Dialog שאפשר לשנות, כך שהוא גמיש יותר מ-AlertDialog.
3. תיבת הדו-שיח כוללת כותרת שניתן להתאים אישית ולחצן החלפת מצב כדי לעבור בין מצב חיוג למצב קלט.
4. Surface מחילה צורה וגובה על תיבת הדו-שיח, עם IntrinsicSize.Min גם לרוחב וגם לגובה.
5. הפריסה של Column ו-Row מספקת את רכיבי המבנה של תיבת הדו-שיח.
6. בדוגמה הזו מתבצע מעקב אחר מצב הבורר באמצעות showDial.
   • הלחצן IconButton מאפשר לעבור בין המצבים, והסמל מתעדכן בהתאם.
   • תוכן תיבת הדו-שיח עובר בין TimePicker ל-TimeInput בהתאם למצב showDial.

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

ההטמעה הזו נראית כך:

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

• מדריך לבוררי זמן
• Material Design – בוררי זמן