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

משטח API
כדי להטמיע את רכיב בחירת השעה, משתמשים ב-TimePicker
או ב-TimeInput
composable:
-
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") } } }
בדוגמה הבאה:
-
Calendar.getInstance()
מאתחלת אתTimePickerState
עם השעה הנוכחית.- בדוגמה הזו נשתמש ב-
java.util.Calendar
. אפשר להפעיל בפרויקט את Java 8+ API desugaring כדי להשתמש ב-java.time.LocalTime
בכל גרסאות Android.
- בדוגמה הזו נשתמש ב-
- הקומפוזבילי
TimePicker
מציג את בורר השעה, ומקבל אתtimePickerState
כפרמטר. - ההטמעה כוללת שני לחצנים: אחד לאישור הבחירה ואחד לסגירת הכלי לבחירת תאריכים.
ההטמעה הזו נראית כך:

כלי לבחירת שעה
בקטע הקוד הזה מוצג איך מטמיעים כלי בסיסי לבחירת שעה עם סגנון קלט.
@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") } } }
נקודות חשובות שכדאי לשים לב אליהן בהטמעה הזו:
- המבנה זהה בעצם לבורר השעות של החוגה, וההבדל העיקרי הוא השימוש ב-
TimeInput
במקום ב-TimePicker
. - הפרמטר
is24Hour
שלtimePickerState
מוגדר באופן מפורש לערךtrue
. כברירת מחדל, הערך הזה הואfalse
.
ההטמעה הזו נראית כך:

שימוש במצב
כדי להשתמש בזמן שהמשתמש בחר בכלי לבחירת זמן, מעבירים את 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") } } }
אחר כך אפשר לקרוא לרכיב הניתן להרכבה כך:
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.")
}
פרטים נוספים זמינים בקטעי הקוד של האפליקציה.