6.9.2.-Android - Actividad Configuracion II - Creando el Layout

6.9.2.- Programación en Android – Actividad Configuración II

Creando el Layout

Una vez realizado el esquema de la actividad y añadidos los recursos, vamos a comenzar a crear el Layout.

Comenzaremos agregando el encabezado, al igual que realizamos con las otras actividades, lo único que debemos de cambiar en él es la cadena de texto que será el recurso @string/configuracion.

Creando el ScrollView

Añadiremos debajo un control de tipo ScrollView, que nos servirá para poder desplazar las opciones en caso de que no cojan en pantalla. Del ScrollView sólo se puede colgar un hijo, así que vamos a añadir un LinearLayout, ya que así podemos colgar varios objetos en él. Al ScrollView le modificaremos las siguientes propiedades:

Propiedad	Valor	Descripción
isScrollContainer	true	Para indicar que es un contenedor que se puede desplazar. Significa que se puede encoger para permitir un método de entrada.
layout_height	fill_parent	Que se ajuste el alto a la ventana padre.
layout_width	fill_parent	Que se ajuste el ancho a la ventana padre.
scrollbarAlwaysDrawVerticalTrack	true	Indica que siempre se dibuje la barra de desplazamiento vertical.
scrollbars	vertical	Que se dibuje esta barra.

A continuación modificamos el control LinearLayout que está dentro del ScrollView y ponemos su orientación a Vertical. El ancho lo pondremos igual al control padre (Layout width=fill_parent), y el alto lo será ajustable al contenido (Layout height=wrap_content). Todos los controles que añadamos ahora estarán “colgados” (serán hijos) de este LinearLayout.

Ahora en este LinearLayout, vamos a añadir las opciones de configuración, que si nos fijamos están formadas por dos controles: un control TextView y otro EditText, con la excepción de la configuración de la clave, fecha y el control spinner para el sexo, aunque siguen un esquema similar.

Primer conjunto: Nombre Jugador

Añadimos entonces un TextView para mostrar la etiqueta: nombre del jugador. A este TextView le modificamos las siguientes propiedades:

Propiedad	Valor	Descripción
ID	@+id/tV_Jugador	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_Nombre	Texto de la etiqueta.
Text Color	@color/color_Etiqueta_Configuracion	Color.
Text Size	@dimen/dim_Etiqueta_Configuracion	Tamaño del texto.

Añadimos ahora el control EditText, con las siguientes propiedades:

Propiedad	Valor	Descripción
ID	@+id/editText_Nombre	Identificador.
Input Type	textPersonName	Tipo de texto que se entrará, ayuda al método de entrada a decidir como permitir al usuario entrar el texto.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Max Lenght	25	Número máximo de carácteres.
Max Lines	1	Número máximo de líneas.
Text Color	@color/color_EditText_Configuracion	Color.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Segundo grupo: Dirección de e-mail.

A partir de aquí, repetimos estos mismos pasos para el campo de correo electrónico, añadimos un control TextView con las siguientes propiedades:

Propiedad	Valor	Descripción
ID	@+id/tV_Email	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_Email	Texto de la etiqueta.
Text Color	@color/color_Etiqueta_Configuracion	Color.
Text Size	@dimen/dim_Etiqueta_Configuracion	Tamaño del texto.

Y después un control EditText con las siguientes propiedades:

Propiedad	Valor	Descripción
ID	@+id/editText_Email	Identificador.
Input Type	textEmailAddress	Tipo de texto que se entrará, ayuda al método de entrada a decidir como permitir al usuario entrar el texto. En este caso mostrará el teclado de software que contiene la @.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Max Lines	1	Número máximo de líneas.
Text Color	@color/color_EditText_Configuracion	Color.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Grupo para la Clave

A continuación creamos el TextView para la clave, con las propiedades:

Propiedad	Valor	Descripción
ID	@+id/tV_Clave	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_Clave	Texto de la etiqueta.
Text Color	@color/color_Etiqueta_Configuracion	Color.
Text Size	@dimen/dim_Etiqueta_Configuracion	Tamaño del texto.

Como para la entrada de este campo vamos a utilizar un botón además de un TextView, vamos a crear un LinearLayout horizontal, que será el que albergue a ambos. Este LinearLayout tendrá las propiedades:

Propiedad	Valor	Descripción
Background	@color/color_Fondo_Clave_Configuracion	Color del fondo.
ID	@+id/linearLayout_Clave	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Orientation	horizontal	Orientación del Layout.

Vamos a añadir al linearLayout_Clave dos controles: un control de tipo botón (Button) y un control de tipo TextView. Con las propiedades siguientes:

Control Botón
Propiedad	Valor	Descripción
ID	@+id/boton_PonerClave	Identificador.
Layout height	wrap_content	Alto.
Layout width	wrap_content	Ancho.
Text	@string/tl_PonerClave	Texto de la etiqueta.
Text Color		Color.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Control TextView
Propiedad	Valor	Descripción
Gravity	center	Alineación.
ID	@+id/tV_EstadoClave	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_NoHayClave	Texto de la etiqueta, lo cambiaremos después en el programa.
Text Color	@color/color_Error	Color. También lo cambiaremos en el código dependiendo si es correcto o no.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Grupo Fecha de nacimiento

Repetiremos los pasos realizados para este grupo de controles en el grupo que tendrá la fecha de nacimiento. Crearemos un LinearLayout horizontal, y dentro de él un botón y un TextView que contendrá la fecha.

Control LinearLayout
Propiedad	Valor	Descripción
Background	@color/color_Fondo_Clave_Configuracion	Color del fondo.
ID	@+id/linearLayout_Fecha	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Orientation	horizontal	Orientación.

Control Botón
Propiedad	Valor	Descripción
ID	@+id/boton_PonerFecha	Identificador.
Layout height	wrap_content	Alto.
Layout width	wrap_content	Ancho.
Text	@string/tl_PonerFecha	Texto de la etiqueta.
Text Color		Color.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Control TextView
Propiedad	Valor	Descripción
Gravity	center	Alineación.
ID	@+id/tV_EstadoFecha	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_NoHayFecha	Texto de la etiqueta, lo cambiaremos después en el programa.
Text Color	@color/color_Error	Color. También lo cambiaremos en el código dependiendo si es correcto o no.
Text Size	@dimen/dim_EditText_Configuracion	Tamaño del texto.

Grupo Género

Ahora vamos a por el último control por ahora, y será el que contendrá el control spinner que nos permitirá la selección del género.

Para ello creamos un TextView con las siguientes propiedades:

Control TextView
Propiedad	Valor	Descripción
ID	@+id/tV_Genero	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.
Text	@string/tl_Genero	Texto de la etiqueta, lo cambiaremos después en el programa.
Text Color	@color/color_Etiqueta_Configuracion	Color. También lo cambiaremos en el código dependiendo si es correcto o no.
Text Size	@dimen/dim_Etiqueta_Configuracion	Tamaño del texto.

A continuación añadiremos un control de tipo spinner con las siguientes propiedades:

Control TextView
Propiedad	Valor	Descripción
Entries	@array/array_Generos	Array que contiene las entradas.
ID	@+id/spinner_Genero	Identificador.
Layout height	wrap_content	Alto.
Layout width	fill_parent	Ancho.

Toques finales.

Y hasta aquí hemos llegado, darle ahora unos pequeños toques personales, ajustar el texto, etc... en el siguiente capítulo comenzaremos a escribir el código para controlar a estos controles, valga la redundancia. ;)

Ver. 1.0 – Revisión 29/03/2012