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

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

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

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

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

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

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

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

दिखाने के लिए, को बढ़ाने वाली फ़्रैगमेंट क्लास तय करें. साथ ही, फ़्रैगमेंट के तरीके से को वापस पाएं.TimePickerDialogDialogFragmentDialogFragmentTimePickerDialogonCreateDialog()

समय चुनने वाले टूल के लिए DialogFragment को बढ़ाना

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

  • इंस्टेंस वापस पाने के लिए, 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");
}

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

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

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

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

तारीख चुनने वाले टूल के लिए DialogFragment को बढ़ाना

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

  • 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");
}

यह तरीका, ऊपर दिए गए उदाहरण में तय किए गए 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. तरीका लागू करें. यह AUTOFILL_TYPE_DATE दिखाता है.getAutofillType()
  3. तरीका लागू करें. यह ऑब्जेक्ट दिखाता है, जो तारीख को मिलीसेकंड में दिखाता है.getAutofillValue()AutofillValue ऑब्जेक्ट वापस पाने के लिए, forDate() तरीके का इस्तेमाल करें.AutofillValue
  4. autofill() तरीका लागू करें. यह तरीका, AutofillValue पैरामीटर को हैंडल करने की लॉजिक उपलब्ध कराता है, जो AUTOFILL_TYPE_DATE टाइप का है. पैरामीटर को हैंडल करने के लिए, उसका सही स्ट्रिंग वर्शन बनाएं. जैसे, mm/yyyy. अपने व्यू की text प्रॉपर्टी सेट करने के लिए, स्ट्रिंग वर्शन का इस्तेमाल करें.
  5. `EditText` की कस्टम सबक्लास में तारीख में बदलाव करने के लिए, उपयोगकर्ता को पिकर दिखाने की सुविधा लागू करें. व्यू, `text` प्रॉपर्टी को उस वैल्यू के स्ट्रिंग वर्शन से अपडेट करता है जिसे उपयोगकर्ता पिकर पर चुनता है.text

EditText की ऐसी सबक्लास का उदाहरण देखने के लिए जो AUTOFILL_TYPE_DATE वैल्यू को हैंडल करती है, ऑटोमैटिक भरने की सुविधा के फ़्रेमवर्क का सैंपल देखें Java या Kotlin में.

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