Interfaces de usuario [Desarrollo de aplicaciones para Android]

Transcripción

1 Interfaces de usuario [Desarrollo de aplicaciones para Android] M. en C. Sergio Luis Pérez Pérez UAM CUAJIMALPA, MÉXICO, D. F. Trimestre 14-P Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 1 / 80

2 Diseño de la interfaz de usuario 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 2 / 80

3 Diseño de la interfaz de usuario I Para diseñar interfaces en Android se utiliza esencialmente XML (extensible Markup Language). También es posible hacerlo desde código Java aunque es menos común. La interfaz de usuario de Android está basada en una jerarquía de objetos que heredan de la clase View. Context es una clase que es un manejador del sistema que proporciona servicios como la resolución de recursos, accesos a bases de datos y preferencias. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 3 / 80

4 Diseño de la interfaz de usuario II Algunos constructores de objetos (como TextView) aceptan una instancia de la clase Context. Activity es una clase hija de Context. Actividad: Crear un proyecto sencillo. Ver figura 3. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 4 / 80

5 Diseño de la interfaz de usuario III Actividad principal creada por defecto Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 5 / 80

6 Diseño de la interfaz de usuario IV El método setcontentview() indica a la vista la visualización de una actividad. La otra forma de diseñar la interfaz es modificando el archivo que se encuentra en res/layout/activity main.xml. Dicho archivo contiene la definición XML de la interfaz mediante el elemento RelativeLayout. Dentro del elemento de tipo RelativeLayout se pueden contener otros elementos de tipo View. Algunos atributos de RelativeLayout son: xmlns:android y xmlns:tools. Son las definiciones de los espacios de nombres de XML y sólo se especifican una vez. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 6 / 80

7 Diseño de la interfaz de usuario V android:layout width y android:layout height. Indican el ancho y alto de la vista. El valor match parent indica que se utilizará toda la pantalla. Para poner una etiqueta de texto mediante XML se utiliza un componente de tipo TextView. Algunos de sus atributos son: android:layout width y android:layout height. Indican el ancho y alto de la vista. El valor wrap content indica que el tamaño se ajustará al contenido. android:layout centerhorizontal y android:layout centervertical. Indican la posición relativa a lo ancho y alto de este elemento respecto del que lo contiene. El valor true indica que el elemento será centrado. variable. Muestra la referencia al string con el nombre indicado. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 7 / 80

8 Diseño de la interfaz de usuario VI Las referencias a strings se encuentran el archivo res/values/strings.xml. De manera que todos los archivos layout permiten definir la interfaz y los archivos strings permiten introducir los textos. R.layout.activity main indica que un objeto View será creado en tiempo de ejecución a partir del archivo activity main.xml. Realizar el diseño en base a los archivos XML es igualmente rápido pero requiere menos memoria. El plug-in de Eclipse es el que crea automáticamente estas referencias en la clase R, la cual se encuentra en gen/com.example.holamundo/r.java. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 8 / 80

9 Diseño de la interfaz de usuario VII Cómo realizar el diseño desde el XML? I El archivo activity main.xml permite dos tipos de diseño: por código XML y de forma visual (Graphical Layout). El menú que se encuentra en la parte superior de Graphical Layout contiene las siguientes opciones: Opciones de pre-visualización en fase de diseño. Tipo de dispositivo. Orientación horizontal. Como se vería la vista después de la aplicación de un tema. La actividad asociada. La configuración regional. La versión de Android. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 9 / 80

10 Diseño de la interfaz de usuario VIII Cómo realizar el diseño desde el XML? II La paleta o marco de la izquierda permite la inserción de nuevas vistas al layout. El conjunto de funcionalidades disponibles se divide en: Form Widgets: Que contiene diferentes objetos útiles para los formularios, desde etiquetas hasta botones y barras de progreso. Text Fields: Que contiene una gran variedad de campos para la captura de datos. Layout: Que contiene los diferentes tipos de gestores de disposición disponibles. Composite: Que permite la inserción de hojas de cálculo, listas, barras de desplazamiento y otros atributos más sofisticados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 10 / 80

11 Diseño de la interfaz de usuario IX Cómo realizar el diseño desde el XML? III Images & media: Que permite la inserción de imágenes y vídeo en la actividad actual. Time & Date: Que contiene elementos para el control del tiempo a través de relojes. Transitions: Que permite la inclusión de transiciones en las vistas. Advanced: Para funcionalidades más avanzadas como los controles de zoom. Custom & Library Views: Contiene las vistas creadas por los desarrolladores. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 11 / 80

12 Diseño de la interfaz de usuario X Ejercicio Mis Vistas: 1 Crear un proyecto llamado MisVistas dejando los valores por defecto. 2 Abrir el archivo res/layout/activity main.xml. 3 En el marco de la derecha (Outline) presionar el botón derecho y elegir la opción Change Layout y seleccionamos la opción LinearLayout (Vertical). 4 Desde la paleta de opciones del lado izquierdo (Palette), desde la opción Form Widget escoger los siguientes elementos: ToggleButton, CheckBox, ProgressBar (Large) y RatingBar. 5 Eliminar la opción que estaba ya creada al generar el proyecto, es decir el TextView que contiene el mensaje de Hello World!. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 12 / 80

13 Diseño de la interfaz de usuario XI 6 Seleccionar la vista ToggleButton y presionar el botón Toggle Fill Width que se encuentra en la parte superior de la actividad (denotado por ). Esta vista deberá abarcar ahora todo el ancho de pantalla. Lo mismo (verticalmente) ocurre con la opción Toggle Fill Height. 7 Seleccionar la vista CheckBox y seleccionar el botón Change Margins. Éste nos permite modificar los márgenes del contenedor de una vista. 8 El siguiente botón Change Gravity nos permite ubicar la vista en alguna posición dentro del contenedor en que se encuentra. 9 Luego el botón Distribute Weights Evenly nos permite distribuir las vistas de forma equitativa a lo largo de la actividad. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 13 / 80

14 Diseño de la interfaz de usuario XII 10 Luego el botón Assign All Weights dibuja a los elementos no seleccionados en su tamaño original y al seleccionado lo hace que abarque el resto de la actividad. 11 Luego el botón Change Layout Weight permite proporcionar un peso específico para cada vista. El valor por defecto es 1. Valores mayores a 1 incrementan la escala y menores la reducen. 12 Los últimos botones son para el zoom. 13 Seleccionar la vista CheckBox y en propiedades modificar el campo Text. Esencialmente este campo coloca una etiqueta para la vista. 14 Finalmente ejecutar la aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 14 / 80

15 Diseño de la interfaz de usuario XIII Medidas más comunes para el manejo de tamaños de las vistas px: Son los píxeles representados en pantalla. mm: Es la distancia real sobre la pantalla medida en milímetros. in: Es la distancia real sobre la pantalla medida en pulgadas. pt: Equivale a 1/72 pulgadas. dp: Son los píxeles independientes de la densidad suponiendo 160 píxeles por pulgada. De este modo 160 dp equivale a 1 pulgada en cualquier dispositivo. sp: Son los píxeles escalados pero considerando el tamaño de fuente que el usuario haya seleccionado en sus preferencias. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 15 / 80

16 Gestores de disposición Gestores de disposición 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 16 / 80

17 Gestores de disposición Gestores de disposición I Los gestores de disposición (layout) más utilizados son: LinearLayout: Coloca los elementos en una fila o en una columna. TableLayout: Coloca los elementos en forma tabular. RelativeLayout: Coloca los elementos conforme a otros o a su padre. AbsoluteLayout: Coloca los elementos de forma absoluta. FrameLayout: Permite el cambio dinámico de los elementos. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 17 / 80

18 Gestores de disposición II Gestores de disposición Se puede encontrar mas información acerca de estos layout en Algunos otros tipos de layout son: ScrollView: Coloca los elementos en forma de columna y cuando ya no caben los desplaza verticalmente. HorizontalScrollView: Coloca los elementos en forma de filas y cuando ya no caben los desplaza horizontalmente. TabHost: Provee un conjunto de ventanas seleccionables por medio de etiquetas. ListView: Muestra una lista vertical deslizable de varios elementos. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 18 / 80

19 Gestores de disposición Gestores de disposición III GridView: Muestra una cuadrícula deslizable. ViewFlipper: Muestra los elementos de forma deslizable pero uno a la vez. Cómo hacer frente a la posición en que se encuentra el dispositivo (horizontal-vertical)? Para ello existe el concepto de recursos alternativos. Ejercicio Juego: 1 Crear un proyecto llamado Juego que soporte al menos la API 8 y que el nombre de actividad sea Inicio y el del layout sea main. 2 Abrir el archivo res/layout/main.xml y crear una actividad que contenga un TextView y cuatro botones y simulen ser el inicio de un juego. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 19 / 80

20 Gestores de disposición IV Gestores de disposición 3 Su aplicación se debe ver mas o menos como la siguiente imagen. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 20 / 80

21 Gestores de disposición V Gestores de disposición 4 Ejecutar la aplicación y luego presionar CTRL+F11. Se sigue viendo bien su aplicación? Aunque esto puede depender del tamaño de la pantalla del dispositivo es posible tener una vista alterna dependiendo de la orientación del dispositivo. 5 Dentro del directorio res crear el directorio layout-land. 6 Copiar el archivo main.xml del directorio layout en este nuevo directorio. 7 Crear una vista similar pero ahora utilizando TableLayout para colocar dentro los botones y todo dentro del LinearLayout. El TextView sólo queda dentro del LinearLayout. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 21 / 80

22 Gestores de disposición VI Gestores de disposición 8 En TableLayout el atributo stretchcolumns permite que el ancho sobrante se asigne a una columna en específico (iniciando en 0) o bien se distribuya entre todas con *. Fue necesario hacer algo especial en la aplicación para indicarle que horizontalmente se debía utilizar el otro layout? En Android es muy fácil expresar los recursos alternos mediante el simple uso de sufijos. Se pueden expresar recursos alternos para la orientación del dispositivo, el lenguaje, la región, la resolución, el método de entrada, entre otros. 9 Crear el directorio values-en dentro del directorio res. 10 Copiar el archivo strings.xml del directorio values en este nuevo directorio. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 22 / 80

23 Gestores de disposición VII Gestores de disposición 11 Traducir todos los nombres de variables dentro del archivo copiado. 12 Ejecutar la aplicación. Qué es lo que sucede? 13 Para cambiar nuevamente de idioma debemos irnos a Ajustes (del dispositivo que esta siendo emulado) y luego buscar la opción de Idioma y teclado. 14 Seleccionar un nuevo idioma y luego ejecutar la aplicación. 15 La lista completa de sufijos la podemos encontrar en Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 23 / 80

24 Tipos de recursos Diseño de la interfaz de usuario Tipos de recursos 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 24 / 80

25 Tipos de recursos I Diseño de la interfaz de usuario Tipos de recursos La definición de recursos permite a separar el trabajo de los diseñadores gráficos del trabajo de los programadores. Un recurso es una característica o elemento que se quiere agregar a la aplicación. Para agregar recursos simplemente se agregan los archivos dentro de ciertos directorios de la aplicación. Los tipos de recursos, todos ellos ubicados en el directorio res, son: drawable: Contiene los archivos de imágenes (PNG, JPEG, GIF) y los XML con los descriptores gráficos. layout: Contiene los layout utilizados en la aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 25 / 80

26 Tipos de recursos II Tipos de recursos menu: Contiene los descriptores de menús asociados a las actividades. anim: Permite definir las animaciones Tween para vistas. animator: Contiene los descriptores para modificar las propiedades de un objeto a lo largo del tiempo pero sólo para la versión 3.0 en adelante. xml: Contiene los archivos de preferencias. raw: Para los archivos de audio y vídeo y en general todo lo que no es un archivo binario. values: Son los archivos para definir estilos, cadenas, colores, etc. Algunos valores de uso frecuente son: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 26 / 80

27 Tipos de recursos III Tipos de recursos string: <string name= variable >Texto< /string >. Debe ir en strings.xml. color: <color name= nombre color >#RGB, #ARGB, #RRGGBB o #AARRGGBB,< /color >. Debe ir en colors.xml. dimen: <dimen name= nombre color >Un número seguido de una unidad de medida px, mm, in, pt, dp, sp< /dimen >. Debe ir en dimens.xml. style: <style name= texto mediano ><item name= android:textsize > 12pt</item></style>. Debe ir en styles.xml. int: <integer name= numero >31416</integer>. Debe ir en styles.xml. bool: <bool name= booleano >true</bool>. Debe ir en styles.xml. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 27 / 80

28 Tipos de recursos IV Tipos de recursos id: <item type= id name= objeto >nombre objeto</item>. Debe ir en styles.xml. array: <string-array name= meses > <item>enero</item> </string-array>. <integer-array name= fibonacci > <item>0</item><item> 1 </item> </integer-array>. <array name= nombre arreglo > <item>@drawable/imagen1</item> </array> Debe ir en styles.xml. Una vez que es creado un recurso, éste puede ser accedido desde documentos XML o desde Java. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 28 / 80

29 Tipos de recursos Tipos de recursos V Desde XML deben ser referenciados utilizando la siguiente recurso/nombre recurso Desde Java se utiliza la siguiente sintaxis: R.tipo recurso.nombre recurso Por otro lado existen ya algunos recursos predefinidos para Android y se encuentran en la clase Android.R. Algunos ejemplos de estos recursos son: android.r.drawable.ic menu menu edit android.r.style.teme Panel.@android:style/Teme Panel Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 29 / 80

30 Estilos y temas Diseño de la interfaz de usuario Estilos y temas 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 30 / 80

31 Estilos y temas I Diseño de la interfaz de usuario Estilos y temas Un estilo es un conjunto de características que definen el formato de una vista. Ejemplos son el tamaño, los márgenes, el color, las fuentes, entre otros. Los estilos serán colocados en el archivo res/values/styles.xml. Una vez creado el recurso se referencia como cualquier otro. Los estilos pueden heredar las propiedades de un padre mediante el uso de parent. Un ejemplo de un estilo sería: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 31 / 80

32 Estilos y temas II Diseño de la interfaz de usuario Estilos y temas <?xml version= 1.0 encoding= utf-8?> <resources> <style name= MiPrimerEstilo > <item name= android:layout width >fill parent</item> <item name= android:textcolor >#00FF00</item> <item name= android:typeface >monospace</item> <item name= android:textsize >12pt</item> </style> </resources> <TextView android:text= Texto /> Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 32 / 80

33 Estilos y temas Estilos y temas III Para heredar de estilos propios simplemente se utiliza el operador punto (.). <style name= MiPrimerEstilo.grande > <item name= android:textsize >18pt</item> </style> <style name= MiPrimerEstilo.grande.resaltado > <item name= android:textstyle > bold </item> </style> Dependiendo la vista a la que se aplique el estilo, puede suceder que algunos atributos no sean compatibles. Un tema es como un estilo pero se aplica a toda una actividad. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 33 / 80

34 Estilos y temas Estilos y temas IV Los temas también deben ser ubicados en el archivo res/values/styles.xml. Si se desea que un mismo tema se utilice para toda la aplicación entonces se debe editar el archivo AndroidManifest.xml. <application > Si se desea que un tema se utilice para una sola actividad entonces se debe editar la actividad. <activity > En se pueden encontrar algunos estilos y temas ya predefinidos que pueden ser utilizados en nuestras aplicaciones. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 34 / 80

35 Estilos y temas V Diseño de la interfaz de usuario Estilos y temas Para utilizar uno de los temas del sitio referenciado se debe tener en cuenta que el nombre del tema que aparece all, por ejemplo Theme Black NoTitleBar, debe ser referenciado en el archivo XML manifest Por ejemplo: <activity > < /activity> Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 35 / 80

36 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 36 / 80

37 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas I Las vistas pueden ser modificadas por medio de los XML o bien de código Java. Ejercicio: Añadiendo gráficos a un botón (tomado del libro: El Gran Libro de Android). 1 Crear un proyecto llamado OtrasVistas y nombrar a la actividad principal OtrasVistasActivity y al Layout main. 2 En el directorio res crear el directorio drawable y dentro de éste crear un archivo llamado boton.xml. Para crear el archivo nos vamos al menú File>New>Android XML File. 3 Reemplazamos el código que aparece por defecto en el archivo boton.xml por el que se presenta a continuación: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 37 / 80

38 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas II <?xml version= 1.0 encoding= utf-8? > <selector xmlns:android= > <item pulsado android:state pressed= true / > <item con foco android:state focused= true / > <item normal / > </selector> El orden en que se acomodan los item es importante pues cuando se accede a la vista que tendrá estas propiedades el código xml es recorrido de arriba hacia abajo y entra la primer condición item que se cumpla. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 38 / 80

39 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas III 4 Copie las siguientes imágenes en el directorio res/drawable y utilice los nombres botonpulsado, botonconfoco y botonnormal respectivamente. 5 Elimine el TextView que se encuentra en el archivo res/layout/main.xml. 6 Cambie el layout a un LinearLayout y elija un atributo Background = #FFFFFF para éste. 7 Coloque una vista de tipo Botton dentro del nuevo layout. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 39 / 80

40 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas IV 8 En las opciones de propiedades, en View, opción Background presione el botón... y en el recuadro que aparece seleccione Drawable/boton. 9 Elimine el texto del botón. 10 En el atributo onclick escriba la palabra sepresiona. 11 Introduzca el siguiente código en el archivo principal.java (OtrasVistasActivity.java). public void sepresiona(view view){ Toast.makeText(this, Presionado, Toast.LENGTH SHORT).show(); } 12 Ejecute la aplicación y observe los resultados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 40 / 80

41 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas V 13 Estando en el layout main.xml, dentro de la paleta de vistas elija Text Fields y arrastre a encima del botón una vista Number (Decimal). 14 Modifique o agregue los siguientes atributos: y android:hint= Introduce un número. 15 Agregue un botón y modifique algunos de sus atributos: android:layout width= match parent boton. 16 Del tipo de vistas Form Widgets elija una vista Large Text y agregue esta al layout main.xml. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 41 / 80

42 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas VI 17 Modifique los siguientes atributos del Large Text: android:textcolor= #0000FF, resultado. 18 Dentro del código java principal agregue las variables EditText entrada y TextView salida somo globales a la clase. 19 Para crear los objetos correspondientes del lado del código java hacemos algo como lo siguiente: entrada = (EditText) findviewbyid(r.id.entrada); salida = (TextView) findviewbyid(r.id.salida); 20 Agregamos las líneas anteriores en el método principal oncreate. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 42 / 80

43 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas VII 21 Agregamos al atributo onclick lo siguiente: android:onclick= sepresiona0 del botón que contiene al cero (el último creado). 22 Agregamos el siguiente método en el código Java. public void sepresiona0(view view){ entrada.settext(entrada.gettext()+(string)view.gettag()); } 23 Agregamos al botón el atributo: android:tag= 0. Qué ocurre al presionar el botón? 24 Finalmente, en el botón rojo agregue la siguiente línea: salida.settext( String.valueOf(Float.parseFloat(entrada.getText().toString()))); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 43 / 80

44 Uso de TabHost Diseño de la interfaz de usuario Uso de TabHost 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 44 / 80

45 Uso de TabHost I Diseño de la interfaz de usuario Uso de TabHost TabHost permite la creación de interfaces de usuario con pestañas. El layout TabHost será el nodo raíz del diseño y contendrá a TabWidget para la visualización de las pestañas y FrameLayout para mostrar el contenido de las pestañas. El contenido de las pestañas puede ser para intercambiar puntos de vista en una misma actividad o bien entre diferentes actividades. Para hacer pestañas con diferentes actividades puede consultar Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 45 / 80

46 Uso de TabHost Uso de TabHost II La estructura debe ser como sigue: <TabHost > <LinearLayout > <TabWidget > <FrameLayout > <PrimerLayout > <SegundoLayout > <TercerLayout > < /FrameLayout> < /LinearLayout> < /TabHost> Ejemplo de una aplicación con TabHost (tomado del libro: El Gran Libro de Android): 1 Cree un proyecto llamado TabHost. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 46 / 80

47 Uso de TabHost III Diseño de la interfaz de usuario Uso de TabHost 2 Reemplace el código del layout principal con el que se encuentra en el sitio de este curso sperez/cursos/ui/tabhost.xml y coloque este otro en res/values/strings.xml sperez/cursos/ui/strings.xml. 3 También se requiere cierto código Java para que el TabHost funcione. 1 La clase principal deberá heredar de TabActivity, sin embargo esta clase es obsoleta a partir de las versiones 4.X de Android. 2 Se crea una instancia de la clase TabHost inicializándose con el método gettabhost(). 3 Mediante el método addtab() de la clase TabHost se deben agregar las pestañas. TabHost tabhost = gettabhost(); tabhost.addtab(tabhost.newtabspec( tab1 ).setindicator( Titulo Primer Tab o ícono, null).setcontent(r.id.tabnombre)); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 47 / 80

48 Uso de TabHost IV Diseño de la interfaz de usuario Uso de TabHost 4 Ejecute la aplicación y observe los resultados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 48 / 80

49 Actividades e intenciones Actividades e intenciones 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 49 / 80

50 Actividades e intenciones I Actividades e intenciones Una actividad en Android es equivalente a lo que conocemos como ventanas. Lo ideal es asociar una clase por actividad. Todas las actividades que se desarrollen deben heredar de Activity. Los pasos generales para crear nuevas actividades son: 1 Crear un nuevo layout para la actividad que se desea crear. 2 Crear una nueva clase descendiente de Activity. 3 Asociar el layout creado a la nueva clase. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 50 / 80

51 Actividades e intenciones II Actividades e intenciones 4 Activar la nueva actividad desde alguna otra actividad (si es que no es la principal). 5 Registrar la nueva actividad en el archivo AndroidManifest.xml. Para realizar la comunicación entre actividades se utilizan instancias de intenciones, que se realizan mediante la clase Itent. Para enviar datos de una actividad a otra se utiliza el método putextra de la clase Intent. Intent nueva intencion = new Intent(this, ActividadALanzar.class); nueva intencion.putextra( nombre dato, valor dato ) startactivity(nueva intencion); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 51 / 80

52 Actividades e intenciones III Actividades e intenciones La actividad que recibe los datos requiere una instancia de la clase Bundle. Para obtener los datos que vengan de otra actividad se utilizará el método gettipodedato de la clase Bundle. Bundle extras = getintent().getextras(); TipoDeDato dato = extras.gettipodedato( nombre dato ); La actividad lanzada también puede devolver datos a la que la invocó, una vez que termine. Del lado de la actividad lanzadora se utiliza el método startactivityforresult en lugar del método startactivity. Intent nueva intencion = new Intent(this, ActividadALanzar.class); startactivityforresult(nueva intencion, codigodesolicitud); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 52 / 80

53 Actividades e intenciones IV Actividades e intenciones Además se sobre-escribe el método onactivityresult, protected void onactivityresult(int requestcode, int resultcode, Intent data){ if(requestcode == codigodesolicitud && resultcode == RESULT OK){ TipoDeDato dato = data.getextras().gettipodedato( dato ); } } Finalmente, en alguna parte de la actividad llamada se debe utilizar un código como el siguiente: public void regresardeactividad(view V){ Intent intencionregreso = new Intent(); intencionregreso.putextra( dato, valor dato ); setresult(result OK, intencionregreso); finish();} Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 53 / 80

54 Actividades e intenciones Actividades e intenciones V Ejercicio: crear una actividad que se visualice al pulsar un botón de otra actividad. 1 Cree una aplicación de Android que contenga al menos un botón o bien utilice una que ya tenga creada. 2 En el directorio res/layout crear un nuevo archivo Android XML file con el nombre que prefiera y que contenga a una vista de tipo TextView. 3 Agregue los atributos de id y text a la vista TextView en el xml. 4 Cree una nueva clase, llamada AcercaDe, para asociarla con dicha actividad. Dicha clase deberá heredar de Activity y sobre-escribir el método oncreate. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 54 / 80

55 Actividades e intenciones VI Actividades e intenciones 5 En la clase principal de la aplicación agregue un método que será asociado a un botón que, al presionarse, lanzará la actividad creada. Para ello requerirá crear una instancia de tipo Intent. public void mostraracercade(view view){ Intent nueva intencion = new Intent(this, AcercaDe.class); startactivity(nueva intencion); } 6 Asocie el evento onclick de algún botón al método creado (android:onclick= mostraracercade ). 7 Luego registre la nueva actividad creada en el archivo AndroidManifest.xml. 1 En el archivo AndroidManifest.xml seleccione la pestaña de Application. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 55 / 80

56 Actividades e intenciones VII Actividades e intenciones 2 En la opción de Application Nodes presione el botón de agregar (Add). 3 Rellene los campos necesarios (al menos el campo Name y opcionalmente Theme y Label) y guarde los cambios. 8 Ejecute la aplicación y observe los resultados. 9 Realice lo mismo ahora con otro botón y con una nueva actividad, pero ahora debe enviar datos a la actividad lanzada y recibir datos al finalizar ésta. 10 Ejecute la aplicación y observe los resultados. 11 Finalmente, realice un método escuchador por código para algún botón, el cual permita finalizar la aplicación. Para ello realice los siguientes pasos: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 56 / 80

57 Actividades e intenciones VIII Actividades e intenciones Cree un botón en la actividad principal llamado Salir. Cree un método llamado finalizar que implemente la interfaz escuchadora del botón Salir. public void salirdeactividad(int referencia){ Button boton = (Button) findviewbyid(referencia); boton.setonclicklistener(new public void onclick(view v) { finish(); } }); } Dentro del método oncreate mande llamar el método creado (por ejemplo: salirdeactividad(r.id.boton salir);). Ejecute la aplicación y observe los resultados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 57 / 80

58 Actividades e intenciones IX Actividades e intenciones Las intenciones son la forma de realizar acciones o tareas. Las intenciones permiten lanzar actividades o servicios desde las aplicaciones. Las intenciones se clasifican en dos tipos: Explicitas: indican exactamente cuál es el componente que se desea lanzar. Se utiliza el constructor Intent(Context contexto, Class<? > clase). Ejemplo: Intent intencion = new Intent(this, NombreDeLaClase.class); startactivity(intencion); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 58 / 80

59 Actividades e intenciones X Actividades e intenciones Implícitas: solicitan tareas abstractas (como la intención de enviar mensajes) y se realizan en tiempo de ejecución. Se utiliza el constructor Intent(String accion, Uri uri). Ejemplo: Intent intencion = new Intent(Intent.ACTION DIAL, URI.parse( tel: )); startactivity(intencion); El principal uso de las intenciones es para: Lanzar actividades mediante startactivity(). Lanzar servicios mediante startservice(). Lanzar anuncios de tipo broadcast mediante sendboradcast(). Comunicar servicios mediante bindservice(). Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 59 / 80

60 Actividades e intenciones XI Actividades e intenciones La intenciones podrán ser lanzadas por la aplicaciones o bien por el sistema. Los principales criterios que deben tomarse en cuenta al crear intenciones son: Nombre del componente: se indica el componente que se desea lanzar mediante su nombre completo. Acción: es la cadena de caracteres donde se indica la acción a realizar. Puede ser predefinida o propia. Categoría: sirve para complementar las acciones mediante información adicional del componente a lanzar. Datos: permiten referenciar a los datos con los que se trabajará. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 60 / 80

61 Actividades e intenciones XII Actividades e intenciones Extras: permiten especificar la información adicional con la que se trabajará en el componente que será lanzado. Para esto se utiliza el método putextra(). Ejemplos de acciones predefinidas son: Constante Acción ACTION CALL Inicia una llamada telefónica ACTION EDIT Permite la edición de datos ACTION MAIN Inicia como la actividad principal ACTION SYNC Sincroniza los datos del dispositivo en un servidor ACTION BATTERY LOW Advertencia batería baja ACTION SCREEN ON Activa la pantalla Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 61 / 80

62 Actividades e intenciones XIII Actividades e intenciones Ejemplos de categorías predefinidas son: Constante Descripción CATEGORY BROWSABLE Indica que la actividad lanzada puede mostrar los datos referenciados por un enlace. CATEGORY HOME La actividad muestra la pantalla de inicio del dispositivo (o bien tecla HOME). CATEGORY PREFERENCE Indica que la actividad a lanzar es un panel de preferencias. Ejercicio: Creación de intenciones implícitas. 1 Cree un nuevo proyecto que contenga en la actividad principal cinco botones con los siguientes nombres: Abrir un sitio Web Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 62 / 80

63 Actividades e intenciones Actividades e intenciones XIV Realizar una llamada. Abrir Google Maps. Tomar una fotografía. Escribir un correo. 2 Después cree los siguientes métodos y asocie cada uno de ellos al correspondiente botón (mediante el atributo onclick). public void abrirpaginaweb(view vista){ Intent intencion = new Intent(Intent.ACTION VIEW, Uri.parse( sperez/ )); startactivity(intencion); } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 63 / 80

64 Actividades e intenciones XV Actividades e intenciones public void realizarllamada(view vista){ Intent intencion = new Intent(Intent.ACTION CALL, Uri.parse( tel: )); startactivity(intencion); } public void abrirgooglemaps(view vista){ Intent intencion = new Intent(Intent.ACTION VIEW, Uri.parse( geo: , )); startactivity(intencion); } public void tomarfoto(view vista){ Intent intencion = new Intent( android.media.action.image CAPTURA ); startactivity(intencion); } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 64 / 80

65 Actividades e intenciones XVI Actividades e intenciones public void escribircorreo(view vista){ Intent intencion = new Intent(Intent.ACTION SEND); intencion.settype( text/plain ); intencion.putextra(intent.extra SUBJECT, Descripcion del asunto ); intencion.putextra(intent.extra TEXT, Texto del correo ); intencion.putextra(intent.extra , new String[] sergio10barca@gmail.com ); startactivity(intencion); } 3 Para que sea posible realizar llamadas en el archivo AndroidManifest.xml se debe insertar la siguiente línea que proporciona los permisos adecuados a nuestra aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 65 / 80

66 Actividades e intenciones XVII Actividades e intenciones <uses-permission android:name= android.permission.call PHONE / > 4 Ejecute la aplicación y observe los resultados. Nota: si la aplicación es ejecutada en el emulador puede ser que algunos botones no funcionen por lo que se recomienda utilizar un dispositivo real. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 66 / 80

67 Creación de menús Diseño de la interfaz de usuario Creación de menús 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 67 / 80

68 Creación de menús I Creación de menús Se pueden asociar menús a las actividades, los cuales pueden ser desplegados al presionar el botón menú del dispositivo. Estos menús son bastante útiles pues se mantienen ocultos hasta que dicho botón es presionado. Para crear un menú se realizan los siguientes pasos: 1 Sobre el directorio res pulse el botón derecho y solicite crear un nuevo archivo XML eligiendo en la opción Resource Type = Menu, el nombre puede ser menu.xml. 2 En el nuevo archivo menu.xml que aparece, mediante el botón Add, agregue un par de elementos de tipo item. 3 Agregue las propiedades adecuadas a los items como título y algunas imágenes. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 68 / 80

69 Creación de menús II Creación de menús 4 Para que el menú funcione primero es necesario sobre-escribir el método oncreateoptionsmenu en el código java de la actividad principal, el cual asociará dicho menú al botón menú del dispositivo (en el emulador se activa con la tecla public boolean oncreateoptionsmenu(menu menu) { super.oncreateoptionsmenu(menu); MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu, menu); return true;//se hace visible el menu } 5 Para activar la funcionalidad deseada al presionar cada elemento de menú, se debe sobre-escribir el método onoptionsitemselected, Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 69 / 80

70 Creación de menús III Creación de menús también en el código java de la actividad public boolean onoptionsitemselected(menuitem item){ switch(item.getitemid()){ case R.id.menuItem1:{ metodomenuitem1(null); }break; case R.id.menuItem2:{ metodomenuitem2(null); }break; default:break; } return true;//permite terminar el elemento correctamente } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 70 / 80

71 Uso de la vista ListView Uso de la vista ListView 1 Diseño de la interfaz de usuario Gestores de disposición Tipos de recursos Estilos y temas Acceso y modificación de las propiedades de las vistas Uso de TabHost Actividades e intenciones Creación de menús Uso de la vista ListView Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 71 / 80

72 Uso de la vista ListView I Uso de la vista ListView La vista ListView permite visualizar una lista vertical deslizable de varios elementos. Cada uno de los elementos de ListView puede definirse como layouts. Cualquier actividad que vaya a visualizar un ListView debe heredar de ListActivity. Para crear un ListView se realizan los siguientes pasos: 1 Se diseña un layout que contenga un ListView. 2 Se diseña un layout el cual simplemente se repetirá en la lista. 3 Se crea una actividad que visualice el layout con el ListView. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 72 / 80

73 Uso de la vista ListView Uso de la vista ListView II 4 Finalmente, se personaliza cada uno de los elementos del ListView. Un ListView deben ir dentro de un FrameLayout y acompañados de una vista como TextView con la finalidad de desplegar algún otro valor en caso de que no haya elementos en la lista. <FrameLayout > <TextView / > <ListView / > < /FrameLayout> En el método oncreate() de la clase que corresponda al ListView debe agregarse el método setlistadapter con la finalidad de asociar los objetos de una lista al ListView. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 73 / 80

74 Uso de la vista ListView III Uso de la vista ListView setlistadapter(new ArrayAdapter<String> (this, android.r.layout.layoutlista, R.id.titulo, Lista)); setlistadapter proporciona el cursor para un ListView. El ArrayAdapter espera por defecto las referencias de recursos previstas en un TextView. ArrayAdapter permite también diseños mas complejos. Puede encontrar más información en En el ejemplo anterior tenemos: this: contexto de la aplicación. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 74 / 80

75 Uso de la vista ListView IV Uso de la vista ListView android.r.layout.layoutlista: es la referencia de recurso que se utilizará para todos los elementos de la lista. R.id.titulo: identifica el id de la vista que sera desplegada. Lista: contiene la información que deberá ser desplegada en los elementos del ListView. Ejercicio: crear un ListView visualizando sus elementos como layouts. 1 Cree un nuevo layout de tipo LinearLayout e incluya un FrameLayout el cual contendrá dentro el ListView deseado. La estructura del xml debe ser parecida a la siguiente: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 75 / 80

76 Uso de la vista ListView V Uso de la vista ListView <LinearLayout > <TextView... / > <FrameLayout > <TextView / > <ListView / > < /FrameLayout> < /LinearLayout> 2 Registre la nueva actividad en el documento AndroidManifest.xml. 3 Realice un layout que represente a cada uno de los elementos de la lista. La propiedad más importante es el alto del elemento y se denota mediante: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 76 / 80

77 Uso de la vista ListView Uso de la vista ListView VI?android:attr/listPreferredItemHeight que es un parámetro estándar de configuración del sistema. <RelativeLayout... android:layout width= fill parent android:layout height=?android:attr/listpreferreditemheight > <ImageView android:layout width=?android:attr/listpreferreditemheight android:layout height= fill parent / > <TextView android:layout android:layout alignparenttop= true android:textappearance=?android:attr/textappearancelarge android:singleline= true / >< /RelativeLayout> Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 77 / 80

78 Uso de la vista ListView VII Uso de la vista ListView 4 Ejecute la aplicación y observe los resultados. Si se desea personalizar cada elemento del ListView (con diferentes textos, imágenes, etc.) entonces se debe crear el propio ListView heredando de la clase BaseAdapter. El constructor de la clase personalizada sólo requiere recibir la lista de elementos (registro de records, referencias de imágenes, etc.) y la actividad correspondiente, así como llamar a la clase padre con super(). Para implementar la funcionalidad completa se deben sobre-escribir los siguientes métodos: View getview(int position, View convertview, ViewGroup parent): permite construir un objeto View con el layout correspondiente a la posición denotada por position. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 78 / 80

79 Uso de la vista ListView VIII Uso de la vista ListView int getcount(): permite conocer el número de elementos en la lista. Object getitem(int position): devuelve el position-ésimo elemento de la lista. long getitemid(int position): devuelve el position-ésimo identificador del correspondiente elemento de la lista. El único método que merece la pena detallar es getview(). Se construye un objeto View, a partir de un layout predefinido, mediante el uso del método inflate de la clase LayoutInflater. Se coloca el texto e imagen que corresponda. Finalmente se debe llamar al método setlistadapter en la clase Java que desplegará al ListView, de forma similar a la siguiente: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 79 / 80

80 Uso de la vista ListView IX Uso de la vista ListView setlistadapter(new MiListView (this, public View getview(int position, View convertview, ViewGroup parent) { LayoutInflater inflater = actividad.getlayoutinflater(); View vista = inflater.inflate(r.layout.mi layout elemento, null, true); TextView texto = (TextView) vista.findviewbyid(r.id.titulo); texto.settext(lista.elementat(position)); ImageView imagen = (ImageView) vista.findviewbyid(r.id.icono); imagen.setimageresource(r.drawable.imagendeseada); return vista; } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 80 / 80