5.3. Componer la interfaz

En estos momentos, el proyecto es equivalente al “HolaMundo” que construimos en el capítulo 3. A partir de aquí, comenzaremos a crear la interfaz de nuestro programa, partiendo de la que Eclipse nos ha creado de forma predeterminada.

En Android, la interfaz (lo que ve el usuario) y la funcionalidad (el programa en sí), se encuentran separados en dos archivos distintos:

La Interfaz se encuentra dentro de un archivo en formato XML, que podemos encontrar en el árbol del proyecto dentro de /res/layout/main.xml (puedes verlo en la primera imagen del siguiente paso a paso).

La funcionalidad se encuentra en un archivo con código fuente escrito en Java, que podemos encontrar dentro de /src/MiniCalculadora.PRuiz/MiniCalculadoraActivity.java (puedes verlo en el apartado siguiente). Por supuesto, debes recordar que MiniCalculadora.PRuiz hace referencia al nombre de paquete y que MiniCalculadoraActivity.java hace referencia al nombre de la actividad principal de nuestro proyecto. Ambos los elegimos en el paso 5 del apartado anterior y, lógicamente, variarán de un proyecto a otro.

En este apartado, vamos a construir la apariencia de la pantalla principal de nuestro programa, añadiéndole los controles (views) adecuados. Esta tarea se puede hacer de dos formas: en modo texto, accediendo a la solapa main.xml del panel central o, en modo gráfico, eligiendo la solapa Graphical Layout de dicho panel central (ver de nuevo la primera imagen del siguiente paso a paso). En nuestro caso, para tratar de simplificar al máximo el trabajo, nos decantaremos por esta segunda opción.

Veamos cómo conseguirlo, como siempre, paso a paso:

En el Explorador de Paquetes de Eclipse elegimos la entrada /res/layout/main.xml y, a continuación, hacemos clic sobre la solapa Graphical Layout.

1

En el panel central veremos una representación gráfica de la pantalla de un dispositivo Android.

A partir de aquí, nos centraremos en la incorporación de los elementos de la pantalla.

2

Primero, hacemos clic en la paleta del panel central sobre la categoría Text Fields.

3

…Y arrastramos el primer elemento (etiquetado como abc) sobre la representación de la pantalla.

Este recurso permitirá al usuario de nuestro programa escribir un texto cualquiera, aunque nosotros lo destinaremos a la entrada de la primera cantidad a sumar.

4

Cuando se dibuje el nuevo elemento, podremos redimensionarlo para que ocupe todo el ancho de la pantalla

Lo siguiente será establecer que el tipo de dato que podrá escribir el usuario será numérica y con signo.

5

Para conseguirlo, obtenemos el menú de contexto del cuadro de texto (clic con el botón derecho sobre él) y elegiremos InputType > NumberSigned.

6

Siguiendo el mismo procedimiento, añadimos un segundo campo de texto, cambiamos su tamaño y establecemos también el tipo de entrada a NumberSigned.

Bajo los cuadros de texto, añadiremos cuatro botones, pero queremos que se alineen horizontalmente.

7

Para conseguirlo, elegimos la categoría Layouts y arrastramos hasta nuestra ventana el objeto LinearLayout.

Ahora si, podemos añadir los botones.

8

Activamos la categoría Form Widgets, hacemos clic sobre el elemento etiquetado Button y lo arrastramos sobre el Layout creado en el punto anterior.

Inmediatamente, aparecerá el nuevo botón en la pantalla.

9

El siguiente objetivo será cambiar el texto que aparece sobre él…

10

…Para conseguirlo, hacemos clic sobre él con el botón derecho del ratón y elegimos Edit Text

Aparecerá la ventana Resource Chooser para que elijamos uno de los títulos que hayamos creado antes

11

Como el título que necesitamos aún no existe, hacemos clic en el botón New String

En la ventana que aparece, rellenaremos el campo String con el texto que debe aparecer sobre el botón (en este caso, sólo un signo de suma) y el campo New R.string con el nombre que le daremos al recurso (en el ejemplo, tituloBotonSumar).

12

Cuando hayamos terminado, haremos clic sobre el botón OK.

De vuelta en la ventana Resource Chooser, sólo nos queda asegurarnos de que se encuentra seleccionado el recurso que acabamos de crear (tituloBotonSumar).

13

…y hacer clic en el botón OK.

A continuación, repetiremos los pasos anteriores (del 8 al 13), una vez por cada botón que queramos crear. En nuestro caso, necesitaremos tres botones más, para la resta, la multiplicación y la división.

14

El resultado final será como el que puedes ver en la imagen.

Si quieres ver lo que ha ocurrido en la trastienda, sólo tienes que consultar el contenido del archivo strings.xml.

15

…lo puedes encontrar en el árbol del proyecto, dentro de res/values.

Para completar la parte gráfica de nuestro proyecto, aún nos falta una etiqueta de texto que nos muestre el resultado cuando efectuemos una operación.

16

Por lo tanto, volvemos a la categoría Form Widgets, arrastramos a nuestro proyecto el objeto Large Text y lo ensanchamos para que ocupe todo el ancho de la pantalla.

Cuando escribamos el código de nuestro programa, necesitaremos que pueda cambiarse el contenido de la etiqueta.

17

Para conseguirlo, hacemos clic con el botón derecho del ratón sobre ella y, en su menú de contexto, elegiremos Other properties > Defined by TextView > Editable > True.

Si miramos el código fuente (haciendo clic en la solapa main.xml) veremos que la propiedad android:editable contiene el valor “true”. Esto nos da una idea de que, en realidad, todo el proceso podemos hacerlo a mano.

18

De paso, podemos cambiar el texto inicial, que ahora vale Large Text para que aparezca Resultado:.

Si ahora volvemos a mostrar la interfaz gráficamente, sólo nos quedaría eliminar la etiqueta “Hello World, MiniCalculadoraActivity!”, que creó automáticamente el asistente cuando iniciamos el proyecto.

19

Con esto, habremos completado la apariencia de nuestro programa.

Como ya hemos dicho más arriba, todo lo que hemos hecho con la ayuda de la interfaz gráfica, podíamos haberlo escrito a mano.

Para crear los valores de las etiquetas, sólo habrías tenido que editar el archivo strings.xml (accediendo a res/values/strings.xml en el Explorador de paquetes de Eclipse) y escribir el siguiente contenido:

string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
 <string name="hello">Hello World, MiniCalculadoraActivity!</string> 
 <string name="app_name">MiniCalculadora</string> 
 <string name="tituloBotonSumar">+</string> 
 <string name="tituloBotonRestar">-</string> 
 <string name="tituloBotonMultiplicar">*</string> 
 <string name="tituloBotonDividir">/</string> 
 
</resources>

A continuación, de la misma forma, podríamos haber creado la interfaz gráfica. En lugar de ir a la solapa Graphical Layout dentro de /res/layout/main.xml, habríamos elegido la solapa main.xml. Así, podríamos escribir de forma manual el contenido del archivo, que en nuestro caso es el siguiente:

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical" > 
 
 <EditText 
 android:id="@+id/editText1" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" > 
 
 <requestFocus /> 
 </EditText> 
 
 <EditText 
 android:id="@+id/editText2" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" > 
 
 <Button 
 android:id="@+id/button1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="@string/tituloBotonSumar" /> 
 
 <Button 
 android:id="@+id/button2" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="@string/tituloBotonRestar" /> 
 
 <Button 
 android:id="@+id/button3" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="@string/tituloBotonMultiplicar" /> 
 
 <Button 
 android:id="@+id/button4" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="@string/tituloBotonDividir" /> 
 
 </LinearLayout> 
 
 <TextView 
 android:id="@+id/textView1" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:editable="true" 
 android:text="Resultado: " 
 android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
</LinearLayout> 

Antes de continuar, me gustaría que prestaras atención a algunos elementos del archivo main.xml. En concreto, me refiero a los siguientes:

  • android:id es la propiedad que contiene el identificador de cada objeto .
  • android:layout_width y android:layout_height contienen, respectivamente, la anchura y altura del objeto.
  • android:textcontiene el texto que mostrará un objeto de forma predeterminada.
    • Puede ser un valor constante, como “Resultado: “.
    • O puede ser la referencia a un recurso definido previamente, como “@string/tituloBotonDividir“, que hace referencia al recurso tituloBotonDividir definido dentro de strings.xml.

Otra propiedad que, aunque no aparece en la versión actual de main.xml, la utilizaremos más adelante, es android:onClick. Esta propiedad contiene el nombre del método que se ejecutará cuando hagamos clic sobre el elemento que la contiene. Dicho método será necesariamente público y en el siguiente apartado veremos cómo debemos crearlo.

Por último, te recuerdo que el uso de la interfaz gráfica y el modo texto funciona en ambas direcciones. Es decir, puedes crear un elemento en modo gráfico y después modificarlo en la ventana de texto o puedes crear un elemento en modo texto y después verlo o modificarlo en la interfaz gráfica.

A medida que vayas avanzando en tu destreza en la programación de Android, la posibilidad de alternar entre el modo texto y el modo gráfico te ofrecerá una gran versatilidad a la hora de crear tus propios proyectos, por lo que es una opción que siempre debes tener en mente.


Anterior

Contenido

Siguiente