Tutorial de fragmentos de diálogo de Android

Última actualización: 2 de octubre de 2013

En este tutorial, aprenderá cómo implementar un DialogFragment en su aplicación de Android. Un DialogFragment es un fragmento que muestra una ventana de diálogo, flotando sobre la ventana de su actividad. Este fragmento contiene un objeto de diálogo, que se muestra según corresponda en función del estado del fragmento. Como alternativa, puede crear un cuadro de diálogo completamente personalizado, como un AlertDialog, con su propio contenido. Crearemos botones que mostrarán un DialogFragment y un Alert DialogFragment personalizado.

Cree un nuevo proyecto en Eclipse File > New > Android Application Project. Complete los detalles y nombre su proyecto DialogFragmentTutorial .

Nombre de la aplicación: DialogFragmentTutorial

Nombre del proyecto: DialogFragmentTutorial

Nombre del paquete: com.androidbegin.dialogfragmenttutorial

Abra su MainActivity .java y pegue el siguiente código.

Actividad principal .java

paquete com.androidbegin.dialogfragmenttutorial;

importar android.os.Bundle;
importar android.support.v4.app.FragmentActivity;
importar android.support.v4.app.FragmentManager;
importar android.view.View;
importar android.view.View.OnClickListener;
importar android.widget.Button;

clase pública MainActivity extiende FragmentActivity {

	Botón dfragbutton;
	Botón alertadfragbutton;
	FragmentManager fm = getSupportFragmentManager();

	@Anular
	public void onCreate (Paquete guardadoInstanceState) {
		super.onCreate(estadoDeInstanciaGuardado);
		// Obtener la vista de activity_main.xml
		setContentView(R.diseño.actividad_principal);

		// Localiza el botón en activity_main.xml
		dfragbutton = (Botón) findViewById(R.id.dfragbutton);
		alertdfragbutton = (Botón) findViewById(R.id.alertdfragbutton);

		// Capturar clics de botón
		dfragbutton.setOnClickListener(nuevo OnClickListener() {
			public void onClick (Ver arg0) {
				DFragmento dFragmento = nuevo DFragmento();
				// Mostrar fragmento de diálogo
				dFragment.show(fm, "Fragmento de diálogo");
			}
		});

		// Capturar clics de botón
		alertdfragbutton.setOnClickListener(nuevo OnClickListener() {
			public void onClick (Ver arg0) {
				AlertDFragment alertdFragment = new AlertDFragment();
				// Mostrar fragmento de diálogo de alerta
				alertdFragment.show(fm, "Fragmento de diálogo de alerta");
			}
		});
	}
}

En esta actividad, hemos creado dos botones que mostrarán diferentes fragmentos de diálogo. El primer botón mostrará un DialogFragment simple y otro con un Alert DialogFragment personalizado.

A continuación, cree un diseño gráfico XML para MainActivity. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML activity_main.xml y pegue el siguiente código.

actividad_principal.xml

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <Botón
        android_id="@+id/dfragbutton"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="verdadero"
        android_text="@cadena/fragmento de diálogo" />

    <Botón
        android_id="@+id/alertdfragbutton"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_below="@+id/dfragbutton"
        android_layout_centerInParent="verdadero"
        android_text="@string/alertdialogfragment" />

</RelativeLayout>

A continuación, cree un fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre DFragment .java. Seleccione su paquete llamado com.androidbegin. dialogfragmenttutorial y haga clic en Finalizar .

Abra su DFragment .java y pegue el siguiente código.

Dfragmento .java

paquete com.androidbegin.dialogfragmenttutorial;

importar android.os.Bundle;
importar android.support.v4.app.DialogFragment;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

clase pública DFragment extiende DialogFragment {
	@Anular
	Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup,
			Paquete guardadoInstanceState) {
		Ver rootView = inflater.inflate(R.layout.dialogfragment, container,
				falso);
		getDialog().setTitle("Tutorial de fragmentos de diálogo");		
		// Hacer algo más
		volver rootView;
	}
}

A continuación, cree un diseño gráfico XML para DialogFragment. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android

Nombre su nuevo archivo XML dialogfragment.xml y pegue el siguiente código.

fragmento de diálogo .xml

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <Vista de texto
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="verdadero"
        Android: relleno = "10dp"
        android_text="@cadena/bienvenido" />

</RelativeLayout>

A continuación, cree otro fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre AlertDFragment.java. Seleccione su paquete llamado com.androidbegin. dialogfragmenttutorial y haga clic en Finalizar .

Abra su AlertDFragment .java y pegue el siguiente código.

AlertDFragmento .java

paquete com.androidbegin.dialogfragmenttutorial;

importar android.app.AlertDialog;
importar android.app.Diálogo;
importar android.content.DialogInterface;
importar android.os.Bundle;
importar android.support.v4.app.DialogFragment;

clase pública AlertDFragment extiende DialogFragment {
	@Anular
	Cuadro de diálogo público onCreateDialog (Paquete de estado de instancia guardado) {
		devolver nuevo AlertDialog.Builder(getActivity())
				// Establecer icono de diálogo
				.setIcon(R.dibujable.androidfeliz)
				// Establecer título de diálogo
				.setTitle("Fragmento de diálogo de alerta")
				// Establecer mensaje de diálogo
				.setMessage("Tutorial de fragmento de diálogo de alerta")

				// Botón positivo
				.setPositiveButton("OK", nueva DialogInterface.OnClickListener() {
					public void onClick(DialogInterface dialog, int cual) {
						// Hacer algo más
					}
				})

				// Botón negativo
				.setNegativeButton("Cancelar", nueva DialogInterface.OnClickListener() {
					public void onClick(DialogInterface dialog, int cual) {
						// Hacer algo más
					}
				}).crear();
	}
}

En este fragmento, hemos creado una alerta personalizada DialogFragment que consta de dos botones, uno positivo y uno negativo. Hemos preparado un ícono de diálogo de alerta de muestra para este tutorial. Inserte su ícono de diálogo de alerta de muestra descargado en su res > drawable-hdpi.

Icono de diálogo de alerta de muestra

[wpfilebase tag=ID de archivo=27 tpl=botón de descarga/]

A continuación, cambie el nombre y los textos de la aplicación. Abra su strings.xml en su carpeta res > valores y pegue el siguiente código.

cadenas.xml

<?versión xml="1.0" codificación="utf-8"?>
<recursos>

    <string name="app_name">Tutorial de fragmentos de diálogo</string>
    <string name="action_settings">Configuración</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="welcome">Este es un fragmento de diálogo.</string>
    <string name="dialogfragment">Abrir fragmento de diálogo</string>
    <string name="alertdialogfragment">Abrir fragmento de diálogo de alerta</string>

</recursos>

No se necesitan cambios para AndroidManifest.xml.

AndroidManifest.xml

<?versión xml="1.0" codificación="utf-8"?>
<manifiesto xmlns_android="http://schemas.android.com/apk/res/android"
    paquete="com.androidbegin.dialogfragmenttutorial"
    android_versionCode="1"
    android_versionName="1.0" >

    <usos-sdk
        android_minSdkVersion="8"
        android_targetSdkVersion="17" />

    <aplicación
        Android: permitir copia de seguridad = "verdadero"
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/AppTheme" >
        <actividad
            android_nombre=".Actividad principal"
            android_etiqueta="@cadena/nombre_aplicación" >
            <intent-filter>
                <acción android_name="android.intent.action.MAIN" />

                <categoría android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </actividad>
    </aplicación>

</manifiesto>

Producción:

Capturas de pantalla de fragmentos de diálogo

Código fuente

[purchase_link id=”8010″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]

Tutorial de fragmentos de diálogo de Android

Tal vez te interese: