إضافة أدوات الاختيار إلى تطبيقك

يوفّر Android عناصر تحكّم تتيح للمستخدم اختيار وقت أو تاريخ لمربعات حوار جاهزة للاستخدام. تتيح أداة الاختيار هذه عناصر تحكّم لاختيار كل جزء من الوقت (الساعة، الدقيقة، ص/م) أو التاريخ (الشهر، اليوم، السنة).

مثال على أداة اختيار الوقت منmaterial.io
الشكل 1. اختيار الساعة في منتقي التقويم على الأجهزة الجوّالة

يساعد استخدام هذه الأدوات في ضمان تمكُّن المستخدمين من اختيار وقت أو تاريخ صالحة ومنسّقة بشكل صحيح ومضبوطة على لغة المستخدم.

مثال على أداة اختيار التاريخ المشروطة منmaterial.io
الشكل 2. أداة اختيار التاريخ المشروط

ننصحك باستخدام DialogFragment لاستضافة كل منتقي وقت أو تاريخ. يدير DialogFragment دورة حياة مربّعات الحوار، كما تتيح لك عرض أدوات الاختيار بتنسيق مختلف مثلًا في مربع الحوار الأساسي على الهواتف المحمولة أو كجزء مضمَّن من التخطيط على الشاشات الكبيرة.

إنشاء أداة اختيار الوقت

لعرض TimePickerDialog باستخدام DialogFragment، حدد فئة تجزئة تمتد DialogFragment وإرجاع TimePickerDialog من جزء onCreateDialog() .

تمديد DialogFragment لأداة اختيار الوقت

لتحديد DialogFragment لـ TimePickerDialog، قم بما يلي:

  • حدِّد طريقة 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.
    }
}

راجِع الفئة 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 في المثال السابق. تشير رسالة الأشكال البيانية تتطلب طريقة 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.
    }
}

يمكنك الاطّلاع على 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 يمثل التاريخ بالمللي ثانية. لإنشاء عملية الإرجاع الكائن، استخدم forDate() لإنشاء كائن AutofillValue.
  4. نفِّذ autofill() . توفر هذه الطريقة المنطق للتعامل مع معلَمة AutofillValue، وهي من النوع AUTOFILL_TYPE_DATE للتعامل مع المعلمة، قم بإنشاء حساب تمثيل سلسلة لها، مثل mm/yyyy. استخدام السلسلة المثلى لتعيين السمة text في ملفك الشخصي.
  5. تنفيذ وظائف تعرض أداة اختيار عندما يريد المستخدم التعديل التاريخ في الفئة الفرعية المخصّصة من EditText. يتم تعديل طريقة العرض السمة text مع تمثيل سلسلة للقيمة التي يختارها المستخدم في أداة الاختيار

للاطّلاع على مثال لفئة فرعية من EditText تعالج AUTOFILL_TYPE_DATE، يمكنك الاطّلاع على نموذج إطار عمل الملء التلقائي في Java أو Kotlin.

لمزيد من المعلومات عن إثبات إتاحة ميزة الملء التلقائي لملفّاتك الشخصية المخصّصة، يمكنك الاطّلاع على إطار عمل الملء التلقائي: