Android SDK: Diseño de interfaz de usuario

Spanish (Español) translation by CYC (you can also view the original English article)

En esta serie, estamos aprendiendo sobre el desarrollo de Android SDK desde cero. En este tutorial, construiremos un diseño de interfaz de usuario simple con algunos elementos visuales.

Introducción

Añadiremos el diseño al primer proyecto de aplicación que creamos y exploraremos en los últimos tutoriales y continuaremos trabajando en el proyecto a lo largo de esta serie. Principalmente trabajaremos con XML y la interfaz Eclipse ADT en esta parte, pero comenzaremos a usar un poco de Java en las siguientes dos partes. Tanto la codificación XML como la codificación Java están involucradas en muchos aspectos del desarrollo de Android, por lo que deberás obtener una idea de lo básico en estos lenguajes si aún no lo has hecho. Si eres nuevo en cualquiera de los dos idiomas, usarás lo que aprendemos en esta serie como base para el aprendizaje futuro.

1. Conceptos básicos de XML

Antes de comenzar con los diseños, repasemos algunos conceptos básicos de XML para aquellos que no han utilizado el lenguaje de marcado antes. Si ya estás familiarizado con XML, salta a la segunda parte de este tutorial. XML es un lenguaje que almacena valores de datos. Los archivos XML se usan para muchos propósitos diferentes. Funcionan como bases de datos en algunos proyectos y a menudo dan como resultado el resultado de la página web. Si usaste HTML antes, deberías estar familiarizado con las funciones esenciales.

En XML, los valores de datos se almacenan en elementos. Un elemento individual típicamente incluye una etiqueta de apertura y una etiqueta de cierre como en este ejemplo:

1
2	<product>Onion</product>

Como puedes ver, la etiqueta de apertura y la de cierre son las mismas excepto la barra diagonal "/" que indica la etiqueta de cierre. El valor de los datos en este caso es el contenido del elemento, la cadena de texto "Onion". La etiqueta de apertura también puede contener atributos para obtener información adicional sobre el elemento de datos:

1
2	<product type="vegetable">Onion</product>

Cada atributo tiene un nombre y un valor, con el valor entre comillas. Los elementos también pueden contener otros elementos:


<section name="food">
<product type="vegetable">Onion</product>
<product type="fruit">Banana</product>
</section>

En dicha estructura, decimos que el elemento section es primario y los productos son elementos secundarios. Los dos elementos secundarios también se conocen como hermanos. En un documento XML, debe haber un elemento root que actúa como padre de todos los elementos contenidos, o "anidados", dentro de él. Esto crea una estructura de árbol, con elementos secundarios que se ramifican a partir de elementos principales. Un elemento hijo también puede ser un elemento padre si también contiene más elementos secundarios.

Otra estructura XML que verás es el elemento de cierre automático, que no tiene etiquetas de apertura y cierre separadas:

1
2	<order number="12345" customerID="a4d45s"/>

El carácter de barra "/" al final del elemento lo cierra.

Todos los archivos de recursos con los que trabajamos en Android utilizan el marcado XML, incluidos los archivos de diseño, los modelos, los valores de datos y el Manifiesto.

2. Diseños de Android

Paso 1

Cuando trabajas con XML en el IDE Eclipse con el ADT instalado, el proceso de codificación es un poco más fácil con las indicaciones contextuales que verá a medida que escribe. Abre el archivo de diseño principal de tu nueva aplicación en el editor y asegúrate de tener la pestaña de edición XML seleccionada para que podamos trabajar en el código directamente. Este es el diseño de la pantalla principal que los usuarios ven cuando se inicia la aplicación. Eclipse ingresó a un diseño básico para que trabajemos con:


<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context=".MainActivity" >

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/hello_world" />

</RelativeLayout>

Como puedes ver, el elemento root es un elemento de diseño, en este caso un RelativeLayout. Hay algunos tipos de diseño diferentes en Android y puedes anidar diseños uno dentro del otro. El elemento de diseño root aquí tiene una serie de atributos que indican información adicional sobre el diseño, como el ancho, el alto y los márgenes. Dentro del elemento de diseño hay un TextView: esto te permite mostrar una cadena de texto. El TextView es un tipo de View. Las vistas son los elementos visibles e interactivos que componen la interfaz de usuario de tu aplicación. Por lo tanto, cada pantalla en tu aplicación es una selección de Vistas dispuestas utilizando uno o más diseños. En Android, los diseños se describen como objetos ViewGroup, con cada ViewGroup que contiene una o más Vistas.

Paso 2

Para enfocarte en los bloques de construcción básicos de un diseño, elimina el contenido existente de tu archivo de diseño principal y comenzaremos desde el principio. Como mencionamos antes en la serie, puedes construir tus diseños y Vistas en código Java, pero las herramientas de Android se prestan para usar XML para diseñar tus UI de aplicación, ya que puedes ver los resultados visibles mientras construyes los elementos. Puede haber casos en los que tenga sentido construir una parte o la totalidad de una IU en Java, pero en su mayor parte debes usar XML. Esta práctica también mantiene separados la lógica de la aplicación y los elementos de presentación.

La primera tarea para construir un diseño es elegir un tipo de diseño. Comencemos con uno de los más simples: un LinearLayout.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >

	<!-- views go here -->

</LinearLayout>

LinearLayout organiza las Vistas que queremos mostrar a lo largo de una línea horizontal o vertical. En este caso, la orientación es vertical, por lo que cada Vista se agrega a la pantalla debajo de la última. Un diseño horizontal agrega Vistas de izquierda a derecha. El diseño llena el espacio disponible tanto horizontal como verticalmente usando los atributos "layout_width" y "layout_height" (en Android estos se conocen a menudo como parámetros de diseño).

Agrega una nueva línea después de la línea en la que se declara "layout_height". Comienza a escribir un atributo escribiendo "android:". Cuando ingreses los dos puntos, Eclipse debería solicitarte una lista de atributos relevantes. Puedes continuar escribiendo para limitar la lista de sugerencias o desplazarte por ella para seleccionar una con el mouse. Selecciona el atributo "android: gravity".

Ingresa "center_horizontal" como el valor de gravedad para que los elementos contenidos se muestren centrados en el eje X:

1
2	android:gravity="center_horizontal"

Esto aplica a todo dentro del diseño. Podemos establecer varias propiedades de visualización adicionales, como relleno, márgenes y fondos. Pero vamos a mantener las cosas simples por ahora.

3. Añadiendo vistas

Paso 1

A continuación, agregaremos algunas Vistas al diseño. Las Vistas son los elementos visibles en la interfaz de usuario. Agreguemos texto y un botón. Dentro del elemento LinearLayout (entre las etiquetas de apertura y cierre), comienza por escribir "<" y Eclipse debería indicarte una lista de elementos disponibles como lo hizo con el atributo.

Selecciona TextView de la lista. Ten en cuenta que este es un elemento de cierre automático, la mayoría de las Vistas lo son. Proporciona los atributos TextView, comenzando con el ancho y el alto del diseño (escribe "android:" y usa los mensajes):

1
2	<TextView
3	android:layout_width="wrap_content"
4	android:layout_height="wrap_content" />

Configuramos la vista lo suficientemente amplia como para acomodar tu contenido usando "wrap_content", en lugar de llenar el elemento principal como lo hicimos con el diseño. Agrega otro atributo al TextView, esta vez listando la cadena de texto para mostrar dentro de él:

1
2	android:text="Hello there"

Cuando guardes el archivo, verás que Eclipse muestra un mensaje de advertencia. Si pasas el puntero sobre él, el margen del editor muestra el texto, que también se muestra en la vista Problemas. Se lee "Hardcoded string ... should use @string resource". La práctica recomendada es almacenar cada valor de cadena de texto como un recurso de valores, en lugar de incluirlo directamente en el diseño XML. Aunque esto puede parecer un trabajo extra al principio sin ninguna razón, vale la pena adquirir el hábito de hacerlo, ya que verás el beneficio de ello cuando tus proyectos crezcan. Busca el archivo "res/values/strings.xml" en tu Package Explorer y ábrelo. Cambia a la pestaña "strings.xml" para editar el código.

Verás que Eclipse ya ha agregado algunas cadenas. Agrega otra, dándole un nombre y valor:

1
2	<string name="hello">Hello there</string>

Esto significa que si usas la misma cadena en más de un lugar en la interfaz de usuario de la aplicación, y si luego decides cambiarla, solo tienes que hacerlo en un lugar. Guarda el archivo de cadenas y vuelve al archivo de diseño. Cambia tu atributo TextView "text" para referirte a la cadena en el archivo de valores:

1
2	android:text="@string/hello"

Usamos el nombre de cadena precedido por "@string" para indicar a las herramientas de Android dónde encontrar el recurso de cadena. La advertencia debería desaparecer. Eclipse hace esto a menudo mientras codificas, para indicar errores y advertencias. Puedes elegir observar o no las advertencias, pero para los errores debes tomar medidas o tu aplicación no funcionará.

Paso 2

Después de TextView, agrega un botón:


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/click" />

El botón usa los mismos atributos que el TextView en este caso. Pero muchos más atributos son posibles y, en general, diferentes vistas requieren atributos diferentes. El valor del atributo "texto" aparece en el botón. Agrega la cadena a tu archivo "res/values/strings.xml" como antes:

1
2	<string name="click">Click Me!</string>

En el siguiente tutorial manejaremos los clics en el botón. Vuelve a tu archivo de diseño. Mira la vista de esquema a la derecha del editor, muestra otra interfaz para los elementos del archivo. Al hacer doble clic en los elementos enumerados, se salta a su ubicación en el código. También puedes expandir y contraer elementos principales. Esto es particularmente útil cuando tus diseños se vuelven más complejos.

Consejo: Para ordenar cualquier archivo que se abra en el editor de Eclipse, selecciona todo usando "Ctrl + A" y luego haz clic en "Ctrl + I" para aplicar la sangría.

4. Diseño gráfico

Paso 1

Asegúrate de que tu archivo de diseño esté guardado y cambia a la pestaña Diseño gráfico.

Puedes ver una representación visual de tu diseño a medida que lo diseñas. El área de Paleta a la izquierda te permite seleccionar elementos de IU y arrastrarlos al diseño. Sin embargo, para empezar, debes usar XML al menos hasta que tengas una idea de lo básico. XML te da control sobre los detalles, por lo que incluso si utilizas las herramientas gráficas, es probable que necesites editar los resultados XML.

En la parte superior de Graphical Layout hay una lista desplegable desde la que puedes seleccionar dispositivos para ver tu diseño, así como herramientas para cambiar de orientación y zoom. Experimenta con los controles de Diseño gráfico a medida que haces tus diseños. Hay varios otros elementos de diseño y configuraciones para explorar también.

Paso 2

Inicialmente, puedes observar que en el diseño los elementos visibles aparecen muy cerca del borde superior de la pantalla. Vamos a resolver esto. Vuelve a la pestaña de edición XML y agrega un atributo de margen a LinearLayout:

1
2	android:layout_margin="10dp"

Usamos "dp" para los píxeles independientes de la densidad, de modo que el diseño se ajusta automáticamente a la densidad de la pantalla del usuario. Guarda el archivo y vuelve a la distribución gráfica para ver el efecto.

Graphical Layout es una herramienta de referencia útil mientras haces tus diseños, pero es solo una guía. Para ver cómo aparecen tus diseños y funcionan mientras se ejecutan tus aplicaciones, debes cargarlos en dispositivos virtuales o físicos. Veremos esto más adelante en esta serie.

5. Opciones

Puedes incluir una variedad de tipos de diseño y vistas en las pantallas de tu aplicación, pero el proceso básico sigue siendo el mismo. Utilizamos LinearLayout arriba, pero hay muchos otros. Entre los más comunes están RelativeLayout, FrameLayout, AbsoluteLayout y GridLayout. Encontrarás todos estos tipos en la Paleta de diseño gráfico, así que puedes probar algunos de ellos y agregar algunas vistas de tu elección. Cuando agregas elementos de la herramienta Graphical Layout, cambia a XML cada vez para ver qué código de marcado produce.

La plataforma Android proporciona vistas para muchos propósitos comunes, como botones de opción, casillas de verificación y campos de entrada de texto. Esto ahorra en la cantidad de funcionalidad que implementas manualmente, pero si necesitas un elemento de UI que no se proporciona, puedes crear una clase de vista personalizada propia. En general, es mejor hacer esto solo si no tienes otra opción, ya que los elementos de UI estándar son más confiables en los dispositivos de los usuarios. También ahorran tiempo de desarrollo y prueba.

Conclusión

En este tutorial cubrimos los conceptos básicos necesarios para diseñar interfaces de usuario en Android, pero solo arañamos la superficie de lo que es posible. En la próxima parte de esta serie, agregaremos alguna interacción del usuario a la aplicación, y detectaremos y responderemos a los clics en el botón que agregamos. Después de eso, veremos los conceptos de Java más relevantes que debemos comprender sobre Android antes de profundizar en los diversos ingredientes y prácticas que intervienen en el desarrollo de la aplicación.