A continuación, vamos a explicar cómo crear un proyecto sencillo usando Eclipse y las librerías Android.
Vamos a partir del proyecto de ejemplo que hemos creado en el punto anterior.
El primer proyecto Android consiste en una pantalla muy sencilla que muestra un mensaje de bienvenida.
En la barra lateral Package Explorer de Eclipse, desplegamos las entradas haciendo clic en las flechas de los diferentes paquetes.
Si abrimos el fichero BienvenidoActivity.java, veremos el código fuente de la aplicación Android:
package es.mentor.unidad1.eje1.bienvenido;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class BienvenidoActivity extends Activity {
/** Método que se llama cuando se crea una actividad. */
public void onCreate(Bundle savedInstanceState) {
// Llamamos al método de la clase superior (Activity)
super.onCreate(savedInstanceState);
// Establecemos los contenidos de la Intefaz de usuario
// de forma “programada”.
TextView tv = new TextView(this);
tv.setText("¡Bienvenido al curso de Android de Mentor!");
setContentView(tv);
// Descomentar la siguiente sentencia para usar los layout en
// el diseño de la Interfaz Usuario. Si lo haces, debes
// comentar las 3 sentencias anteriores.
// setContentView(R.layout.main);
}
}
Fíjate en que la clase principal BienvenidoActivity de la aplicación se basa en la clase Activity de Android.
Una actividad (Activity) es el componente de la aplicación que realiza acciones. Una aplicación puede tener muchas actividades, si bien el usuario sólo interactúa con ellas de una en una. Android llama al método onCreate() cuando una actividad se inicia. En este método se lleva a cabo toda la inicialización de variables y configuración de la interfaz de usuario. Una actividad no está obligada a tener una interfaz de usuario, aunque generalmente la suele tener.
La interfaz de usuario de Android se compone de vistas (Views). Una vista es un objeto que define el diseño de la interfaz de usuario. como un botón, una imagen, una etiqueta de texto, etcétera. Cada uno de estos objetos se hereda de la clase principal View. En este ejemplo hemos utilizado la subclase TextView, que crea una etiqueta de texto.
En el ejemplo se crea una etiqueta TextView en el constructor de la Actividad. Para crear esta etiqueta es necesario pasar como parámetro una instancia del Contexto (Context) de la aplicación Android. Un Contexto es un identificador del sistema que sirve para tener acceso a recursos, a preferencias, a bases de datos, etcétera, de la aplicación. La clase Actividad se hereda de la clase Contexto; por lo tanto, se puede pasar esta Actividad como el Contexto de la aplicación escribiendo this.
Con el método setText() establecemos el texto contenido en la etiqueta.
Para acabar, usamos el método setContentView() para indicar a la Actividad el contenido de la interfaz de usuario.
Si ejecutas la aplicación en Eclipse deberás ver la siguiente ventana en el emulador:
Al ejecutar varias veces una aplicación desde Eclipse puede ocurrir que aparezcan los siguientes mensajes de error en la consola:
Estos mensajes de error:
[2011‐11‐20 09:18:15 ‐ unidad1.eje1.bienvenido] Application already deployed.
No need to reinstall.
[2011‐11‐20 09:18:15 ‐ unidad1.eje1.bienvenido] Starting activity
es.mentor.unidad1.eje1.bienvenido.BienvenidoActivity on device emulator‐5554
[2011‐11‐20 09:18:16 ‐ unidad1.eje1.bienvenido] ActivityManager: Starting:
Intent { act=android.intent.action.MAIN
cat=[android.intent.category.LAUNCHER]
cmp=es.mentor.unidad1.eje1.bienvenido/.BienvenidoActivity}
[2011‐11‐20 09:18:16 ‐ unidad1.eje1.bienvenido] ActivityManager: Warning:
Activity not started, its current task has been brought to the front
Indican únicamente que no se ha modificado el código fuente y que la aplicación se muestra
de nuevo en el primer plano de la pantalla del dispositivo virtual.
Cambio en la Interfaz de usuario con Layout
Los Layout son elementos no visibles que establecen cómo se distribuyen en la interfaz del usuario los componentes (widgets) que incluyamos en su interior. Podemos pensar en estos elementos como paneles donde vamos incorporando, de forma diseñada, los componentes con los que interacciona el usuario.
Nota: La clase Layout se hereda, como el resto de componente, de la clase Vista. A lo largo del curso nos referimos a los componentes de Android como Vistas (Views) o como Widgets, tanto si son visibles (botones, texto, menús….) como si son elementos de diseño (layout).
En el ejemplo anterior hemos utilizado un diseño de interfaz de usuario "programado", es decir, se construye esta interfaz con sentencias Java en el código fuente. Si ya has desarrollado interfaces de esta manera, sabrás que pequeños cambios en su diseño pueden dar lugar a grandes modificaciones en el código fuente.
Al ser Android un lenguaje nuevo, permite desarrollar interfaces usando archivos de diseño (Layout) XML. La forma más fácil de explicar este concepto es mostrar un ejemplo. El fichero res/layout/main.xml define el diseño de la interfaz del usuario:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/bienvenido"/> </LinearLayout>
La estructura general de un archivo de diseño de interfaz XML de Android es simple. Se trata de un árbol de elementos XML, donde cada nodo es el nombre de una clase Vista (en este ejemplo, usamos las clases LinearLayout y TextView). Puedes utilizar el nombre de cualquier clase de tipo Vista (View) de Android o, incluso, una clase Vista personalizada por el programador.
El Layout LinearLayout apila secuencialmente todos sus elementos hijos de forma horizontal o vertical. En el apartado siguiente veremos diferentes tipos de paneles de diseño y sus características.
Esta estructura XML hace que sea más fácil y rápido crear las interfaces de usuario.
Este modelo se basa en el modelo de desarrollo web, donde se separa la presentación (interfaz de usuario) de la lógica de la aplicación (encargada de leer y escribir la información).
En el ejemplo de XML anterior sólo hay un elemento Vista: TextView, que tiene tres atributos y un elemento de diseño Layout: LinearLayout, que tiene cuatro atributos. A continuación, mostramos una descripción de los atributos:
| Atributo | Descripción |
|---|---|
| xmlns:android | Esta declaración indica que vamos a usar el espacio de nombres (la terminología) de Android para referirnos a los atributos que se definen a continuación. |
| android:id | Asigna un identificador único para el elemento correspondiente. Este identificador sirve para poder acceder al componente desde el código fuente o desde las declaraciones de otros elementos en este archivo XML. |
| android:layout_width | Define el largo que debe ocupar la Vista. En este caso, indicamos que el TextView debe ocupar toda la pantalla con "fill_parent". |
| android:layout_height | Similar al atributo anterior, en este caso, se refiere al ancho de la Vista. |
| android:text | Establece el texto que la Vista TextView debe mostrar. En este ejemplo se utiliza una cadena que se establece en el archivo res/values/strings.xml. |
El título de la aplicación “Unidad1 - Ejemplo 1: Bienvenido” y la frase "¡Bienvenido al curso de Android de Mentor!", que aparecen en el área del usuario, se definen en el fichero res/values/strings.xml.
El SDK de Android permite definir los ficheros de tipo XML de dos formas: a través de un editor visual o directamente en el archivo XML. Se puede cambiar entre las dos formas haciendo clic en la pestaña de la parte inferior de la ventana. Por ejemplo, en el Package Explorer, seleccionamos res/layout/main.xml y hacemos clic en “Graphical Layout”:
En esta ventana podemos diseñar visualmente la pantalla de la aplicación Android arrastrando con el ratón los componentes que aparecen en el apartador “Palette”.
Si en el Package Explorer seleccionamos res/layout/strings.xml y hacemos clic en “Resources”:
Usando en esta ventana el botón “Add” podemos añadir visualmente los diferentes tipos de recursos de Android.
Para crear la primera aplicación hemos usado componentes (Widgets o Vistas) usuales de Android. En el siguiente apartado de teoría explicaremos en detalle el tipo de componentes disponibles por defecto y cómo usarlos para diseñar las pantallas que servirán de interfaz gráfica al usuario.
Fichero AndroidManifest.xml: contiene la definición en formato XML de las características principales de la aplicación, como su identificación (nombre, versión, icono, etcétera), sus componentes (Actividades, Mensajes, Servicios, etcétera) o los permisos necesarios para su ejecución. Más adelante veremos otros detalles de este fichero.
En este fichero hay que declarar la Actividad para que Android tenga acceso a la misma.
Si abres el archive manifest, verás que existe el siguiente elemento <activity>:
<?xml version="1.0" encoding="utf‐8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
...
<activity android:name=".BienvenidoActivity"
android:label="@string/app_name">
...
</manifest>
En este fichero se pueden definir varios atributos para establecer la etiqueta de la actividad, su icono o el tema de estilo de la interfaz de usuario. El único atributo obligatorio es android:name, que especifica el nombre de clase de la actividad. Es importante usar siempre el mismo nombre de Actividad ya que otra aplicación puede iniciarla.
Importante: Aunque el código fuente de este ejemplo se encuentra disponible en la carpeta de ejemplos de esta unidad, es fundamental que crees este proyecto Android desde el principio para entender la secuencia de pasos dados y los ficheros necesarios.
Además, si no has usado nunca el entorno de desarrollo Eclipse - Android, adquirirás soltura utilizándolo.
Compartamos el conocimiento. Hasta la próxima oportunidad!
Twittear
