“ELEMENTOS DE LA INTERFAZ DE USUARIO DE UNA APLICACIÓN ANDROID”

Componentes de una aplicación

Existe una serie de elementos clave que resultan imprescindibles para desarrollar aplicaciones en Android. En este apartado vamos a realizar una descripción inicial de algunos de los más importantes. A lo largo del libro se describirán con más detalle las clases Java que implementan cada uno de estos componentes.

Layout

Un layout es un conjunto de vistas agrupadas de una determinada forma. Vamos a disponer de diferentes tipos de layouts para organizar las vistas de forma lineal, en cuadrícula o indicando la posición absoluta de cada vista. Los layouts también son objetos descendientes de la clase View. Igual que las vistas, los layouts pueden ser definidos en código, aunque la forma habitual de definirlos es utilizando código XML.

Botones

En el apartado anterior hemos visto los distintos tipos de layout con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En las próximas elecciones vamos a hacer un recorrido por los diferentes controles, y en esta concretamente los de tipo Button (Botón) que pone a nuestra disposición la plataforma de desarrollo Android.

Vamos a ver los diferentes tipos y cómo podemos personalizarlos, Android en este caso nos proporciona tres tipos de botones:

Button: Es el típico botón normal, contiene un texto y puede contener imágenes de tipo icono que puedes alinear con el texto.

ToggleButton: es de tipo on/off, contiene una rayita que indica ese on/off.

ImageButton: El botón contiene una imagen, es muy útil para cuando queremos hacer cosas vistosas y de diseño con formas raras, ya que el Button es rectangular, y aquí podemos usar cualquier forma poniendo el fondo transparente.

Imágenes

Arrastra y suelta un elemento "ImageView" (Vista de imagen). El elemento aparece en el emulador, pero no tiene ninguna imagen definida.

Haz doble clic sobre el archivo de código Java asociado con la pantalla XML. Agrega el siguiente código para añadir la imagen a la vista: ImageView1.setImageResource (R.drawable.mi_imagen); Reemplaza "mi_imagen" con un nombre de imagen localizado en la sección "res/drawable/" del proyecto de Eclipse.

Etiquetas 

En Java, la creación de una etiqueta puede hacerse mediante la declaración de una instancia de un objeto TextView. Sin embargo, la práctica más común es la de crear los layout a través de archivos XML, y para ello, necesitaremos incluir el elemento <TextView android:text=”[Mi etiqueta]“/> si queremos incluir etiquetas con su texto correspondiente en la GUI.

En algunos casos también, será necesario dotar a nuestra aplicación de ciertas características como la internacionalización, es decir, de manejar múltiples idiomas en el texto de nuestras interfaces. Esto es posible gracias a las referencias que podemos hacer a algún recurso en lugar de otro según las configuraciones que haga el usuario o las del propio teléfono. Este tema se abarcará con más detalle en un siguiente artículo, por lo mientras tengamos bien fuertes los conceptos básicos.

Propiedades de las etiquetas

A continuación enumero una lista de las propiedades más utilizadas cuando trabajamos con etiquetas:

android:typeface que sirve para indicar el tipo de letra con que se mostrará el texto de la etiqueta (ejemplo: normal, sans, serif, monospace, etc.)

android:textStyle para indicar si el tipo de letra seleccionado debe mostrarse en un formato en negritas (bold), cursiva (italic) o ambas (bold_italic).

android: textColor para indicar el color que tendrá el texto mostrado en la etiqueta, este debe estar expresado en formato RGB hexadecimal (ejemplo: #A4C639 para el verde característico de Android (; )

Conoce más propiedades consultando la tabla XML Attributes desde la documentación oficial de Androiddevelopers.

Cuadro de texto

Muy bien ahora veremos como poner los 3 

que meciona el titulo, asi que, en Android

El control TextView es otro de los clásicos 

en la programación de GUIs, las etiquetas 

de texto, y se utiliza para mostrar un 

determinado texto al usuario. Al igual que 

en el caso de los botones, el texto del control

 se establece mediante la propiedad android:text. 

A parte de esta propiedad, la naturaleza 

del control hace que las más interesantes 

sean las que establecen el formato del texto

 mostrado, que al igual que en el caso de los

 botones son las siguientes: android:background

 (color de fondo), android:textColor (color del

texto), android:textSize (tamaño de la fuente)

 y android:typeface (estilo del

texto: negrita, cursiva, …).

Listas

Al igual que un ListView, el contenido de la lista desplegable con los elementos del Spinner proviene de un Adapter (en el ejemplo de la documentación es un array definido en un fichero xml). A continuación se muestra un ejemplo básico de Spinner con su layout y la Activity asociada la cual mostrará un Toast si se selecciona un elemento. Esta selección no es obligatoria, ya que pulsando “back” la lista se cierra.

Pestañas

Con esto ya tendríamos montada toda la estructura de controles necesaria para nuestra interfaz de pestañas. Sin embargo, como ya dijimos al principio del artículo, con esto no es suficiente. Necesitamos asociar de alguna forma cada pestaña con su contenido, de forma que el el control se comporte correctamente cuando cambiamos de pestaña. Y esto tendremos que hacerlo mediante código en nuestra actividad principal.

Insertar propiedades dentro de un usuario android

En Android utilizamos archivos XML para la declaración de layouts y otros elementos de los que hará uso nuestra aplicación para su correcto funcionamiento. De esta forma, características como la instanciación dinámica se reserva para escenarios más complejos en dónde los elementos de UI no se conocen en tiempo de compilación (por ejemplo seleccionar una opción de un combo box que se ha llenado de acuerdo a datos consultados en Internet).

Pasemos entonces a aprender las bases para diseñar layouts para Android utilizando XML.

En Android los archivos de layout codificados en XML se consideran recursos y se guardan dentro del directorio res/layout del ptoyecto.

Cada archivo XML está formado por un árbol de elementos que especifican la manera en la que los elementos de la UI y contenedores se acomodarán para definir la parte visual de un objeto View. Los atributos de cada elemento en el XML se llaman propiedades y describen cómo es que deben verse los elementos y cómo debe comportarse un contenedor. Ponemos un ejemplo: Si tenemos un botón con la propiedad y el valorandroid:textStyle = “Bold” esto hará que el texto que muestre el botón estará en formato negritas. El uso de IDE’s como Eclipse y Motodev Studio nos permiten tener acceso a la opción de autocompletado cuando en nuestro código tecleamos la palabra android: en las propiedades de cualquier elemento de layout. De esta forma, podremos visualizar una lista con las propiedades disponibles para cada elemento.