Android Fundamentos: Creando un Formulario de Usuario Sencillo

Las aplicaciones Android, a menudo dependen de datos suministrados por usuarios. Este tutotial lo guiará a través de la creación y uso de una cantidad de la mayoría de los controles utilizados para recopilar datos de los usuarios, incluyendo:

• El control EditText
• El control Spinner
• El control Checkbox
• El control Button

Por cierto, si está buscando una solución rápida, fíjese en el Formulario Dinámico Android, un plugin de un generador de un formulario dinámico disponible en Envato Market.

Para este tutorial, usted diseño e implemento un formulario dentro de su aplicación Android, la cual le permite a los usuarios suministrar comentarios importantes para los desarrolladores. Al usuario se le da un número de opciones para presentar diferentes tipos de comentarios. Entonces este comentario puede ser enviado al desarrollador como un correo. El formulario que usted creará lucirá así:

Suposiciones

Los autores están suponiendo que el lector tiene algunos conocimientos básicos de Android y, además, tienen todas las herramientas instaladas y funcionando —especialmente, Eclipse, el Android SDK y el plugin de Android ADT para Eclipse.

Los lectores, también podrían beneficiarse de leer nuestro tutorial: Consejo Rápido: Permitiendo que los Usuarios Envíen Correos desde sus Aplicaciones de Android - La Forma Fácil.

Paso 0: Creando un Sencillo Proyecto de Android

Comience con crear un nuevo proyecto de Android. Además, puede seguir usando el código fuente proporcionado como un complemento para este tutorial.

Paso 1: Diseñando el Formulario

Primero, necesitar dar algunas ideas de que tipo de datos quiere recopilar desde los usuarios. El formulario puede tener cualquier número de casillas. Considere los tipos de datos que usted quiere recopilar y elija el tipo de control apropiado. Por ejemplo:

• Para recopilar introducción de texto, use los controles EditText.
• Para limitar a los usuarios a un conjunto de respuestas fijo, use los controles Spinner, que son similares a un menú desplegable. 
• Para recopilar valores boleanos (si o no), use los controles CheckBox.
• Para permitir que los usuarios activen un evento, use los controles Button.

Para este tutorial, usted diseñará un formulario de comentarios. Este formulario recopila cinco unidades de datos de los usuarios:

• El nombre del usuario (una cadena).
• El correo del usuario (una cadena).
• El tipo de comentarios (opciones: Halago, Queja, Sugerencia o Molestia).
• El mensaje de comentario (una cadena).
• Ya sea que el usuario quiera o no una respuesta por correo (un boolean).

Paso 2: Creando el Formato del Recurso

Comience creando una composición del recurso para la pantalla del formulario. El formulario tendrá un montón de campos, los cuales podrán abarcar más que un sola pantalla (dependiendo del tamaño de la pantalla del dispositivo), así que podría considerar envolver todo el formulario dentro del control ScrollView para activar las barras deslizables.

El control ScrollView debe tener exactamente una vista menor, así que considere cual control de formato es el más apropiado para el formulario que usted quiere crear. Los formularios a menudo están dentro de un control LinearLayout alineado de forma vertical, por lo tanto, las casillas del formulario están dispuesto en forma de cascada hacia abajo de la página; uno tras otro. Además, esto ayuda a los usuarios a concentrarse en avanzar desde una casilla hacia otra de manera natural.

Un formato de formulario sencillo podría lucir así:

1

<?xml version="1.0" encoding="utf-8"?>

2

<ScrollView

3

    xmlns:android="http://schemas.android.com/apk/res/android"

4

    android:id="@+id/ScrollView01" 

5

    android:layout_width="wrap_content"

6

    android:layout_height="wrap_content" 

7

    android:scrollbars="vertical">

8

    <LinearLayout 

9

        android:layout_width="fill_parent"

10

        android:orientation="vertical" 

11

        android:layout_height="fill_parent">

12

13

<!--Put form controls here-->

14

15

    </LinearLayout>

16

</ScrollView>

Paso 3: Añada el control TextView (Descripción del formulario).

A continuación, necesita añadir un control TextView dentro del control LinearLayout. El control TextView llamado; TextViewTitle que muestra la descripción del formulario y el propósito para el usuario. Este control muestra una cadena llamada @string/feedbacktitle, que debe estar definida dentro del archivo /res/values/strings.xml

Aquí esta el XML para añadir su formato de formulario:

1

<TextView 

2

    android:id="@+id/TextViewTitle"

3

    android:layout_width="wrap_content" 

4

    android:layout_height="wrap_content"

5

    android:text="@string/feedbacktitle" 

6

    android:textSize="10pt">

7

</TextView>

Paso 4: Añada un control EditText (Nombre).

Ahora necesitar añadir su primer control EditText justo debajo del control TextView que usted creó. El control EditText llamado; EditTextName, que actúa como una casilla de formulario para el nombre del usuario. Puede usar el atributo hint para suministrar una cadena para mostrar en el control EditText cuando éste vacío (ejemplo; "Escriba su nombre aquí"). Además, puede ajustar el atributo inputType del control EditText para aplicar un nombre completamente lógico.

Aquí está el XML para añadir a su formato de formulario:

1

<EditText 

2

    android:id="@+id/EditTextName"

3

    android:layout_height="wrap_content"

4

    android:hint="@string/feedbackname"

5

    android:inputType="textPersonName"

6

    android:layout_width="fill_parent">

7

</EditText>

Paso 5: Añada otro control EditText (Email).

Después, necesita añadir su segundo control EditText justo debajo del control EditText llamado: EditTextName. Este control EditText llamado EditTextEmail, actúa como una casilla de formulario para la dirección de correo de los usuarios. Otra vez, ajuste el atributo hint para suministrar un cadena para mostrar en el control EditText cuando este vacío. Esta vez, ajuste el atributo inputType del control EditText para textEmailAddress, que hará completamente más fácil a los usuarios introducir correos.

Aquí está el XML para añadir a su formato de formulario:

1

<EditText

2

    android:id="@+id/EditTextEmail"

3

    android:layout_height="wrap_content"

4

    android:hint="@string/feedbackemail"

5

    android:inputType="textEmailAddress"

6

    android:layout_width="fill_parent">

7

</EditText>

Paso 6: Añada un control Spinner (Tipos de Comentarios).

Después, necesitar añadir un control Spinner justo debajo del control EditText que acaba de crear. El control Spinner llamado; SpinnerFeedbackType, permite a los usuarios seleccionar tipos de comentarios desde una lista arreglada de opciones (Halago, Queja, Sugerencia o Molestia).

Primero, necesitar definir estas opciones como strings individuales en el archivo recurso strings.xml.

1

<?xml version="1.0" encoding="utf-8"?>

2

<resources>

3

  <!--Other string resources also defined in this file… -->

4

	<string name="feedbacktype1">Praise</string>

5

	<string name="feedbacktype2">Gripe</string>

6

	<string name="feedbacktype3">Suggestion</string>

7

	<string name="feedbacktype4">Bug</string>

8

</resources>

Después, cree un arreglo string usando el string individual así en /res/values/arrays.xml:

1

<?xml version="1.0" encoding="utf-8"?>

2

<resources>

3

	<string-array name="feedbacktypelist">

4

		<item>@string/feedbacktype1</item>

5

		<item>@string/feedbacktype2</item>

6

		<item>@string/feedbacktype3</item>

7

		<item>@string/feedbacktype4</item>

8

	</string-array>

9

</resources>

Ahora que está listo para configurar un control Spinner en su composición de formulario. Comience suministrando el atributo prompt, que proporcionará un string auxiliar en la parte superior del control Spinner. Después, especifique la lista de opciones string usando entradas de atributos —específicamente, ajuste las entradas de los atributos para el arreglo string que usted definió: @array/feedbacktypelist.

Aquí está el XML para añadir a su formato de formulario:

1

<Spinner

2

    android:id="@+id/SpinnerFeedbackType"

3

    android:layout_height="wrap_content"

4

    android:prompt="@string/feedbacktype"

5

    android:layout_width="fill_parent"

6

    android:entries="@array/feedbacktypelist">

7

</Spinner>

Paso 7: Añada un control Multi-Line EditText (Comentario).

A continuación, necesita añadir un control EditText debajo del control Spinner. El control EditText llamado; EditTextFeedbackBody, actúa como una casilla de formulario para el texto de comentario. Nuevamente, ajuste el atributo hint para suministrar un string para mostrar en el control EditText cuando esté vacío. Esta vez usted quiere darle al usuario un espacio amplio para escribir un elogio, una queja, una sugerencia o describir errores en la aplicación. Por lo tanto, puede que quiera ajustar el atributo inputType del control EditText para textMultiLine y especificar el número de líneas para dibujar usando el atributo líneas.

Aquí está el XML para añadir a su formato de formulario:

1

<EditText

2

    android:id="@+id/EditTextFeedbackBody"

3

    android:layout_height="wrap_content"

4

    android:hint="@string/feedbackbody"

5

    android:inputType="textMultiLine" 

6

    android:lines="5"

7

    android:layout_width="fill_parent">

8

</EditText>

Paso 8: Añada un control CheckBox

Necesita añadir un control CheckBox justo debajo del control EditText que acaba de crear. Este control CheckBox llamado; CheckBoxResponse, permite a los usuarios elegir si quieren o no solicitar un respuesta por correo del desarrollador de la aplicación. Puede usar el atributo de texto para suministrar una cadena para mostrar a la par del control CheckBox.

Aquí está el XML para añadir a su formato de formulario:

1

<CheckBox

2

    android:id="@+id/CheckBoxResponse"

3

    android:layout_height="wrap_content"

4

    android:text="@string/feedbackresponse"

5

    android:layout_width="fill_parent">

6

</CheckBox>

Paso 9: Añadir un control Button

Finalmente, está listo para terminar el formulario con un control Button. Si desea tener un botón con texto sobre él entonces use el control Button, si prefiere un botón con un imagen en él entonces use el control ImageButton. Aquí usaremos el control Button. Primero, ajuste el texto en el control Button usando el atributo texto. Luego, puede registrar fácilmente un clic manual (lo opuesto a registrarlo por medio de programación en su Activity) para su control Butotn usando un atributo onClick.

Aquí está el XML para añadir a su formato de formulario:

1

<Button

2

    android:id="@+id/ButtonSendFeedback"

3

    android:layout_height="wrap_content"

4

    android:text="@string/feedbackbutton"

5

    android:onClick="sendFeedback"

6

    android:layout_width="fill_parent">

7

</Button>

¡Excelente! Ha terminado de diseñar su formulario. Ahora, todo lo que necesita hacer es implementar el método sendFeedback() en su Activity.

Paso 10: Implementar un clic controlador Button

En el control Button, usted especificó el atributo onClick como sendFeedback. Ahora necesitará implementar un método llamado sendFeedback() dentro de la clase Activity. Por ejemplo:

1

public void sendFeedback(View button) { 

2

    // Do click handling here

3

}

Paso 11: Leyendo las entradas desde los controles EditText

Ahora que su formulario está diseñado y los controles han sido implementados, usted necesita lo siguiente para recopilar los datos del formulario de las casillas individuales cuando el control Button esté activado.

Para un control EditText, use el método getText().

1

final EditText nameField = (EditText) findViewById(R.id.EditTextName);

2

String name = nameField.getText().toString();

3

4

final EditText emailField = (EditText) findViewById(R.id.EditTextEmail);

5

String email = emailField.getText().toString();

6

7

final EditText feedbackField = (EditText) findViewById(R.id.EditTextFeedbackBody);

8

String feedback = feedbackField.getText().toString();

Paso 12: Leyendo Entradas desde los controles Spinner

Su formulario incluyo un control Spinner. Use el método getSelectedItem() para leer los datos desde este control de formulario.

1

final Spinner feedbackSpinner = (Spinner) findViewById(R.id.SpinnerFeedbackType);

2

String feedbackType = feedbackSpinner.getSelectedItem().toString();

En este caso, el ítem seleccionado en el control Spinner es el String elegido por el usuario del los item seleccionados.

Paso 13: Leyendo Entradas desde los Controles CheckBox

Finalmente, su formulario incluyo control CheckBox. En este caso, el resultado es solo una marca para decirle a su aplicación si la caja fue chequeada o no.

1

final CheckBox responseCheckbox = (CheckBox) findViewById(R.id.CheckBoxResponse);

2

boolean bRequiresResponse = responseCheckbox.isChecked();

Puede usar éste valor Boolean si uste quiere en su app.

Paso 14: Generar los Detalles de Correo Apropiados

Ahora que ha conseguido todos sus datos de su formulario, está listo para elaborar un mensaje. Simplemente procese todos las casillas de datos y construya un mensaje de comentario apropiado. Por ejemplo, podría usar algunos casillas en el asunto del mensaje, y otros en el cuerpo del mensaje. Puede usar formatos de cadenas para ayudar a construir cadenas apropiadas, pero sólo los específicos, los cuales abordaremos en un tutorial próximo.

En conclusión

En este tutorial, aprendió a cómo usar varios tipos de controles de entradas para diseñar un formulario de comentarios dentro de su aplicación Android. El control EditText es versátil y poderoso, ya que permite mucho tipos diferentes de texto y de otras entradas para el formulario.  Los controles Spinner y CheckBox ayudan a limitar las entradas de los usuarios a un conjunto específico de respuestas. El control Button es una forma sencilla para generar un evento para procesar la entrada del formulario.

Hay muchos otros controles que vale la pena explorar para usar dentro de formularios. Hay muchos más que podemos tratar sobre buenos diseños de formularios, cómo los formularios se ajustan dentro del ciclo de vida del Activity y cómo los métodos de entrada y tales factores, pero por ahora, concentrémonos en ganar un buen controlador en los controles básicos de los formularios y como usarlos.

¡Esperamos que haya disfrutado este tutorial y esperamos sus comentarios!

Sobre 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. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Ellos 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.