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

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

הערה: הפלטפורמות TimePicker ו-TimeInput הן ניסיוניות. דווחו על בעיות מעקב אחר בעיות.

סוגים

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

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

בתמונה הבאה מוצגת דוגמה לחלונית לבחירת זמן חיוג בצד ימין. חלונית לבחירת זמן לקלט משמאל:

איור 1. חוגה ובורר של זמני הקלט.

פלטפורמת API

כדי להטמיע בורר זמן, צריך להשתמש בעמודות TimePicker או TimeInput קומפוזבילי:

• 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 עם הנוכחי בזמן האימון.
  • בדוגמה הזו נעשה שימוש ב-java.util.Calendar. הפעלת Java 8+ הסרת סוכר מ-API בפרויקט כדי להשתמש במקום זאת java.time.LocalTime בכל הגרסאות של Android.
• התוכן הקומפוזבילי 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. ההורה לאחר מכן, קומפוזביליות יכולה לגשת לזמן שנבחר דרך 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.")
}

לפרטים נוספים אפשר לעיין בהטמעה המלאה בקטעי הקוד app.

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

• TimePicker
• עיצוב חומר – בוררי זמן