Share
El equipo de diseño de materiales en Google define la funcionalidad de los diálogos en Android de la siguiente manera:
Los diálogos informan a los usuarios sobre una tarea específica y pueden contener información crítica, requerir decisiones o involucrar múltiples tareas.
Ahora que ha entendido para qué se usan los diálogos, ahora es el momento de aprender cómo mostrarlos. En este tutorial, lo guiaré a través del proceso de mostrar diferentes tipos de diálogos de diseño de materiales en Android. Cubriremos los siguientes diálogos:
Puede encontrar un proyecto de ejemplo para este tutorial en nuestro repositorio de GitHub para que lo pueda seguir fácilmente..
Según la documentación oficial de diseño de material de Google:
Las alertas son interrupciones urgentes, que requieren reconocimiento, que informan al usuario sobre una situación.
Asegúrate de incluir las últimas appcompat artefacto en tu construir.gradle archivo (módulo de aplicación). El nivel mínimo de API admitido es Android 4.0 (nivel de API 14).
dependencias implementación 'com.android.support:appcompat-v7:26.1.0'
Lo siguiente es crear una instancia de AlertDialog.Builder.
Accentsconagua
nuevo AlertDialog.Builder (este). public void onClick (diálogo DialogInterface, int which) Log.d ("MainActivity", "Enviando bombas atómicas a Jupiter");) .setNegativeButton ("Abortar", nuevo DialogInterface.OnClickListener () @Override public void onClick (Diálogo de interfaz de diálogo, int cuales) Log.d ("MainActivity", "Anortting mission ...");) .show ();Aquí creamos una instancia de AlertDialog.Builder y comenzó a configurar la instancia llamando a algunos métodos setter en ella. Tenga en cuenta que estamos utilizando el AlertDialog del artefacto de soporte de Android.
importar android.support.v7.app.AlertDialog;
Aquí están los detalles de los métodos de establecimiento que solicitamos en el AlertDialog.Builder ejemplo.
setTitle (): configura el texto para mostrar en la barra de título del diálogo. setMessage (): configura el mensaje para mostrar en el diálogo. setPositiveButton (): el primer argumento proporcionado es el texto que se muestra en el botón positivo, mientras que el segundo argumento es el oyente llamado cuando se hace clic en el botón positivo. setNegativeButton (): el primer argumento proporcionado es el texto que se muestra en el botón negativo, mientras que el segundo argumento es el oyente llamado cuando se hace clic en el botón negativo. Tenga en cuenta que AlertDialog.Builder tiene un setView () para configurar su vista de diseño personalizado para ella.
Para mostrar nuestro diálogo en la pantalla, simplemente invocamos espectáculo().
Hay otro método setter llamado setNeutralButton (). Al llamar a este método se agregará otro botón en el extremo izquierdo del cuadro de diálogo. Para llamar a este método, tenemos que pasar un Cuerda que servirá como el texto del botón, y también como un oyente al que se llama cuando se toca el botón.
nuevo AlertDialog.Builder (this) // otros métodos de configuración .setNeutralButton ("Neutral", null) .show ()
Tenga en cuenta que tocar fuera del cuadro de diálogo lo descartará automáticamente. Para evitar que eso suceda, deberás llamar al setCanceledOnTouchOutside () sobre el AlertDialog instancia y pase falso como argumento.
AlertDialog dialog = new AlertDialog.Builder (this) // después de llamar a los métodos de establecimiento .create (); dialog.setCanceledOnTouchOutside (false); dialog.show ();
Para evitar que se cierre el diálogo, presione la tecla ATRÁS botón, entonces tienes que llamar setCancelable () sobre el AlertDialog instancia y pase falso a ello como argumento.
Es muy fácil estilizar nuestro diálogo. Simplemente creamos un estilo personalizado en el estilos.xml recurso. Observe que este estilo padre es Theme.AppCompat.Light.Dialog.Alert. En otras palabras, este estilo hereda algunos atributos de estilo de su padre..
Comenzamos a personalizar el estilo de diálogo configurando los valores de los atributos que se aplicarán en el cuadro de diálogo; por ejemplo, podemos cambiar el color del botón de diálogo para que sea @androide:color/ holo_orange_dark y también establecer el fondo del cuadro de diálogo en un dibujable personalizado en nuestra carpeta de recursos dibujables (Android: windowBackground ajustado a @ drawable / background_dialog).
Aquí está mi background_dialog.xml archivo de recursos.
Aquí creamos una costumbre. InsetDrawable lo que nos permite agregar inserciones en cualquier lado de la ShapeDrawable. Creamos una forma de rectángulo usando el android: forma atributo de la rectángulo (Otros valores posibles son línea, oval, anillo). Tenemos una etiqueta de niño android: color atributo que indica qué color utilizar. Finalmente, le dimos a nuestro dibujo un borde usando el
Para aplicar este estilo al diálogo, solo pasamos el estilo personalizado al segundo parámetro en el AlertDialog.Builder constructor.
AlertDialog dialog = new AlertDialog.Builder (esto, R.style.CustomDialogTheme)
Según la documentación del diseño del material:
Los diálogos de confirmación requieren que los usuarios confirmen explícitamente su elección antes de que se confirme una opción. Por ejemplo, los usuarios pueden escuchar varios tonos de llamada, pero solo realizar una selección final al tocar "Aceptar".
Los siguientes tipos de diálogo de confirmación están disponibles:
Utilizamos un diálogo de opción múltiple cuando queremos que el usuario seleccione más de un elemento en un diálogo. En un diálogo de opción múltiple, se muestra una lista de opciones para que el usuario elija.
String [] multiChoiceItems = getResources (). GetStringArray (R.array.dialog_multi_choice_array); final boolean [] checkedItems = false, false, false, false; new AlertDialog.Builder (this) .setTitle ("Select your favorite movies") .setMultiChoiceItems (multiChoiceItems, checkedItems, new DialogInterface.OnMultiChoiceIntliveInternface.png. ("MainActivity", "se hizo clic en el índice del elemento" + index);) .setPositiveButton ("Ok", null) .setNegativeButton ("Cancel", null) .show ();Para crear un diálogo de opción múltiple, simplemente llamamos setMultiChoiceItems () método de ajuste en el AlertDialog.Builder ejemplo. Dentro de este método, pasamos un Formación de tipo Cuerda como el primer parámetro. Aquí está mi matriz, ubicada en el archivo de recursos de matrices. /values/arrays.xml.
- El caballero oscuro
- Cadena perpetua
- Salvando al soldado Ryan
- El silencio de los corderos
El segundo parámetro del método. setMultiChoiceItems () acepta una matriz que contiene los elementos que se comprueban. El valor de cada elemento en el artículos revisados matriz corresponde a cada valor en el multiChoiceItems formación. Usamos nuestro artículos revisados matriz (cuyos valores son todos falso por defecto) para hacer que todos los elementos estén sin marcar por defecto. En otras palabras, el primer artículo. "Caballero oscuro" está sin marcar porque el primer elemento en el artículos revisados matriz es falso, y así. Si el primer elemento en el artículos revisados la matriz era verdadera en su lugar, entonces "Caballero oscuro" sería revisado.
Tenga en cuenta que esta matriz artículos revisados se actualiza cuando seleccionamos o hacemos clic en cualquier elemento que se muestra, por ejemplo, si el usuario debe seleccionar "Cadena perpetua", vocación Elementos comprobados [1] volvería cierto.
El último parámetro acepta una instancia de OnMultiChoiceClickListener. Aquí simplemente creamos una clase anónima y anulamos al hacer clic(). Obtenemos una instancia del diálogo mostrado en el primer parámetro. En el segundo parámetro, obtenemos el índice del ítem que fue seleccionado. Finalmente, en el último parámetro, averiguamos si el elemento seleccionado fue verificado o no.
En un cuadro de diálogo de opción única, a diferencia del cuadro de diálogo de opción múltiple, solo se puede seleccionar un elemento.
String [] singleChoiceItems = getResources (). GetStringArray (R.array.dialog_single_choice_array); int itemSelected = 0; new AlertDialog.Builder (this) .setTitle ("Select your gender") .setSingleChoiceItems (singleChoiceItems, itemSelected, new DialogInterface.OnClickListener () selectOIndexface_individual_individual_inducido_individual_inducido_individual_inducido_industrial_industrial_industrial_inclucido_Interfacio diálogoInterfaz diálogoInterface diálogo) Ok ", nulo) .setNegativeButton (" Cancelar ", nulo) .show ();Para crear un diálogo de una sola opción, simplemente invocamos setSingleChoiceItems () colocador en el AlertDialog.Builder ejemplo. Dentro de este método, también pasamos un Formación de tipo Cuerda como el primer parámetro. Aquí está la matriz que pasamos, que se encuentra en el archivo de recursos de matrices: /values/arrays.xml.
- Masculino
- Hembra
- Otros
El segundo parámetro de la setSingleChoiceItems () se utiliza para determinar qué elemento se comprueba. El último parámetro en al hacer clic() nos da el índice del elemento que se seleccionó, por ejemplo, seleccionando Hembra artículo, el valor de selectIndex estarán 1.
Este es un selector de diálogo que se utiliza para seleccionar una sola fecha.
Para empezar, crearemos un Calendario instancia de campo en el Actividad principal e inicializarlo.
La clase pública MainActivity extiende AppCompatActivity Calendar mCalendar = Calendar.getInstance (); //…
Aquí llamamos Calendar.getInstance () para obtener la hora actual (en la zona horaria predeterminada) y establecerla en mCalendar campo.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, new DatePickerDialog.OnDateSetListener () @Override public void onDateSet (Estado del repaso) Estado de la inspección de las partes de los eventos de los Estados Unidos). .MONTH, monthOfYear); mCalendar.set (Calendar.DAY_OF_MONTH, dayOfMonth); String date = DateFormat.getDateInstance (DateFormat.MEDIUM) .format (calendar.getTime ()); Log.d ("MainActivity") "La fecha seleccionada es) "+ fecha);, mCalendar.get (Calendar.YEAR), mCalendar.get (Calendar.MONTH), mCalendar.get (Calendar.DAY_OF_MONTH)); datePickerDialog.show ();Para mostrar un diálogo de selección de fecha, creamos una instancia del DatePickerDialog. Aquí está la explicación de las definiciones de parámetros al crear una instancia de este tipo.
Actividad, tu usas esta, mientras que en un Fragmento, llama getActivity (). OnDateSetListener. Este oyente onDateSet () se llama cuando el usuario establece la fecha. Dentro de este método, obtenemos el año seleccionado, el mes seleccionado del año y también el día seleccionado del mes. 0-11). 1-31). Finalmente, llamamos al espectáculo() método de la DatePickerDialog instancia para mostrarlo en la pantalla actual.
Es bastante fácil personalizar el tema del diálogo del selector de fecha (similar a lo que hicimos con el diálogo de alerta).
Brevemente, crea un dibujo personalizable, crea un estilo o tema personalizado y, a continuación, aplica ese tema al crear un DatePickerDialog instancia en el segundo parámetro.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, R.style.MyCustomDialogTheme, listener, 2017, 26, 11);
El cuadro de diálogo del selector de tiempo permite al usuario elegir una hora y se ajusta a la configuración de tiempo preferida del usuario, es decir, el formato de 12 horas o 24 horas.
Como puede ver en el código de abajo, creando un TimePickerDialog es bastante similar a crear un DatePickerDialog. Al crear una instancia de la TimePickerDialog, Pasamos en los siguientes parámetros:
OnTimeSetListener instancia que sirve como oyente.TimePickerDialog timePickerDialog = new TimePickerDialog (este, nuevo TimePickerDialog.OnTimeSetListener () @Override public void enTraEntradeRayorar/CallerRealerRealer_RealerRealerControl de cuenta en el tiempo de ejercicio). minuto); String time = DateFormat.getTimeInstance (DateFormat.SHORT) .format (calendar.getTime ()); Log.d ("MainActivity", "La hora seleccionada es" + time);, mCalendar.get (Calendar. HOUR_OF_DAY), calendar.get (Calendar.MINUTE), true); timePickerDialog.show ();los onTimeSet () El método se llama cada vez que el usuario ha seleccionado la hora. Dentro de este método, obtenemos una instancia de la Selector de tiempo, La hora seleccionada del día elegido, y también el minuto seleccionado..
Para mostrar este diálogo, todavía llamamos al espectáculo() método.
El selector de tiempo se puede diseñar de forma similar al cuadro de diálogo del selector de fecha.
Según la documentación oficial de diseño de material de Google:
Las hojas inferiores se deslizan hacia arriba desde la parte inferior de la pantalla para revelar más contenido.
Para comenzar a usar el cuadro de diálogo de la hoja inferior, debe importar el artefacto de soporte de diseño, así que visite el módulo de su aplicación construir.gradle archivo para importarlo.
dependencias implementación 'com.android.support:appcompat-v7:26.1.0' implementación 'com.android.support:design:26.1.0'
Asegúrese de que la actividad o el fragmento del cuadro de diálogo de la hoja inferior se abrirá: su diseño principal es el CoordinatorLayout.
Aquí también tenemos un FrameLayout Eso serviría como un contenedor para nuestra hoja inferior. Observe que uno de estos FrameLayoutlos atributos de es aplicación: layout_behavior, cuyo valor es un recurso de cadena especial que se asigna a android.support.design.widget.BottomSheetBehavior. Esto permitirá a nuestros FrameLayout para aparecer como una hoja inferior. Tenga en cuenta que si no incluye este atributo, su aplicación se bloqueará..
la clase pública MainActivity extiende AppCompatActivity //… //… private BottomSheetDialog mBottomSheetDialog; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); //… Ver bottomSheet = findViewById (R.id.framelayout_bottom_sheet);
Aquí declaramos una instancia de BottomSheetDialog como un campo para nuestro MainActivity.java y lo inicializo en el onCreate () método de nuestra actividad.
vista final bottomSheetLayout = getLayoutInflater (). inflate (R.layout.bottom_sheet_dialog, null); (bottomSheetLayout.findViewById (R.id.button_close)). setOnClickListener (new View.OnClickListener () @Override public void onClick (View view) mBottomSheetDialog.dismiss ();); (bottomSheetLayout.findViewById (R.id.button_ok)). setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) Toast.m.Install.Linternas.com) .show(); ); mBottomSheetDialog = new BottomSheetDialog (this); mBottomSheetDialog.setContentView (bottomSheetLayout); mBottomSheetDialog.show ();
En el código anterior, inflamos el diseño de la hoja inferior. R.layout.bottom_sheet_dialog. Establecemos oyentes para el Cancelar y De acuerdo botones en el bottom_sheet_dialog.xml. Cuando el Cancelar Se hace clic en el botón, simplemente descartamos el diálogo..
Luego inicializamos nuestro mBottomSheetDialog campo y establecer la vista utilizando setContentView (). Finalmente, llamamos al espectáculo() Método para mostrarlo en la pantalla..
Aquí está mi bottom_sheet_dialog.xml:
Asegúrese de consultar Cómo usar las hojas de abajo con la Biblioteca de Soporte de Diseño de Paul Trebilcox-Ruiz aquí en Envato Tuts + para obtener más información sobre las hojas de abajo..
Según la documentación oficial de diseño de material de Google:
Los cuadros de diálogo de pantalla completa agrupan una serie de tareas (como crear una entrada de calendario) antes de que puedan confirmarse o descartarse. No se guardan selecciones hasta que se toca "Guardar". Tocar la "X" descarta todos los cambios y sale del cuadro de diálogo.
Veamos ahora cómo crear un diálogo de pantalla completa. Primero, asegúrese de incluir el artefacto v4 de soporte de Android en el módulo de su aplicación construir.gradle. Esto es necesario para ser compatible con Android 4.0 (nivel de API 14) y superior.
implementación 'com.android.support:support-v4:26.1.0'
A continuación, crearemos un Pantalla completaDialogFragment que extiende el DialogFragment super clase.
public class FullscreenDialogFragment amplía DialogFragment @Override public View onCreateView (inflador de LayoutInflater, contenedor ViewGroup, Bundle savedInstanceState) View rootView = inflater.inflate (R.layout.full_screen_dialog, container, false); (rootView.findViewById (R.id.button_close)) setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) dismiss ();); devuelve rootView; @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) Dialog dialog = super.onCreateDialog (savedInstanceState); dialog.requestWindowFeature (Window.FEATURE_NO_TITLE); diálogo de retorno;
Aquí anulamos el onCreateView () (como haríamos con un ordinario Fragmento). Dentro de este método, simplemente inflamos y devolvemos el diseño (R.layout.full_screen_dialog) que servirá como la vista personalizada para el diálogo. Establecimos un OnClickListener sobre el Botón de imagen (R.id.button_close) que descartará el diálogo cuando se haga clic.
También anulamos onCreateDialog () y devolver un Diálogo. Dentro de este método, también puede devolver un AlertDialog creado usando un AlertDialog.Builder.
Nuestro R.layout.full_screen_dialog consiste en un Botón de imagen, una Botón, y algo Vista de texto etiquetas:
En el Botón de imagen Widget, verás un atributo. aplicación: srcCompat que hace referencia a una costumbre VectorDrawable (@ drawable / ic_close). Esta costumbre VectorDrawable crea el X botón, que cierra el diálogo de pantalla completa cuando se pulsa.
Para utilizar este aplicación: srcCompat atributo, asegúrese de incluirlo en su construir.gradle expediente. A continuación, configure su aplicación para usar bibliotecas de soporte de vectores y agregue vectorDrawables elemento para tu construir.gradle archivo en el módulo de la aplicación.
android defaultConfig vectorDrawables.useSupportLibrary = true
Hicimos esto para que podamos admitir todas las versiones de la plataforma Android a Android 2.1 (nivel API 7+).
Finalmente, para mostrar el Pantalla completaDialogFragment, simplemente usamos el FragmentTransaction Para añadir nuestro fragmento a la interfaz de usuario..
FragmentManager fragmentManager = getSupportFragmentManager (); FullscreenDialogFragment newFragment = new FullscreenDialogFragment (); FragmentTransaction transaction = fragmentManager.beginTransaction (); transaction.setTransition (FragmentTransaction.TRANSIT_FRAGMENT_OPEN); transaction.add (android.R.id.content, newFragment) .addToBackStack (null) .commit ();
Tenga en cuenta que todos los cuadros de diálogo que se tratan aquí, excepto el cuadro de diálogo de pantalla completa, se cerrarán automáticamente cuando el usuario cambie la orientación de la pantalla del dispositivo Android, de vertical a horizontal (o viceversa). Esto se debe a que el sistema Android ha destruido y recreado el Actividad con el fin de adaptarse a la nueva orientación.
Para que podamos mantener el diálogo a través de los cambios de orientación de la pantalla, tendremos que crear un Fragmento que extiende el DialogFragment súper clase (tal como lo hicimos para el ejemplo de diálogo de pantalla completa).
Veamos un ejemplo simple para un diálogo de alerta..
clase pública AlertDialogFragment extiende DialogFragment implementa DialogInterface.OnClickListener @Override public Dialog onCreateDialog (Bundle savedInstanceState) AlertDialog.Builder constructor = nuevo AlertDialog.Builder (getActivity ())); return (builder.setTitle ("¿Activar superpoderes?"). setMessage ("Al activar superpoderes, tendrás más poderes para salvar el mundo.") .setPositiveButton ("Activate", this) .setNegativeButton ("Cancel", ) .create ()); @Override public void onCancel (diálogo DialogInterface) super.onCancel (diálogo); @ Anular pública void onDismiss (diálogo DialogInterface) super.onDismiss (diálogo); @Override public void onClick (diálogo DialogInterface, int cuales) Toast.makeText (getActivity (), "que es" + which, Toast.LENGTH_LONG) .show (); Aquí, creamos una clase que extiende la DialogFragment y también implementa el DialogInterface.OnClickListener. Debido a que implementamos este oyente, tenemos que anular la al hacer clic() método. Tenga en cuenta que si pulsamos el botón positivo o negativo, este al hacer clic() se invocará el método.
Dentro de nuestro onCreateDialog (), creamos y devolvemos una instancia de AlertDialog.
También hemos anulado:
onCancel (): esto se llama si el usuario presiona el ATRÁS botón para salir del diálogo. onDismiss (): esto se llama siempre que el diálogo es forzado a salir por cualquier motivo (ATRÁS o haga clic en un botón). Para mostrar este diálogo, simplemente llamamos espectáculo() Método en una instancia de nuestra AlertDialogFragment.
nuevo AlertDialogFragment (). show (getSupportFragmentManager (), "alertdialog_sample");
El primer parámetro es una instancia de la Gestor de fragmentos. El segundo parámetro es una etiqueta que se puede usar para recuperar este fragmento nuevamente más tarde desde el Gestor de fragmentos vía findFragmentByTag ().
Ahora, si cambia la orientación del dispositivo de vertical a horizontal (o viceversa), el cuadro de diálogo de alerta no se cerrará.
Puede seguir pasos similares para que los otros tipos de diálogo mantengan el diálogo durante la rotación del dispositivo. Simplemente creas un Fragmento que extiende el DialogFragment súper clase, y usted crea y devuelve el diálogo particular en onCreateDialog ().
Algunos de ustedes pueden haber oído hablar de ProgressDialog. Esto simplemente muestra un diálogo con un indi
