Primeros pasos en Android: una app muy sencilla (III)

Ejecución de la app y cambios

Cómo ya estaremos un poco hartos de preparativos  y teoría, vamos a ejecutar el proyecto antes de nada. Podemos ejecutarlo sin haber escrito una línea de código gracias a que le pedimos al gestor de nuevo proyecto que nos crease una actividad a la que llamamos Principal.

Para ejecutar un proyecto tenemos varias opciones. La mas segura es hacer click derecho en el proyecto que queremos ejecutar, ir a Run As en el menú contextual y, allí, elegir Android Application. Se abrirá el emulador (o AVD) en una ventana ajena a Eclipse (de hecho, puedes cerrar Eclipse que el emulador sigue por su cuenta) y arrancará el sistema. Recomiendo dejar el AVD siempre abierto cuándo estemos trabajando, ya que una vez activo, el sistema virtual no tiene que volver a iniciarse, lo que agilizará enormemente las pruebas y depuración de las aplicaciones.

Ni que decir tiene que para probar nuestras aplicaciones el Target o versión de Android del AVD debe ser igual o inferior al Build Target de nuestro proyecto. Aquí podemos recordar cómo se crea un AVD nuevo, si el que creamos siguiendo los pasos de la instalación y preparación de Eclipse no tenía el Target adecuado.

App ejecutándose en el AVD

Como se puede apreciar, la app no tiene mucha chicha. Meramente sale una ventana con una barra de título – que lleva, en este caso, el nombre de nuestra app – y un mensaje de texto con el nombre de la actividad. Bastante sosa ¿no?

Vamos a echar un vistazo a las “tripas” de esta app tan sencilla. En el Package Explorer vamos a ir a los siguientes puntos

  • src/com.alberovalley.primeraapp > Aquí éstará la única clase java del proyecto, la actividad Principal.java.
  • res/layout > Aquí está el fichero xml que contiene el muy simple diseño de la interfaz de nuestra app, llamado main.xml.
  • res/values > aquí está el fichero xml en el que se guardan las cadenas de texto, llamado strings.xml

Empezaremos por el final. Vamos a abrir strings.xml. Para sorpresa de muchos, lo que encontramos no es el código xml, sino una interfaz para poder añadir elementos al fichero como vemos en esta imagen. interfaz de strings.xmlAhora mismo hay dos cadenas definidas, hello y app_name. Vamos a señalar la primera y veremos que a la derecha de la interfaz nos aparece, además de una explicación de que el elemento señalado es una cadena de texto (String) y de cómo incluir apóstrofes, dos campos: uno con el nombre de la cadena (en este caso “hello”) y otro con el valor de dicha cadena (“Hello World, Principal!”). Vamos a cambiar el valor por, por ejemplo, “¡Hola, Albero Valley!” y guardamos los cambios, ya sea con ctrl+s o con File > Save o con el botón de guardar de la barra de herramientas. Tras guardar, volvemos a ejecutar la aplicación para ver los cambios realizados.

En el AVD veremos que vuelve momentáneamente a la pantallahome del sistema y, tras ello, vuelve a ejecutarse nuestra app. Esta vez el mensaje es “¡Hola, Albero Valley!”, justo el que habíamos puesto nosotros.

Podemos, si queremos, jugar un poco mas con las cadenas. Lo que debemos cambiar siempre es el value, el valor de la cadena, ya que si cambiamos elname o nombre tendríamos problemas parecidos al de cambiar el nombre de una variable en dónde se le asigna el valor pero no dónde se utiliza dicha variable… Vamos, que daría error y hasta antes de ejecutar.

erroresDe hecho, vamos a hacer la prueba. Vamos a cambiar el nombre de hello por el de chello. En cuanto guardemos los cambios podremos ver en el Package Explorer que algumensaje de errornas carpetas tienen una marca roja. Si intentásemos ejecutar el proyecto nos saldría un mensaje de error que, además de informarnos de la existencia de errores de compilación, nos insta a solventarlos.

Esto sucede porque a la cadena hello se le hace referencia en otra parte del proyecto y, al cambiar “a las bravas” el nombre, el compilador se da cuenta de que tiene una referencia huérfana y marca el error. Si miramos dónde salen las marcas rojas que indican el error dentro del Package Explorer veremos que es en el fichero de diseño (o fichero de layout) dónde se encuentra el error, así que vamos a por él.

Conforme abrimos el fichero de layout notaremos que algo tarda en cargar. Es la representación gráfica de lo que hay diseñado en el fichero. En teoría, esta parte puede usarse como editor WYSIWYG, pero creo que lo mejor es hacer la maquetación desde el código xml e ir viendo los resultados en este editor. Se obtiene una mayor precisión de qué va dónde si se hace a mano.

Al igual que el fichero strings.xml, si miramos bien debajo veremos estas dos pestañaseditor gráfico o código xml con las etiquetas Graphical Layout para el editor gráfico, que es dónde estamos ahora; y main.xml que es para ver el código xml del fichero. Pulsaremos en la segunda pestaña para ver el código del layout.

Podremos observar en el código que hay una línea subrayada en rojo (cómo los errores ortográficos de un editor de textos, por ejemplo) y una marca de error a la izquierda de la misma. Si dejamos el cursor sobre la marca de error, un mensaje nos indicará que el recurso con dicho nombre no existe. Volvamos a renombrar la cadena en el fichero strings.xml (podemos aprovechar para entrar en el código xml del fichero para ver cómo es) a hello antes de regresar al fichero layout para explicar lo que aquí vemos.

<!--?xml version="1.0" encoding="utf-8"?-->

La primera línea de los xml siempre es ésta.

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

El primer elemento del diseño es un LinearLayout. Los elementos de tipo Layout son contenedores del resto de objetos que tendrá la ventana. Sus atributos nos indican que la orientación de este contenedor será vertical (orientation=”vertical”: si hubiera mas de un elemento, estos aparecerían uno debajo de otro); y que llena todo su “contenedor padre” (que en este caso es la pantalla misma) tanto a lo ancho como a lo alto (layout_width & layout_height = fill_parent).

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

Los Textview son elementos sin hijos (todo lo que haya dentro de los elementos Layout se considera “hijos” de dicho elemento) que muestran el texto que se les indique, ya sea a nivel de xml o a nivel de código java. En este caso, los atributos nos indican que el elemento ocupará todo el ancho del contenedor padre (fill_parent), que la altura que ocupe será la que precise en función de la longitud del texto mostrado (wrap_content) y que el texto a mostrar es la variable hello dentro del fichero strings.xml cuya referencia es @strings/hello.

</LinearLayout>

El cierre del elemento LinearLayout. Cómo en cualquier variante de lenguaje de marcado (xml, html, etc) los elementos que puedan contener “hijos” deben cerrarse.

Vamos a copiar el código del TextView y lo vamos a pegar justo debajo. Dado que no tiene el atributo android:id, no causará conflicto alguno y así podremos ver cómo funciona un LayoutLinear cuando tiene mas de un objeto dentro.

Cuanddos textviews, uno debajo del otroo esté copiado y pegado, vamos a la pestaña Graphical Layout y ponemos el zoom al 100% (la lupa con un “1” arriba a la derecha de la ventana del main.xml). Veremos que aparece dos veces el mismo mensaje que teníamos en la cadena hello, y que sale una debajo de la otra. Eso se debe a que en este tipo de layout (LinearLayout) los elementos salen bien uno debajo de otro (orientación vertical) o bien uno junto al otro (orientación horizontal).

Vamos a probar ahora a cambiar la orientación del LinearLayout. Eso es tan fácil como sustituir el valor “vertical” por “horizontal”. Guardamos los cambios y miramos en el editor gráfico, pero sólo sale uno. ¿Por qué será? La respuesta está en los atributos de los TextViews clonados: se les ha indicado que cada uno debe ocupar TODO el ancho de su contenedor padre (layout_width=”fill_parent”), por lo que podemos ver el primero, pero el segundo sale fuera de pantalla. Para poder ver ambos, vamos a cambiar el valor “fill_parent” del primer TextView por “wrap_content”, que hará que ocupe el ancho que necesite según el texto que lleve nada mas. Guardamos cambios, vamos al editor gráfico y tachán:orientación horizontal

Las líneas azules representan los límites de sendos TextViews. Se hacen visibles si haces click (shift + click si quieres ver mas de uno a la vez)  en el elemento cuyo contorno quieras ver. Se observa que el primer TextView, aquel cuyo ancho hemos delimitado como “envuelve el contenido”, es mas estrecho que el segundo, que sigue ocupando todo el ancho del contenedor padre (para lo cual cuenta desde dónde arranca el propio TextView hasta el final, no tiene que superponerse al anterior).

Por último, vamos a echar un vistazo al código de la actividad.

<pre>public class Principal extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Toda actividad tiene que arrancar, para lo cual tenemos el método onCreate heredado de la clase madre Activity. El Bundle es un objeto de una clase específica Android que sirve para mapear cadenas de caracteres a tipos Parcelable, clases cuyas instancias pueden ser guardadas en y restauradas de un Parcel, un contenedor de mensajes diseñado como transporte de comunicación inter procesos.

Tras llamar al método padre pasándole la instancia guardada, lo siguiente es decirle a la actividad qué fichero layout define la apariencia de su ventana con el setContentView. Las referencias en java a los recursos suelen empezar por R (la clase generada automáticamente que tiene referencias en tiempo de compilación a los recursos ‘externos’), seguidpo por el tipo de recurso que se desea y el fichero o variable concretos. En este caso, como se busca el fichero main y es un layout, la referencia es R.layout.main.

En el próximo artículo crearemos nuevas cadenas en el fichero strings.xml; haremos los cambios pertinentes para poder manejar los elementos del layout desde el código java y probaremos a usar botones para ir experimentando con eventos de interfaz.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: