Android Interface Grfica Rogelio Ferreira Escutia Interfaz Grfica

“Android – Interface Gráfica” Rogelio Ferreira Escutia

Interfaz Gráfica 2

activity_main. xml ? Entre los recursos creados por defecto, cabe destacar el layout “activity_main. xml”, que contiene la definición de la interfaz gráfica de la pantalla principal de la aplicación. Si hacemos doble clic sobre el fichero Eclipse nos mostrará esta interfaz en su editor gráfico (tipo arrastrar y soltar) y como podremos comprobar, en principio contiene tan sólo una etiqueta de texto centrada en pantalla con el mensaje “Hello World!”. 3

activity (editor gráfico) ? 4

activity (código xml) ? 5

Componentes 6

Texto Imprime un mensaje en pantalla. ARCHIVO: activity_main. xml <Text. View android: id="@+id/Lbl. Nombre" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/nombre" /> ARCHIVO: strings. xml <string name="text">Escribe tu nombre</string> 7

Cuadro de Texto Sirve para introducir información a un programa, como cuando nos pregunta el nombre de una persona, teléfono, etc. ARCHIVO: activity_main. xml <Edit. Text android: id="@+id/Txt. Nombre" android: layout_width="match_parent" android: layout_height="wrap_content" android: input. Type="text" /> 8

Checkbox Sirve para seleccionar alguna opción. ARCHIVO: activity_main. xml 9

Reloj Nos imprime en pantalla un reloj analógico. ARCHIVO: activity_main. xml <Analog. Clock android: layout_width="wrap_content" android: layout_height="wrap_content" /> 10

Imagen Imprime en pantalla una imagen (jpg, png, gif) ARCHIVO: activity_main. xml <Image. View android: id="@+id/Img. Foto" android: layout_width="wrap_content" android: layout_height="wrap_content" android: src="@drawable/itm" /> NOTA: La fotografía “itm. jpg” (que se encuentra aquí), deberá ser copiada dentro de la carpeta “drawable” (que no existe), dentro del directorio “res” del proyecto creado. 11

Botón Sirve para ejecutar alguna opción, como enviar datos, imprimir, etc. ARCHIVO: activity_main. xml <Button android: id="@+id/Btn. Enviar" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="@string/enviar" /> ARCHIVO: strings. xml <string name="enviar">Enviar!!!</string> 12

Distribución de Componentes 13

Linear. Layout Nos ordena los componentes uno en seguida de otro. ARCHIVO: activity_main. xml <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" xmlns: tools="http: //schemas. android. com/tools" android: id="@+id/Linear. Layout 1" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical" > </Linear. Layout> 14

Table. Layout Nos ordena los componentes en forma de una tabla. 15

Relative. Layout Nos ordena los componentes en relación a otro ó a su padre. 16

Absolute. Layout Nos ordena los componentes en forma absoluta (en una posición de coordenadas exacta). 17

Frame. Layout Permite el cambio dinámico de los componentes. 18

Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogeplus@gmail. com rferreir@itmorelia. edu. mx Página Web: http: //antares. itmorelia. edu. mx/~kaos/ http: //www. xumarhu. net/ Twitter: http: //twitter. com/rogeplus Facebook: http: //www. facebook. com/group. php? gid=155613741139728