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