Dodaj selektory do swojej aplikacji

Android zapewnia użytkownikom ustawienia pozwalające wybrać godzinę lub datę gotowe do użycia okna. Te selektory umożliwiają części czasu (godziny, minuty, AM/PM) lub daty (miesiąc, dzień, rok).

.
Przykład selektora godziny z material.io
. Rysunek 1. Wybór godziny w selektorze kalendarza na urządzeniu mobilnym.

Dzięki tym selektorom użytkownicy mogą wybrać godzinę lub datę jest prawidłowy, poprawnie sformatowany i dostosowany do języka użytkownika.

Przykład modalnego selektora daty z material.io
Rysunek 2. Modalny selektor daty.

Zalecamy użycie DialogFragment który będzie hostować każdy selektor daty lub godziny. DialogFragment zarządza: cyklu życia okna i umożliwia wyświetlanie selektorów w różnym układzie konfiguracji, np. w podstawowym oknie dialogowym w telefonie lub jako element układ na dużych ekranach.

Utwórz selektor godziny

Aby wyświetlić TimePickerDialog za pomocą DialogFragment zdefiniuj klasę fragmentu, która rozszerza się DialogFragment i zwróć TimePickerDialog z: fragment onCreateDialog() .

Rozszerz fragment DialogFragment dla selektora czasu

Aby zdefiniować DialogFragment dla elementu TimePickerDialog: wykonaj te czynności:

  • Określ metodę onCreateDialog(), która zwróci instancję TimePickerDialog
  • Zaimplementuj tag TimePickerDialog.OnTimeSetListener do odebrania wywołania zwrotnego po ustawieniu godziny przez użytkownika.

Oto przykład:

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.
    }
}

W klasie TimePickerDialog znajdziesz informacje o: argumentów konstruktora.

Teraz potrzebne Ci będzie zdarzenie, które doda wystąpienie tego fragmentu do działania.

Pokaż selektor godziny

Po zdefiniowaniu funkcji DialogFragment podobnej do tej w poprzednim kroku możesz na przykład wyświetlić selektor czasu, tworząc instancję DialogFragment i wywołanie funkcji show() .

Oto przykładowy przycisk, który po kliknięciu wywołuje metodę pokazania okno:

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

Gdy użytkownik kliknie ten przycisk, system wywoła tę metodę:

Kotlin

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

Java

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

Ta metoda wywołuje show() w nowej instancji DialogFragment zdefiniowane w poprzednim przykładzie. Metoda show() wymaga instancji FragmentManager i niepowtarzalną nazwę tagu dla danego fragmentu.

Utwórz selektor daty

Tworzenie DatePickerDialog jest jak TimePickerDialog. Różnica polega na tym, utworzony dla danego fragmentu.

Aby wyświetlić element DatePickerDialog za pomocą funkcji DialogFragment, zdefiniuj klasę fragmentu, która rozszerza DialogFragment i zwraca DatePickerDialog z onCreateDialog() fragmentu .

Rozszerz fragment DialogFragment na potrzeby selektora daty

Aby zdefiniować DialogFragment dla elementu DatePickerDialog: wykonaj te czynności:

  • Określ metodę onCreateDialog(), która zwróci instancję DatePickerDialog
  • Zaimplementuj tag DatePickerDialog.OnDateSetListener do odebrania połączenia zwrotnego, gdy użytkownik ustawi datę.

Oto przykład:

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.
    }
}

Zobacz DatePickerDialog , gdzie znajdziesz informacje o argumentach konstruktora.

Potrzebujesz tylko zdarzenia, które dodaje wystąpienie tego fragmentu do działania.

Pokaż selektor dat

Po zdefiniowaniu właściwości DialogFragment jak w poprzednim przykładzie, możesz wyświetlić selektor daty, tworząc instancję DialogFragment i dzwonię pod show().

Oto przykładowy przycisk, który po kliknięciu wywołuje metodę pokazania okno:

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

Gdy użytkownik kliknie ten przycisk, system wywoła tę metodę:

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

Ta metoda wywołuje show() w nowej instancji DialogFragment zdefiniowane w poprzednim przykładzie. Metoda show() wymaga instancji FragmentManager i niepowtarzalną nazwę tagu dla danego fragmentu.

Korzystanie z selektorów w przypadku autouzupełniania

W 2017 r. Android wprowadził platformę autouzupełniania, która umożliwia użytkownicy zapisują dane, których mogą używać do wypełniania formularzy w różnych aplikacjach. Selektory może być przydatne w scenariuszach autouzupełniania, ponieważ udostępnia interfejs, który pozwala użytkownikom w polu, w którym są przechowywane dane daty lub godziny. Na przykład na karcie kredytowej formularza, selektor daty pozwala użytkownikom wpisać lub zmienić datę ważności kartą kredytową.

Selektory to okna, więc nie są wyświetlane w aktywności razem z w innych polach. Aby wyświetlić dane selektora, gdy selektor jest niewidoczny, możesz: użyć innego widoku, np. EditText, który może wyświetlić wartość, gdy selektor nie jest widoczny.

Obiekt EditText natywnie oczekuje danych autouzupełniania typu AUTOFILL_TYPE_TEXT Usługi autouzupełniania zapisują z kolei dane jako: AUTOFILL_TYPE_DATE aby ją odpowiednio przedstawić. Aby rozwiązać niespójność w zalecamy utworzenie widoku niestandardowego, który dziedziczy dane z elementów EditText i implementuje metody wymagane do prawidłowej obsługi wartości typu AUTOFILL_TYPE_DATE.

Wykonaj te czynności, aby utworzyć podklasę EditText, która: może obsługiwać wartości typu AUTOFILL_TYPE_DATE:

  1. Utwórz klasę, która dziedziczy z elementu EditText.
  2. Zaimplementuj tag getAutofillType() , która zwraca AUTOFILL_TYPE_DATE.
  3. Zaimplementuj tag getAutofillValue() , która zwraca AutofillValue reprezentujący datę w milisekundach. Aby utworzyć zwrot użyj parametru forDate() aby wygenerować obiekt AutofillValue.
  4. Zaimplementuj tag autofill() . Udostępnia ona logikę do obsługi Parametr AutofillValue, który jest typu AUTOFILL_TYPE_DATE Aby obsługiwać parametr, utwórz odpowiedni jako ciąg tekstowy, np. mm/yyyy. Używanie ciągu znaków aby ustawić właściwość text danego widoku.
  5. Zaimplementuj funkcję, która wyświetla selektor, gdy użytkownik chce wprowadzić zmiany. data w niestandardowej podklasie EditText. Widok zostanie zaktualizowany właściwość text z ciągiem znaków reprezentującym wartość; którą użytkownik wybierze w selektorze.

Przykład podklasy klasy EditText, która obsługuje AUTOFILL_TYPE_DATE – zobacz przykład platformy autouzupełniania w Java lub Kotlin.

Aby dowiedzieć się więcej o obsłudze autouzupełniania widoków niestandardowych, przeczytaj artykuł Platforma autouzupełniania.