Interfaces de usuario [Android: Vistas y Gestores de disposición]

Transcripción

1 Interfaces de usuario [Android: Vistas y Gestores de disposición] 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 / 54

2 Diseño de la interfaz de usuario Diseño de la interfaz de usuario 1 Diseño de la interfaz de usuario 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 2 / 54

3 Diseño de la interfaz de usuario 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 / 54

4 Diseño de la interfaz de usuario 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. Recordemos que una actividad es esencialmente una ventana de la interfaz. Ejercicio: Crear un proyecto sencillo. Ver figura 1. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 4 / 54

5 Diseño de la interfaz de usuario Diseño de la interfaz de usuario III Figura : Clase creada por defecto. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 5 / 54

6 Diseño de la interfaz de usuario Diseño de la interfaz de usuario IV El método setcontentview(r.layout.activity main) indica la visualización de la actividad activity main que se encuentra en res/layout/. La forma más común de diseñar la interfaz (ventanas) es modificando los archivos que se encuentran en res/layout/, como el activity main.xml antes mencionado. Dicho archivo contiene la definición XML de la interfaz y posee un gestor de disposición por defecto: RelativeLayout. Dentro de un gestor de disposición se pueden contener otros elementos de tipo View. Algunos atributos de un gestor de disposición son: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 6 / 54

7 Diseño de la interfaz de usuario Diseño de la interfaz de usuario V xmlns:android y xmlns:tools. Son las definiciones de los espacios de nombres de XML y sólo se especifican una vez. 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. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 7 / 54

8 Diseño de la interfaz de usuario Diseño de la interfaz de usuario VI variable. Muestra la referencia al string con el nombre indicado. 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 rápido y requiere poca memoria. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 8 / 54

9 Diseño de la interfaz de usuario Diseño de la interfaz de usuario VII El plug-in de Eclipse crea automáticamente todas las referencias a los objetos XML en la clase R, la cual se encuentra en gen/com.example.nombreproyecto/r.java. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 9 / 54

10 Diseño de la interfaz de usuario Diseño de la interfaz de usuario VIII 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 10 / 54

11 Diseño de la interfaz de usuario Diseño de la interfaz de usuario IX 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 11 / 54

12 Diseño de la interfaz de usuario Diseño de la interfaz de usuario X 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 12 / 54

13 Diseño de la interfaz de usuario Diseño de la interfaz de usuario XI 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 Eliminar la opción que estaba ya creada al generar el proyecto, es decir el TextView que contiene el mensaje de Hello World!. 5 Desde la paleta de opciones del lado izquierdo (Palette), opción Form Widget, agregar uno de los siguientes elementos: ToggleButton, CheckBox, ProgressBar (Large) y RatingBar. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 13 / 54

14 Diseño de la interfaz de usuario Diseño de la interfaz de usuario XII 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 14 / 54

15 Diseño de la interfaz de usuario Diseño de la interfaz de usuario XIII 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 15 / 54

16 Diseño de la interfaz de usuario Diseño de la interfaz de usuario XIV 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 16 / 54

17 Gestores de disposición Gestores de disposición 1 Diseño de la interfaz de usuario 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 17 / 54

18 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. Se puede encontrar mas información acerca de estos layout en Algunos otros tipos de layout son: Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 18 / 54

19 Gestores de disposición Gestores de disposición II 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. GridView: Muestra una cuadrícula deslizable. ViewFlipper: Muestra los elementos de forma deslizable pero uno a la vez. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 19 / 54

20 Tipos de recursos Tipos de recursos 1 Diseño de la interfaz de usuario 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 20 / 54

21 Tipos de recursos I 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 21 / 54

22 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 22 / 54

23 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 23 / 54

24 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 24 / 54

25 Tipos de recursos V Tipos de recursos 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 Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 25 / 54

26 Tipos de recursos VI Tipos de recursos Cómo hacer frente a la posición en que se encuentra el dispositivo (horizontal-vertical)? Para ello existe el concepto de recursos alternos. Un recurso alterno permite que la aplicación se ajuste a las configuraciones o especificaciones de un dispositivo en particular. En Android es muy fácil expresar recursos alternos mediante el simple uso de sufijos en los directorios correspondientes. 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. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 26 / 54

27 Tipos de recursos VII Tipos de recursos 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 que simulen ser el inicio de un juego. 3 Su aplicación se debe ver como la Figura 2. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 27 / 54

28 Tipos de recursos VIII Tipos de recursos Figura : Figura del ejercicio juego. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 28 / 54

29 Tipos de recursos IX Tipos de recursos 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, agregaremos una vista alterna para cuando el dispositivo esta en posición horizontal. Nota: Asegúrese de que el dispositivo emulado permite voltear el dispositivo al presionar CTRL+F11, de lo contrario tendrá que cambiar la configuración del dispositivo o bien crear uno nuevo. 5 Dentro del directorio res crear el directorio layout-land. 6 Copiar el archivo main.xml del directorio layout en este nuevo directorio. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 29 / 54

30 Tipos de recursos X Tipos de recursos 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. 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 *. 9 Nuevamente ejecute la aplicación y presione varias veces CTRL+F11, observe que sucede. 10 Crear el directorio values-en dentro del directorio res. 11 Copiar el archivo strings.xml del directorio values en este nuevo directorio. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 30 / 54

31 Tipos de recursos XI Tipos de recursos 12 Traducir todos los nombres de variables dentro del archivo copiado. 13 Ejecutar la aplicación. 14 Cambie la configuración de idioma del dispositivo (Ajustes Idioma y teclado o algo similar). 15 Seleccionar un nuevo idioma y luego ejecutar la aplicación. 16 La lista completa de sufijos la podemos encontrar en Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 31 / 54

32 Estilos y temas Estilos y temas 1 Diseño de la interfaz de usuario 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 32 / 54

33 Estilos y temas Estilos y temas I 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 33 / 54

34 Estilos y temas Estilos y temas II <?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 34 / 54

35 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 35 / 54

36 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 36 / 54

37 Estilos y temas Estilos y temas V 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 37 / 54

38 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 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 38 / 54

39 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 desde código Java. Los métodos que se pueden asociar a las vistas serán generalmente del tipo: void nombremétodo(view vista). Por ejemplo, para llamar un método al presionar un botón se debe activar el atributo android:onclick= nombremetodo. Si una vista requiere ser llamada desde la parte lógica del programa (código Java), podemos obtener su referencia mediante findviewbyid(r.id.nombrevista). TextView texto = (TexView) findviewbyid(r.id.nombrevista); Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 39 / 54

40 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas II A las vistas se les pueden asociar valores de tipo etiqueta (tag). Un tag pueden ser cualquier tipo de objeto. Los tags se pueden utilizar para marcar la jerarquía de una vista o bien para almacenar datos dentro de una vista sin tener que utilizar otra estructura de datos. Una vista puede tener asociados múltiples tags. Se agregan mediante el método settag(int llave, Object tag). Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 40 / 54

41 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas III Algunas vistas pueden tener un valor inicial asociado llamado hint (consejo). Ejemplo: android:hint= Aqui va el resultado. Se pueden enviar mensajes de aviso mediante la clase Toast. Recordemos que los mensajes son importantes para mantener al usuario informado acerca de lo que ocurre con la aplicación. Se invocan de la siguiente manera: Toast.maketext(Context contexto, CharSequence mensaje, int duracion); El contexto se refiere a la Actividad que disparará el Toast, comúnmente this. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 41 / 54

42 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas IV 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 42 / 54

43 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas V <?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 43 / 54

44 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas VI 4 Copie las siguientes imágenes, Figura 3, en el directorio res/drawable y utilice los nombres botonpulsado, botonconfoco y botonnormal respectivamente. Figura : Botones presionado, apuntado y normal 1 La primer figura debe aparecer al hacer click sobre el botón. 2 La segunda al seleccionar con la tecla tabulación o equivalente. 3 La tercera es la que siempre aparecerá por defecto. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 44 / 54

45 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas VII 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. 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. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 45 / 54

46 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas VIII 11 Introduzca el siguiente código en el archivo principal.java (OtrasVistasActivity.java). public void sepresiona(view vista){ Toast.makeText(this, Presionado, Toast.LENGTH SHORT).show(); } 12 Ejecute la aplicación y observe los resultados. 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. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 46 / 54

47 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas IX 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. 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 como globales a la clase. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 47 / 54

48 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas X 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. 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()); } Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 48 / 54

49 Acceso y modificación de las propiedades de las vistas Acceso y modificación de las propiedades de las vistas XI 23 Agregamos al botón el atributo: android:tag= 0. Qué ocurre al presionar el botón? 24 Finalmente, en el método sepresiona(view vista) 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 49 / 54

50 Uso de TabHost Uso de TabHost 1 Diseño de la interfaz de usuario 2 Gestores de disposición 3 Tipos de recursos 4 Estilos y temas 5 Acceso y modificación de las propiedades de las vistas 6 Uso de TabHost Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 50 / 54

51 Uso de TabHost Uso de TabHost I 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 51 / 54

52 Uso de TabHost Uso de TabHost II Desafortunadamente el uso de TabHost se considera obsoleto por lo que incluso el IDE nos notificará al querer hacer uso de este. Así que, sólo lo estudiaremos brevemente. La estructura debe ser como sigue: <TabHost > <LinearLayout > <TabWidget /> <FrameLayout > <PrimerLayout... /> <SegundoLayout... /> <TercerLayout... /> < /FrameLayout> < /LinearLayout> < /TabHost> Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 52 / 54

53 Uso de TabHost Uso de TabHost III Ejemplo de una aplicación con TabHost (tomado del libro: El Gran Libro de Android): 1 Cree un proyecto llamado 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(). Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 53 / 54

54 Uso de TabHost Uso de TabHost IV 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)); 4 Ejecute la aplicación y observe los resultados. Sergio Luis Pérez (UAM CUAJIMALPA) Curso de Interfaces de Usuario 54 / 54