GUI en aplicaciones Android

GUI en aplicaciones Android

DESARROLLO DE APLICACIONES MOVILES EN ANDROID

Crear proyecto Androidy su Interfaz Grfica de usuarioCREAR PROYECTO ANDROID Y SU INTERFAZYa hemos visto como crear una interface de usuario con las herramientas visuales que brinda Android. Ahora crearemos una interface mediante la escritura de cdigo dentro de la clase Activity.Crear el proyecto proyCodigo :

Escriba como nombre de paquete : auto.paq.codigoy como nombre de Activity

CodigoActivity Luego clic en el botnFinish

Asi ya tenemos el proyecto creado, abra las carpetas del proyecto como se muestra y haga visible la clase Codigoactivity :

Ejecute el proyecto y vea el efecto del mtodo setContentView(R.layout.main) :

El mensaje que se observa se debe a que en el main.xml, existe un TextView, el cual presenta en su tercer atributo(android:text), una variable de nombre hello :Esta variable hello, est definida en el archivo strings.xml. Abra este archivo, tal como se muestra y seleccione hello(String), entonces observar lo siguiente:

Que es el texto que aparece en la ejecucin:En este punto, para crear interface grafica solo por cdigo, procederemos de la siguiente manera:Abra el Activity y convierta en comentario el mtodo setContentView(R.layout.main), tal como se muestra :Y aada las siguientes tres lneas, no olvidndose de colocar el import de la librera widget para usar la clase TextView, tal como a continuacin se muestra :Ejecute el proyecto y observar :CREAR INTERFAZ DE USUARIO CON XML

En este parte aprenderemos como crear interface de usuario, trabajando directamente sobre el archivo main.xml :

Pero antes, debemos regresar al Activity y eliminar las tres ltimas lneas y adems quitar el comentario (//)Hecho esto, ejecutar nuevamente y obtendr como mensaje : Hello World, CodigoActivity, es decir el mensaje original. Ahora como algo adicional, compruebe que pasa si cambia el mensaje en el archivo strings.xml

Por ejemplo aada al final del mensaje, la palabra cambiado y entonces grabe y ejecute y observe el efecto del cambio.

Finalmente vamos a colocar cdigo en el archivo main.xml, tal como se ve abajo, aada dos TextView con sus atributos y valores indicados:

Los textos adicionales son : Trujillo capital de la primavera y donde floreci la cultura MochicaEntonces proceda a ejecutar y obtendr la siguiente salida :

Explique porque los dos textos salen centrados.

,

Oberve tambin como luce la pestaa Graphical Layout del main.xml

DIFERENCIA ENTRE fill_parent y wrap_content(estudiando el atributo layout_width)wrap_content

El componente se mostrar solo lo suficientemente ancho, como para dar cabida al texto que ira sobre l.

fill_parentEl componente se mostrar tan ancho como el ancho del contenedor que lo soporta.

Como ejercicio crear otro proyecto y probar el fill_parent y el wrap_content, con el atributo layout_heightEJERCICIO EN MODO VISUALCrear un nuevo proyecto (proyVistas), un paquete (auto.paq.vistas) y un activity (VistasActivity)Abrir el archivo main.xml

Desde la paleta de componentes (lado izquierdo) arrastrar los siguientes componentes :

ToggleButton, CheckBox, ProgressBar y RatingBar

Ahora Clic en el botn Set Horizontal Orientation

Ahora pulse el botn Set Vertical Orientation

Ahora seleccione el botn OFF y clic en el botn Toggle Fill Width

(cambiar a todo lo ancho)

Note el efecto:

Si pulsa de nuevo Toggle Fill Width observara que el botn otra vez adopta su tamao normal :Ahora seleccione la vista (componente) CheckBox y pulse el botn Change Margins . . .

Aparece una ventana, donde en el campo ALL se aplicara un margen de 20 pixeles ( 20px) :

Observe el margen (sangrado) que se ha creado:Ahora con el checkbox seleccionado abrir el combo Change Gravity y seleccionar Center HorizontalNote como queda centrado el CheckBox, adems de los mrgenes :

Bien como puede notar, existe espacio desaprovechado en la parte inferior de la pantalla y

Por otro lado, en la parte superior no aparecen los otros iconos de layout (la zona que he marcado ) : Para que aparezcan, marque cualquiera de las vistas (por ejemplo el CheckBox) para hacer visibles los iconos de layout :Ahora pique el icono Distribute Weights Evenly a fin de redistribuir las vistas sobre la pantalla:

Note como se han redistribuido las vistas para ocupar toda la pantalla:

Otra vez amplie el botn OFF y el checkBox, haciendo clic en el icono toggle fill widthAhora vamos a trabajar con la proporcionalidad de las vistas, as seleccione el CheckBox y haga clic en el icono Change layout Weight y asigne un peso de 1 :

Repita lo mismo para la vista ProgressBar y le asigna un peso de 4:Comentarios . . . ?

PROPIEDADES

Seleccione la vista CheckBox y vea en la parte inferior del Eclipse la barra de propiedades:Busque la propiedad text y sustituya el valor ChewckBox por Guardar datos del usuario

Hecho lo indicado, note como cambia la distribucin de componentes . . . . . . . . ahora se muestra horizontal

Note como la distribucin de componentes vuelve a ser vertical

Ing. Juan Vera CastilloPgina 6