כלי לבחירת שעה

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

סוגים

יש שני סוגים של בורר שעות:

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

בתמונה הבאה מוצגת דוגמה לבורר זמן לבחירת שעה בצד ימין, ולבורר זמן להזנת נתונים בצד ימין:

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

פלטפורמת API

כדי להטמיע בורר זמן, משתמשים ב-composable‏ TimePicker או ב-TimeInput:

  • TimePicker: הטמעת בורר של שעת שיחה.
  • TimeInput: הטמעת בורר זמן לקלט.

מדינה

גם ב-TimePicker וגם ב-TimeInput, צריך להעביר גם TimePickerState. כך תוכלו להגדיר את זמן ברירת המחדל שיופיע בבורר. הוא גם מתעד את השעה שהמשתמש בחר באמצעות הבורר.

תיבת דו-שיח

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

בורר השעה לחיוג

קטע הקוד הזה מדגים איך מטמיעים בורר בסיסי לשעת שיחה.

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

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

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

קטע הקוד הבא ממחיש את הנושא:

  • Calendar.getInstance() מאתחלת את TimePickerState עם השעה הנוכחית.
  • התוכן הקומפוזבילי TimePicker מציג את בורר הזמן, תוך שימוש ב-timePickerState כפרמטר.
  • ההטמעה כוללת שני לחצנים: אחד לאישור הבחירה והשני לסגירת הבורר.

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

בורר שעה מסוג ספינר. המשתמש יכול לבחור שעה באמצעות החוגה.
איור 2. בורר שעה מסוג ספינר.

קלט של בורר השעה

קטע הקוד הזה מדגים איך מטמיעים בורר זמן בסגנון קלט בסיסי.

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

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

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

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

  • המבנה זהה למבנה של בורר שעת השיחה, וההבדל העיקרי הוא השימוש ב-TimeInput במקום ב-TimePicker.
  • הפרמטר is24Hour של timePickerState מוגדר באופן מפורש לערך true. כברירת מחדל, הערך הזה הוא false.

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

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

שימוש במצב

כדי לנצל את הזמן שהמשתמש בחר בחלונית לבחירת זמן, מעבירים את הערך המתאים של TimePickerState לפונקציה onConfirm. לאחר מכן, ל-composable ההורה תהיה גישה לשעה שנבחרה דרך TimePickerState.hour ו-TimePickerState.minute.

קטע הקוד הבא מראה איך עושים את זה:

@Composable
fun DialUseStateExample(
    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,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

עכשיו אפשר לקרוא לתוכן הקומפוזבילי כך:

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

פרטים נוספים זמינים במאמר הטמעה מלאה באפליקציית ה-snippets.

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