Las vistas Android: diseños y widgets

Ahora que ya tenemos claro qué son las actividades y cómo se comportan podemos seguir avanzando en el diseño de interfaces de usuario en Android. Los siguientes elementos que tenemos que tomar en consideración son las vistas. Si retomamos momentáneamente esa comparación inicial que hicimos de las actividades con las ventanas o formularios típicos de aplicaciones de sistemas operativos gráficos de PC, podríamos asemejar las vistas con los controles que se suelen incluir en esos formularios. De hecho, desde el punto de vista del usuario son muy similares: tenemos los mismos tipos (cuadros de texto, listas desplegables, botones, casillas de verificación, paneles que actúan de contenedores, etc.) y se comportan de forma parecida.

Sin embargo, las similitudes terminan ahí. Así que quizás sea recomendable dejar ya de comparar Android con otros sistemas operativos y empezar a definir las cosas en su contexto. Podríamos decir, entonces, que las vistas son elementos gráficos que se incluyen en las actividades y que permiten mostrar información al usuario o permitir que éste interactúe con la aplicación.

Clasificación de las vistas

Entre los diferentes tipos de vistas que tiene Android, hay uno que tiene especial relevancia: el diseño (layout). Se trata de una vista que puede contener a otras vistas. En realidad no hay un único diseño: disponemos de varios que se diferencian en la forma en la que éstos distribuyen las vistas que contienen por el área visible de la actividad. Porque, además de permitirnos organizar las vistas de forma jerárquica dentro de la actividad, el principal objetivo de los diseños es controlar dónde se sitúa y qué tamaño tiene cada vista que se muestra en pantalla.

Por otro lado, a las vistas que muestran información en la actividad y/o permiten la interacción con el usuario se las denomina widgets.

Tanto los diseños como los widgets se representan en Android como clases Java que heredan de la clase View (en realidad, los diseños heredan de la clase ViewGroup que, a su vez, hereda de la clase View). Las clases View y ViewGroup se encuentran en el paquete android.view, mientras que las vistas (diseños y widgets) se sitúan en el paquete android.widget.

Un breve inciso antes de continuar

Hay que tener cuidado con el término widget, ya que no siempre lo utilizamos correctamente. Lo habitual es llamar widget a las aplicaciones o componentes de aplicaciones que se sitúan directamente sobre el «escritorio» de Android, mostrando información y permitiendo (en algunos casos) la interacción del usuario. Sin embargo, en la terminología de la API de Android, a esos componentes se los llama AppWidget, dejando el término widget para los elementos de la interfaz de usuario que interactúan con él. Esta definición de widget excluiría a los diseños, aunque sus clases se incluyan en el mismo paquete.

Diseños

Actualmente disponemos tan sólo de cuatro diseños básicos, aunque correctamente combinados nos permitirán crear cualquier tipo de interfaz de usuario. Además, algunos de ellos tienen versiones especializadas (en la API son clases hijas) que también podemos utilizar, lo que amplía el conjunto. Los veremos en futuros posts.

Los diseños básicos son los siguientes:

• FrameLayout: el diseño más sencillo. No ordena las vistas que se incluyen en él, simplemente las coloca una sobre otra, en el orden en que se añaden. Por este motivo, normalmente sólo contendrá una vista. Se utiliza principalmente para mostrar imágenes o lienzos gráficos, aunque también es la mejor opción cuando queremos que unas vistas se superpongan a otras.

• LinearLayout: diseño que sitúa los elementos que contiene en línea, uno a continuación del otro (sin superponerlos), ya sea vertical u horizontalmente. Las vistas se muestran en el orden en que se añaden al diseño.

• TableLayout: en este diseño las vistas se colocan en forma de tabla, esto es, repartidas en filas y columnas. El contenido del TableLayout son uno o más TableRow (que es otro diseño), ordenados verticalmente, cada uno conteniendo una fila de la tabla. Cada TableRow se comporta, básicamente, como un LinearLayout horizontal (con restricciones), conteniendo las vistas de cada fila. A pesar de esta estructuración, el conjunto total se comporta como una tabla real, con filas y columnas correctamente alineadas.

• RelativeLayout: este es el diseño más versátil de que disponemos. En él cada vista se puede situar más o menos donde queramos. No usa posiciones absolutas (coordenadas), sino relativas a otras vistas ya incluidas en el diseño. O sea, que podemos indicar que una vista se coloque debajo o a la izquierda de otra, que dos vistas se alineen verticalmente, que se muestren centrada una respecto a otra, etc. Nos permite crear interfaces complejas sin necesidad de anidar numerosos diseños más básicos.

Hay un quinto diseño disponible, AbsoluteLayout, que permitiría situar cada vista contenida en él en coordenadas concretas. Sin embargo, su uso no está recomendado, principalmente por dos motivos. Por un lado no resulta práctico si se pretende que la aplicación se vea correctamente en diferentes tamaños de pantalla. Y por otro lado, está marcado como obsoleto (deprecated) desde la versión 1.5 de Android. Esto último significa que podría eliminarse en cualquier nueva versión de la API, haciendo que las aplicaciones que lo usen no sean compatibles.

Widgets

Respecto a los widgets, la lista de los disponibles es bastante larga. Basta con ojear la lista de clases del paquete android.widget para ver todas las opciones de que disponemos. Aunque hay que tener en cuenta que no todas las clases de este paquete son widgets: también se incluyen los diseños y otras clases complementarias de las que hablaré en su momento como son los adaptadores o los filtros.

En cualquier caso, completaré este post enumerando algunos de los widgets que se usan con más frecuencia:

• TextView: permite mostrar una o más líneas de texto en la pantalla.

• EditText: versión especializada del anterior que permite editar el texto.

• Button: widget que muestra una imagen con aspecto de botón presionable y con un texto en su interior. Hay un widget muy similar, ImageButton, que muestra una imagen en lugar de un texto.

• CheckBox: la típica casilla de verificación, con un texto y una imagen que cambia para indicar si está seleccionada o no.

• RadioButton: los botones de radio permiten escoger una entre múltiples opciones mutuamente excluyentes. Al igual que el CheckBox, el widget incluye un texto y una imagen que cambia de apariencia en función de si está seleccionado o no. Para agruparlos se utiliza RadioGroup, una versión especializada de LinearLayout.

• ImageView: permite mostrar una imagen. Hay otro widget, Gallery, que permite mostrar varias imágenes en forma de lista horizontal con desplazamiento.

• ProgressBar: permite mostrar una barra de progreso. Tiene una especialización que añade un elemento deslizable a lo largo de la barra que el usuario puede utilizar para establecer un valor: SeekBar.

• ListView: permite mostrar una lista vertical de elementos con barra de desplazamiento (si es necesaria).

• Spinner: es el equivalente Android de las listas de opciones desplegables, aunque aquí las opciones se muestran en una actividad que se superpone a la que contiene el widget.

• DatePicker y TimePicker: widgets que permiten seleccionar una fecha o una hora, respectivamente. Para seleccionar fechas se ha añadido recientemente a la API el widget CalendarView, que muestra el típico calendario y permite seleccionar una fecha sobre él.

En próximos posts proporcionaré más detalles sobre los principales diseños y widgets de la API de Android y pequeños ejemplos que muestren su funcionalidad, de forma que podamos decidir qué vistas son las más adecuadas para las interfaces de usuario de nuestras aplicaciones.

Recuerda que en esta página dispones de enlaces a todos los artículos sobre Android que he publicado en La columna 80.