अपने ऐप्लिकेशन में पिकर जोड़ें

Compose का इस्तेमाल करके मैसेज लिखना
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में कॉम्पोनेंट जोड़ने का तरीका जानें.

Android, उपयोगकर्ता को समय या तारीख चुनने के लिए कंट्रोल उपलब्ध कराता है. ये पिकर, समय (घंटा, मिनट, AM/PM) या तारीख (महीना, दिन, साल) के हर हिस्से को चुनने के लिए कंट्रोल उपलब्ध कराते हैं.

content.io से टाइम पिकर का एक उदाहरण
पहली इमेज. मोबाइल कैलेंडर पिकर में घंटे चुनना.

इन पिकर का इस्तेमाल करने से, यह पक्का करने में मदद मिलती है कि आपके उपयोगकर्ता ऐसा समय या तारीख चुन सकें जो मान्य हो, सही तरीके से फ़ॉर्मैट की गई हो, और उपयोगकर्ता की स्थानीय भाषा के हिसाब से हो.

material.io से, तारीख चुनने वाले मॉडल का उदाहरण
दूसरी इमेज. तारीख चुनने वाला मोडल.

हमारा सुझाव है कि आप हर टाइम या तारीख चुनने वाले टूल को होस्ट करने के लिए, DialogFragment का इस्तेमाल करें. DialogFragment आपके लिए डायलॉग लाइफ़साइकल को मैनेज करता है और पिकर को अलग-अलग लेआउट कॉन्फ़िगरेशन में दिखाने की सुविधा देता है. जैसे, हैंडसेट पर बेसिक डायलॉग में या बड़ी स्क्रीन पर लेआउट के एम्बेड किए गए हिस्से के तौर पर.

समय चुनने वाला टूल बनाना

DialogFragment का इस्तेमाल करके TimePickerDialog दिखाने के लिए, एक फ़्रैगमेंट क्लास तय करें जो DialogFragment को बढ़ाती हो और फ़्रैगमेंट के onCreateDialog() वाले तरीके से TimePickerDialog दिखाती हो.

टाइम पिकर के लिए Dialogफ़्रैगमेंट को बढ़ाना

TimePickerDialog के लिए DialogFragment तय करने के लिए, यह तरीका अपनाएं:

  • TimePickerDialog का इंस्टेंस दिखाने के लिए, onCreateDialog() तरीका तय करें.
  • उपयोगकर्ता के समय सेट करने पर कॉलबैक पाने के लिए, 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");
}

यह तरीका, पिछले उदाहरण में बताए गए DialogFragment के नए इंस्टेंस पर show() को कॉल करता है. show() तरीके के लिए, FragmentManager का एक इंस्टेंस और फ़्रैगमेंट के लिए यूनीक टैग का नाम ज़रूरी है.

तारीख चुनने वाला टूल बनाना

DatePickerDialog बनाना, TimePickerDialog बनाने जैसा है. फ़र्क़ यह है कि फ़्रैगमेंट के लिए, आपने जो डायलॉग बनाया है.

DialogFragment का इस्तेमाल करके DatePickerDialog दिखाने के लिए, ऐसी फ़्रैगमेंट क्लास तय करें जो DialogFragment को बढ़ाती हो और फ़्रैगमेंट के onCreateDialog() तरीके से DatePickerDialog दिखाती हो.

तारीख चुनने वाले टूल के लिए Dialogफ़्रैगमेंट को बढ़ाना

DatePickerDialog के लिए DialogFragment तय करने के लिए, यह तरीका अपनाएं:

  • DatePickerDialog का इंस्टेंस दिखाने के लिए, onCreateDialog() तरीका तय करें.
  • 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");
}

यह तरीका, पिछले उदाहरण में बताए गए DialogFragment के नए इंस्टेंस पर show() को कॉल करता है. 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 में ऑटोमैटिक फ़्रेमवर्क का सैंपल देखें.

अपने कस्टम व्यू के लिए, ऑटोमैटिक भरने की सुविधा उपलब्ध कराने के बारे में ज़्यादा जानने के लिए, ऑटोमैटिक भरने की सुविधा का फ़्रेमवर्क लेख पढ़ें.