Elementos de la interfaz de usuario de una aplicación Android

Las interfaces de usuario en Android se pueden implementar de varias formas. Una de ellas es definirla en la propia clase de la actividad, aunque esta forma, aparte de ser poco elegante y poco estructurada, no proporciona una diferenciación clara entre el propio código de la aplicación y el de la interfaz. Por lo que la forma más recomendada y la que utilizaremos para la implementación de interfaces será mediante XML.

Estas interfaces se construyen a través de controles llamados Views que serán el punto de interacción con el usuario. Los Views son la clase base para la creación de widgets como por ejemplo botones, campos de texto, checkbox, etc. Por otro lado tenemos la clase ViewGroup que son contenedores de Views o incluso de otros ViewGroup como muestra la siguiente imagen.

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:                                              

Para incorporar imágenes a un proyecto de aplicación Android que se desarrolla con Eclipse se deben realizar los siguientes pasos:

1.           Determinar la carpeta /res/drawable… donde queremos almacenar el fichero de imagen.

2.           Con el botón derecho sobre la carpeta destino, seleccionar Importar. A continuación, aparece una ventana donde hay que seleccionar la carpeta General>File System y pulsar Next. Entonces, se debe elegir la carpeta donde se encuentran las imágenes a importar.

3.           Seleccionar los gráficos que se quieren importar y pulsar Finish.

4.           Entonces podemos ver que los ficheros has sido incluidos en la carpeta correspondiente.

5.    Además, como ya comentamos para el caso de los controles ImageButton, al tratarse de un control de tipo imagen deberíamos establecer siempre la propiedad android: contentDescription para ofrecer una breve descripción textual de la imagen, algo que hará nuestra aplicación mucho más accesible.

1 2 3 4 5

<ImageView android:id="@+id/ImgFoto"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:src="@drawable/ic_launcher"     android:contentDescription="@string/imagen_ejemplo" />

Cuadros de Texto:

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, …).

1 2 3 4 5 6

<TextView android:id="@+id/LblEtiqueta"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:text="@string/escribe_algo"     android:background="#ff1ca5ff"     android:typeface="monospace"/>

Listas:

En este nuevo artículo nos vamos a centrar en el control de selección más utilizado de todos, el ListView.

Un control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.

Para empezar, veamos como podemos añadir un control ListView a nuestra interfaz de usuario:

1 2 3

<List View android: id="@+id/LstOpciones"         android:layout_width="match_parent"         android:layout_height="wrap content" />

Una vez más, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas en artículos anteriores. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo código que ya vimos para el control Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control mediante el método setAdapter():

1 2 3 4 5 6 7 8 9 10

final String[] datos =     new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"}; ArrayAdapter<String> adaptador =     new ArrayAdapter<String>(this,         android.R.layout.simple_list_item_1, datos); lstOpciones = (ListView)findViewById(R.id.LstOpciones); lstOpciones.setAdapter(adaptador);

Grid:

Usar el principio Grid, requiere generalmente que el desarrollador añada algún margen/paddin/espacio extra entre elementos. En efecto, añadir espacio entre elementos ayuda a mantener una separación clara entre bloques mientras se conserva un gran nivel de la legibilidad en la interfaz. Todos los desarrolladores Android están familiarizados con éstos conceptos, y en la mayoría de los casos se solucionan usando características

Del framework como padding y/o margin en las Views. Para aislar claramente la lógica del programa de la interfaz, generalmente ésto se hace en losficheros XML que definen la interfaz. Si bien éste método funciona cuando la interfaz es estática, puede ser complicado para interfaces dinámicas en las cuales hay elementos que se muestran o desaparecen según sea necesario. Éste artículo pretende dar algunos consejos para manejar correctamente interfaces dinámicas basadas en Grids.

Pestañas

Lo destacable de esta aplicación y lo cual nos interesa en estos momentos, aparte de su estética, es que está divida en 4 secciones generales que abarcan toda la funcionalidad de la aplicación, pero dentro de cada una de esta sección encontrarás más funciones detalladas con las cuales el usuario puede interactuar. Estas 4 secciones o pestañas le dan aspecto limpio haciendo que el usuario sepa a donde ir cuando desee realizar alguna acción determinada. Este tipo de diseño por pestañas es una tendencia ya que también aplicaciones conocidas como Hotmail, GetJar y hasta la tienda de Samsung App la adopten para su uso (por solo mencionar las más usuales).

Estas aplicaciones demuestran que cuando se adopta un diseño que es aceptado por los usuarios, se crea una tendencia y es motivo por el cual hoy te traemos un ejemplo muy sencillo del uso de las pestañas en tus aplicaciones y que podría ser una plantilla para tus aplicaciones, modificando únicamente nombre e imágenes descriptivas.
La explicación de este tema de las pestañas la haremos paso a paso desarrollando explicando el uso de cada una de las características principales que necesitaremos para hacer este tipo de diseño, como son TabHost, TabWidget y FrameLayout:

La definición de un TabHost según la página oficial de Android es: Contenedor para una vista de ventanas con pestañas. Este objeto tiene dos hijos: un conjunto de etiquetas en las que el usuario hace clic para seleccionar una pestaña específica y un objeto FrameLayout que muestra el contenido de esta pestaña. Los elementos individuales suelen controlarse con un objeto contenedor, en lugar de establecer los valores de los elementos propios de los hijos.

El TabHost es el elemento raíz o principal del layout de la actividad principal, es como el molde de la aplicación, el cual esta dividió en 2 partes principales y personalizables, la primera es donde estarán las pestañas que vamos a utilizar en nuestra aplicación, la cual se llama TabWidget. La segunda parte principal es donde estará el contenido que realiza cada pestaña y el cual es un FrameLayout.

Etiquetas

Control TextView.

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, …).

<TextView android:id=”@+id/LblEtiqueta”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Escribe algo:”
android:background=”#AA44FF”
android:typeface=”monospace” />

De igual forma, también podemos manipular estas propiedades desde nuestro código. Como
ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y
posteriormente le concatenamos unos números, actualizamos su contenido mediante
setText() y le cambiamos su color de fondo con setBackgroundColor().

Final TextView lblEtiqueta = (TextView)findViewById(R.id.LblEtiqueta);
String texto = lblEtiqueta.getText().toString();
texto += “123″;
lblEtiqueta.setText(texto);