הוספת בוררים לאפליקציה

כדאי לנסות את התכונה 'כתיבה מהירה'
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך מוסיפים רכיבים ב-Compose
בוררי תאריכים →

ב-Android יש פקדים שמאפשרים למשתמש לבחור תאריך או שעה בתיבות דו-שיח מוכנות לשימוש. הבוררים האלה מספקים אמצעי בקרה לבחירה של כל חלק משעה (שעה, דקה, AM/PM) או תאריך (חודש, יום, שנה).

דוגמה לבורר זמן מ-material.io
איור 1. בחירת שעות בחלונית לבחירת יומן בנייד.

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

דוגמה לבורר תאריכים בחלון דו-שיח מ-material.io
איור 2. חלונית מודאלית לבחירת תאריך.

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

יצירת בורר זמן

כדי להציג TimePickerDialog באמצעות DialogFragment, מגדירים סוג של קטע קוד שמרחיב את DialogFragment ומחזירים TimePickerDialog מהשיטה onCreateDialog() של קטע הקוד.

הרחבת DialogFragment לבורר זמן

כדי להגדיר DialogFragment ל-TimePickerDialog:

  • מגדירים את ה-method onCreateDialog() כדי להחזיר מופע של TimePickerDialog.
  • מטמיעים את הממשק TimePickerDialog.OnTimeSetListener כדי לקבל קריאה חוזרת כשהמשתמש מגדיר את השעה.

הנה דוגמה:

Kotlin

class TimePickerFragment : DialogFragment(), TimePickerDialog.OnTimeSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current time as the default values for the picker.
        val c = Calendar.getInstance()
        val hour = c.get(Calendar.HOUR_OF_DAY)
        val minute = c.get(Calendar.MINUTE)

        // Create a new instance of TimePickerDialog and return it.
        return TimePickerDialog(activity, this, hour, minute, DateFormat.is24HourFormat(activity))
    }

    override fun onTimeSet(view: TimePicker, hourOfDay: Int, minute: Int) {
        // Do something with the time the user picks.
    }
}

Java

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker.
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it.
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time the user picks.
    }
}

מידע על הארגומנטים של ה-constructor מופיע בכיתה TimePickerDialog.

עכשיו צריך רק אירוע שמוסיף מופע של הקטע הזה לפעילות.

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

אחרי שמגדירים DialogFragment כמו בדוגמה הקודמת, אפשר להציג את בורר השעות על ידי יצירת מופע של DialogFragment וקריאה לשיטה show().

לדוגמה, הנה לחצן שמפעיל שיטה להצגת תיבת הדו-שיח כשמקישים עליו:

<Button
    android:id="@+id/pickTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick time" />

כשהמשתמש מקיש על הלחצן, המערכת מפעילה את השיטה הבאה:

Kotlin

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker")
}

Java

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker");
}

השיטה הזו קוראת ל-show() במופע חדש של DialogFragment שהוגדר בדוגמה הקודמת. ה-method show() דורש מופע של FragmentManager ושם תג ייחודי למקטע.

יצירת חלונית לבחירת תאריך

יצירת DatePickerDialog דומה ליצירת TimePickerDialog. ההבדל הוא בתיבת הדו-שיח שיוצרים לקטע.

כדי להציג DatePickerDialog באמצעות DialogFragment, מגדירים סוג של קטע קוד שמרחיב את DialogFragment ומחזירים DatePickerDialog מהשיטה onCreateDialog() של קטע הקוד.

הרחבת DialogFragment לחלונית לבחירת תאריך

כדי להגדיר DialogFragment ל-DatePickerDialog:

  • מגדירים את השיטה onCreateDialog() כך שתחזיר מופע של DatePickerDialog.
  • מטמיעים את הממשק DatePickerDialog.OnDateSetListener כדי לקבל קריאה חוזרת כשהמשתמש מגדיר את התאריך.

הנה דוגמה:

Kotlin

class DatePickerFragment : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current date as the default date in the picker.
        val c = Calendar.getInstance()
        val year = c.get(Calendar.YEAR)
        val month = c.get(Calendar.MONTH)
        val day = c.get(Calendar.DAY_OF_MONTH)

        // Create a new instance of DatePickerDialog and return it.
        return DatePickerDialog(requireContext(), this, year, month, day)

    }

    override fun onDateSet(view: DatePicker, year: Int, month: Int, day: Int) {
        // Do something with the date the user picks.
    }
}

Java

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker.
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it.
        return new DatePickerDialog(requireContext(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date the user picks.
    }
}

מידע על הארגומנטים של ה-constructor זמין במחלקה DatePickerDialog.

צריך רק אירוע שמוסיף מופע של המקטע הזה לפעילות.

הצגת הכלי לבחירת תאריכים

אחרי שמגדירים DialogFragment כמו בדוגמה שלמעלה, אפשר להציג את החלונית לבחירת תאריך על ידי יצירת מכונה של DialogFragment וקריאה ל-show().

לדוגמה, הנה לחצן שמפעיל שיטה להצגת תיבת הדו-שיח כשמקישים עליו:

<Button
    android:id="@+id/pickDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick date"/>

כשהמשתמש מקיש על הלחצן, המערכת מפעילה את השיטה הבאה:

Kotlin

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment()
    newFragment.show(supportFragmentManager, "datePicker")
}

Java

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment();
    newFragment.show(supportFragmentManager, "datePicker");
}

השיטה הזו מפעילה את show() במכונה חדשה של DialogFragment שמוגדרת בדוגמה שלמעלה. כדי להשתמש בשיטה show() צריך מופע של FragmentManager ושם תג ייחודי לקטע.

שימוש בבוררי בחירה עם מילוי אוטומטי

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

בוררי הבחירה הם תיבת דו-שיח, ולכן הם לא מוצגים בפעילות לצד שדות אחרים. כדי להציג את נתוני הבורר כשהבורר לא גלוי, אפשר להשתמש בתצוגה אחרת, כמו EditText, שיכולה להציג את הערך כשהבורר לא גלוי.

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

כדי ליצור מחלקה של EditText שיכולה לטפל בערכים מסוג AUTOFILL_TYPE_DATE:

  1. יוצרים כיתה שעוברת בירושה מ-EditText.
  2. מטמיעים את השיטה getAutofillType(), שמחזירה את AUTOFILL_TYPE_DATE.
  3. מטמיעים את השיטה getAutofillValue(), שמחזירה אובייקט AutofillValue שמייצג את התאריך באלפיות השנייה. כדי ליצור את אובייקט ההחזרה, משתמשים ב-method‏ forDate() כדי ליצור אובייקט AutofillValue.
  4. מטמיעים את השיטה autofill(). השיטה הזו מספקת את הלוגיקה לטיפול בפרמטר AutofillValue, שהוא מסוג AUTOFILL_TYPE_DATE. כדי לטפל בפרמטר, יוצרים ייצוג מחרוזת מתאים שלו, כמו mm/yyyy. משתמשים בייצוג המחרוזת כדי להגדיר את המאפיין text בתצוגה.
  5. הטמעה של פונקציונליות שמציגה בוחר כשהמשתמש רוצה לערוך את התאריך בקטגוריית המשנה המותאמת אישית EditText. התצוגה מעדכנת את המאפיין text בייצוג מחרוזת של הערך שהמשתמש בחר בבורר.

דוגמה למחלקה משנית של EditText שמטפלת בערכי AUTOFILL_TYPE_DATE מופיעה בדוגמה של מסגרת המילוי האוטומטי ב-Java או ב-Kotlin.

למידע נוסף על הוכחת תמיכה במילוי אוטומטי בתצוגות בהתאמה אישית, ראו מסגרת למילוי אוטומטי.