Diseño de Interfaz de Usuario Android: Confirmación de Contraseña

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Hay numerosos tipos de dialogs disponibles dentro de Android SDK, tal como DatePickerDialogs, ProgressDialogs y dialogs genéricos como AlertDialogs. Además, usted puede crear sus propios dialogs personalizados para usarlos dentro de sus aplicaciones.

Los dialogs personalizados como un dialog para una confirmación de contraseña (Figura 1) son generados desde una clase especial AlertDialog (android.app.AlertDialog). El aspecto personalizado de los dialogs viene del hecho que en lugar de usar los tipos de dialogs incorporados, con sus layouts por defecto, en lugar de eso usted carga un layout definido por el programador para usarlo. En este tutorial, proporcionamos los pasos que se requieren para implementar el dialog personalizado para confirmación de contraseña para recopilar una nueva contraseña de parte del usuario.

Pre-Requisito: Dialog Básicos

Ya hemos discutido sobre como añadir controles basic dialog a sus clases Activity. Este tutorial se basa en su conocimiento sobre el tutorial Diseño de Interfaz de Usuario Android: Trabajando con Dialogs. Usted puede añadir este dialog al dialog de la aplicación de muestra proporcionado en el tutorial que mencionamos anteriormente o crear su propia aplicación.

Paso 1: Diseño de Dialog Layout personalizado

Primero, necesitar diseñar el contenido de sus dialog personalizado en un archivo layout resource. En este caso, nuestro layout personalizado será un dialog para la confirmación de contraseña, lo que significa que necesitaremos dos controles EditText para el ingreso de la contraseña. Además, queremos otros controles de texto para las etiquetas.

Haga un layour resource llamado /res/layout/password_dialog.xml. Los contenidos del archivo resource se muestran a continuación:


<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:id="@+id/root"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView_Pwd1"
        android:text="@string/settings_password"
        android:textStyle="bold" />
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/EditText_Pwd1"
        android:inputType="textPassword" />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView_Pwd2"
        android:text="@string/settings_password2"
        android:textStyle="bold" />
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/EditText_Pwd2"
        android:inputType="textPassword" />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/TextView_PwdProblem"
        android:textStyle="bold"
        android:gravity="center" />
</LinearLayout>

Este sencillo archivo layout depende de otros string resources que necesitará definir (etiquetas, ver el recurso de código completo para detalles si necesita ayuda definiendo un string resources) así como también el tipo de atributo de la entrada para el EditText llamada textPassword, que oculta la contraseña cuando es tecleada en el control. Esta figura muestra cómo luce el diseño del layout:

Paso 2: Define un Nuevo Dialog Contraseña dentro de su Clase Activity

Ahora vamos añadir el nuevo Dialog a su clase Activity.

Comience editando su clase Activity y añada las siguientes variables:

1
2	private static final int MY_PASSWORD_DIALOG_ID = 4;

Esto define un identificador Dialog único para nuestra clase Activity. El valor es un número arbitrario, pero necesita ser único dentro del Activity.

Paso 3: Hinchar el Dialog Layout personalizado

Para crear instancias de Dialog, usted debe proporcionar un argumento para su dialog de confirmación de contraseña personalizado en el método onCreateDialog() de su clase Activity. Cuando es llamado el método showDialog(), éste activa una llamada a este método, que debe devolver la instancia Dialog apropiada. Por lo tanto, comenzamos con la declaración de argumento para su nuevo Dialog dentro del método onCreateDialog() para exagerar nuestro archivo layout personalizado que fue diseñado en el paso anterior y extraer los controles importantes con los que queremos interactuar desde la parte interior usando el método findViewById().


case MY_PASSWORD_DIALOG_ID:
       LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
             
       final View layout = inflater.inflate(R.layout.password_dialog, (ViewGroup) findViewById(R.id.root));
       final EditText password1 = (EditText) layout.findViewById(R.id.EditText_Pwd1);
       final EditText password2 = (EditText) layout.findViewById(R.id.EditText_Pwd2);
       final TextView error = (TextView) layout.findViewById(R.id.TextView_PwdProblem);
                  
       // TODO: Create Dialog here and return it (see subsequent steps)

Como puede ver, agarramos los dos controles EditText que guardan los datos de la contraseña, así como también el control TextView donde podemos mostrar los textos para los errores de la contraseña (la contraseña puede coincidir o no).

Paso 4: Implemente el Password TextWatcher

El siguiente paso de nuestra implementación de declaración de argumento onCreateDialog() para un dialog personalizado es registrar un TextWatcher en el segundo control EditText para que podemos escuchar y detectar que las contraseñas coinciden cuando el usuario las tecleo para mostrar el string de texto apropiado en el control de error TextView (si coincide o no).

Aquí está la implementación del TextWatcher, el cual es asignado al segundo control de contraseña EditText usando el método addTextChangedListener().


password2.addTextChangedListener(new TextWatcher() {
   public void afterTextChanged(Editable s) {
      String strPass1 = password1.getText().toString();
      String strPass2 = password2.getText().toString();
      if (strPass1.equals(strPass2)) {
         error.setText(R.string.settings_pwd_equal);
      } else {
         error.setText(R.string.settings_pwd_not_equal);
      }
   }

   public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
   public void onTextChanged(CharSequence s, int start, int before, int count) {}
 });

El método TextWatcher tiene tres devoluciones de métodos, pero, en realidad, solamente estamos interesados en la implementación del método afterTextChanged(). Aquí revisamos el texto de los dos controles EditText, los comparamos y configuramos el texto de error en el control TextView. Así es como podría verse el TextWatcher cuando la contraseña coincide:

Password Confirmation Dialog (Passwords Match)

Paso 5: Use el Dialog Builder para Configurar el Dialog

El siguiente paso de nuestra implementación de declaración de argumento onCreateDialog() para el dialog personalizado de confirmación de contraseña es usar la clase AlertDialog.Builder para comenzar a configurar las configuraciones dialog.

1
2	AlertDialog.Builder builder = new AlertDialog.Builder(this);
3	builder.setTitle("Enter Password");
4	builder.setView(layout);

Ajustamos el título del dialog usando el método setTitle(), pero lo más importante que hacemos aquí es usar el método setView() para adjuntar nuestro layout personalizado solamente exageramos el dialog. Así es como modificamos los controles usados dentro de nuestro dialog, que haga contar que tiene una pantalla personalizada y un funcionamiento definido por el programador.

Paso 6: Configure los controladores de los botones Positivo y Negativo para el Password Dialog personalizado

Después, necesitamos configurar los botones positivos y negativos asociados con nuestro dialog. Recuerde que los dialogs será reutilizados si se muestran más de una vez. Con nuestro dialog de confirmación de contraseña, queremos asegurarnos de eliminar los dialog desde los dialog de la Activity para que este no se vuelva usar. No queremos ningún residuo de información de contraseña que está siendo guardada después de que nuestro dialog de contraseña es descartado.


builder.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
   public void onClick(DialogInterface dialog, int whichButton) {
      removeDialog(MY_PASSWORD_DIALOG_ID);
   }
});
         
builder.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
   public void onClick(DialogInterface dialog, int which) {
      String strPassword1 = password1.getText().toString();
      String strPassword2 = password2.getText().toString();
      if (strPassword1.equals(strPassword2)) {
         Toast.makeText(SuperSimpleDialogsActivity.this, 
            "Matching passwords="+strPassword2, Toast.LENGTH_SHORT).show();
      } 
      removeDialog(MY_PASSWORD_DIALOG_ID);
   }
});

Quitamos del dialog tanto los botones positivos como negativos y los controladores de clic usando el método removeDialog(). Sin embargo, en el controlador del botón positivo, también recuperamos contenidos de los controles EditText y, si coinciden, mostramos la contraseña como un mensaje Toast. En la mayoría de los casos, usted no usaría un Toast, pero ahorrará la contraseña usando el método de su elección (preferencias, etc).

Paso 7: Generar el AlertDialog personalizado desde el Builder

Su dialog está completamente configurado. Ahora use el método create() de la clase AlertDialog.Builder para generar el AlertDialog apropiado y devuélvalo, así terminamos su declaración de argumento para este dialog dentro del método onCreateDialog() de la clase Activity.

1
2	AlertDialog passwordDialog = builder.create();
3	return passwordDialog;

Paso 8: Activando el Dialog de Confirmación de Contraseña

Finalmente, está listo para activar su dialog de confirmación de contraseña para mostrarlo cuando sea requerido. Por ejemplo, usted podría añadir otro control Button a la pantalla de su Activity para activar su dialog y así mostrarlo. Su controlador de clic podría verse de ésta manera:

1
2	public void onPasswordDialogButtonClick(View v) {
3	showDialog(MY_PASSWORD_DIALOG_ID);
4	}

En conclusión

Los dialogs, son potentes herramientas de la interfaz de usuario que puede ayudarle a mantener su aplicación de interfaz de usuario flexible y ordenada. Los dialogs, contienen sus propios layout resources con diferentes controles, permitiéndole crear controles personalizados como dialogs de confirmación de contraseña. Los dialogs personalizados son, por lo general, creado usando la clase AlertDialog, con todas sus funciones.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas, segunda edición. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.