Android Interface Grfica Rogelio Ferreira Escutia Interfaz Grfica

  • Slides: 19
Download presentation
“Android – Interface Gráfica” Rogelio Ferreira Escutia

“Android – Interface Gráfica” Rogelio Ferreira Escutia

Interfaz Gráfica 2

Interfaz Gráfica 2

activity_main. xml ? Entre los recursos creados por defecto, cabe destacar el layout “activity_main.

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 (editor gráfico) ? 4

activity (código xml) ? 5

activity (código xml) ? 5

Componentes 6

Componentes 6

Texto Imprime un mensaje en pantalla. ARCHIVO: activity_main. xml <Text. View android: id="@+id/Lbl. Nombre"

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

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

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:

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

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

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

Distribución de Componentes 13

Linear. Layout Nos ordena los componentes uno en seguida de otro. ARCHIVO: activity_main. xml

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

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.

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

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

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.

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