Agrega selectores a tu app

Android ofrece controles para que el usuario elija una hora o fecha, como en los diálogos listos para usar. Estos selectores proporcionan controles para seleccionar cada uno. una parte de la hora (hora, minuto, a.m./p.m.) o la fecha (mes, día, año).

El uso de estos selectores ayuda a garantizar que tus usuarios puedan elegir una hora o una fecha válidas, con el formato correcto y ajustadas a su configuración regional.

Te recomendamos que utilices DialogFragment para alojar cada selector de fecha y hora. DialogFragment administra la del ciclo de vida del diálogo y te permite mostrar los selectores en diferentes diseños como en un diálogo básico en teléfonos celulares o como parte incorporada de el diseño en pantallas grandes.

Crea un selector de hora

Para mostrar un TimePickerDialog con DialogFragment, define una clase de fragmento que extienda DialogFragment y muestra un TimePickerDialog del del fragmento onCreateDialog() .

Cómo extender DialogFragment para un selector de hora

Para definir un DialogFragment para un TimePickerDialog, haz lo siguiente: haz lo siguiente:

• Define el método onCreateDialog() para mostrar una instancia de TimePickerDialog
• Implementa el TimePickerDialog.OnTimeSetListener para recibir una devolución de llamada cuando el usuario configure la hora.

Por ejemplo:

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

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

Consulta la clase TimePickerDialog para obtener información sobre la argumentos de constructor.

Ahora solo necesitas un evento que agregue una instancia de este fragmento a tu actividad.

Mostrar el selector de hora

Después de definir un DialogFragment como el de la tabla anterior ejemplo, puedes mostrar el selector de hora creando una instancia de la DialogFragment y llama al show() .

Por ejemplo, aquí tienes un botón que, cuando se presiona, llama a un método para mostrar el Diálogo:

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

Cuando el usuario presiona este botón, el sistema llama al siguiente método:

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

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

Este método llama a show() en una instancia nueva de la DialogFragment, que se definió en el ejemplo anterior. El El método show() requiere una instancia de FragmentManager y un nombre de etiqueta único para el fragmento.

Cómo crear un selector de fecha

Creación de un DatePickerDialog es como crear un TimePickerDialog. La diferencia es el diálogo que crees para el fragmento.

Para mostrar un DatePickerDialog con DialogFragment, haz lo siguiente: define una clase de fragmento que extienda DialogFragment y muestre un DatePickerDialog del onCreateDialog() del fragmento .

Cómo extender DialogFragment para un selector de fecha

Para definir un DialogFragment para un DatePickerDialog, haz lo siguiente: haz lo siguiente:

• Define el método onCreateDialog() para mostrar una instancia de DatePickerDialog
• Implementa el DatePickerDialog.OnDateSetListener para recibir una devolución de llamada cuando el usuario configure la fecha.

Por ejemplo:

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

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

Consulta la DatePickerDialog para obtener información sobre los argumentos del constructor.

Solo necesitas un evento que agregue una instancia de este fragmento a tu actividad.

Mostrar el selector de fecha

Después de definir un DialogFragment como en el ejemplo anterior, haz lo siguiente: Puedes mostrar el selector de fecha creando una instancia de la DialogFragment y llamando a show().

Por ejemplo, aquí tienes un botón que, cuando se presiona, llama a un método para mostrar el Diálogo:

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

Cuando el usuario presiona este botón, el sistema llama al siguiente método:

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

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

Este método llama a show() en una instancia nueva de la DialogFragment definido en el ejemplo anterior. El El método show() requiere una instancia de FragmentManager. y un nombre de etiqueta único para el fragmento.

Cómo usar selectores con la función Autocompletar

En 2017, Android presentó Autofill Framework, que permite los usuarios guardan datos que se pueden usar para completar formularios en diferentes apps. Selectores puede ser útil en situaciones de autocompletado, ya que proporciona una IU que permite a los usuarios cambiar la de un campo que almacena datos de fecha u hora. Por ejemplo, en una tarjeta de crédito formulario, un selector de fecha permite a los usuarios ingresar o cambiar la fecha de vencimiento de su tarjeta de crédito.

Como los selectores son diálogos, no se muestran en una actividad junto con otros campos. Para mostrar los datos del selector cuando este no esté visible, puedes usar otra vista, como EditText, que puede mostrar el valor cuando el selector no está visible.

De forma nativa, un objeto EditText espera autocompletar datos de tipo. AUTOFILL_TYPE_TEXT Por el contrario, los servicios de autocompletado guardan los datos como AUTOFILL_TYPE_DATE para crear una representación adecuada de él. Para resolver la incoherencia en de imágenes, te recomendamos que crees una vista personalizada que herede de EditText e implementa los métodos necesarios para procesar correctamente valores de tipo AUTOFILL_TYPE_DATE.

Sigue estos pasos para crear una subclase de EditText que puede manejar valores de tipo AUTOFILL_TYPE_DATE:

1. Crea una clase que se herede de EditText.
2. Implementa el getAutofillType() que muestra AUTOFILL_TYPE_DATE.
3. Implementa el getAutofillValue() que muestra un valor AutofillValue que representa la fecha en milisegundos. Para crear la devolución usa el forDate() para generar un objeto AutofillValue.
4. Implementa el autofill() . Este método proporciona la lógica para manejar el Parámetro AutofillValue, que es del tipo AUTOFILL_TYPE_DATE Para manejar el parámetro, crea una una representación de cadena correspondiente, como mm/yyyy. Usa la cadena para configurar la propiedad text de tu vista.
5. Implementa la funcionalidad que muestra un selector cuando el usuario desea editar la fecha en la subclase personalizada de EditText. La vista se actualiza La propiedad text con una representación de cadena del valor que el usuario elige en el selector.

Puedes ver un ejemplo de una subclase de EditText que controla AUTOFILL_TYPE_DATE; consulta la muestra de Autofill Framework en Java o Kotlin

Para obtener más información sobre cómo probar la compatibilidad de autocompletar para tus vistas personalizadas, consulta Autofill Framework.