La columna 80

El blog técnico-personal de Ángel J. Vico… en español

Diseñando interfaces en Android: codificación

Posted by Ángel J. Vico en 9 de octubre de 2011

Hagamos un rápido repaso de lo principal que hemos visto hasta ahora sobre creación de interfaces de usuario en Android:

  • Las aplicaciones Android muestran su interfaz por medio de las actividades (post), las cuales tienen un ciclo de vida que es mucho más que simplemente mostrarse ante el usuario y permitirle que interactúe (post 1 y post 2).

  • La interfaz de usuario se crea incluyendo vistas en las actividades. El hecho de que algunas de esas vistas actúen como contenedores de otras vistas permite diseñar interfaces de usuario complejas partiendo de elementos bastante sencillos (post).

  • La mejor forma de diseñar una interfaz de usuario es hacerlo en un archivo XML, accediendo a las propiedades de las vistas por medio de atributos directamente en el código XML (post). Por su parte, las vistas contenedoras proporcionan parámetros de diseño a las vistas que contienen, accesibles también por medio de atributos en el XML (post).

Aunque en todo momento hemos ido relacionando los elementos que se utilizan en XML con clases y métodos Java, lo cierto es que a la hora de proponer ejemplos me he limitado a mostrar código XML. No hemos visto cómo utilizar esos archivos XML en un proyecto ni cómo crear esas mismas interfaces directamente en Java. En este post voy a poner remedio a ambas cosas.

Utilizar el diseño en una actividad

En el post sobre diseño en XML utilizamos como ejemplo el código que se muestra en la siguiente captura:

Ejemplo de diseño en XML

Si queremos utilizar este diseño necesitamos un proyecto y una actividad. Ya vimos en un post anterior cómo crear un proyecto. Veamos ahora cómo agregar una nueva actividad:

  1. Desplegamos el proyecto en la vista Project Explorer (o Package Explorer, la que más nos guste) de Eclipse y hacemos doble clic en el archivo AndroidManifest.xml para abrirlo.

  2. En la parte inferior del editor del manifiesto seleccionamos la pestaña Application.

    Editor del manifiesto de la aplicación Android

  3. En la parte inferior de la pestaña, en la sección Application Nodes, pulsamos el botón Add. Se muestra una lista de los distintos tipos de nodos que podemos crear.

    Selección del tipo de nodo de aplicación a crear

  4. Seleccionamos Activity y pulsamos OK (no es necesario escribir nada en el cuadro de texto). Se añade un nuevo nodo Activity a la lista y se muestra una lista de atributos a la derecha (Attributes for Activity). Podemos pulsar sobre los triángulos que hay a la izquierda de Application Toggle y Application Attributes para contraer esas secciones y así disponer de más espacio par los atributos de la actividad:

    Manifiesto - Atributos de la actividad

  5. De todos los atributos disponibles, el único que es obligatorio (y el único que vamos a definir) es el nombre de la actividad. En lugar de escribir el nombre directamente en el cuadro de texto, pulsamos en Name* para abrir el cuadro de diálogo New Java Class.

    Nueva clase Java

  6. Lo único que tenemos que hacer es escribir el nombre de la actividad en el cuadro de texto Name y pulsar Finish. El nombre tiene que cumplir los requisitos para los nombres de clases en Java (sin símbolos, sin espacios, etc.). El resto de campos los dejamos como están. Tras pulsar Finish se cierra el cuadro de diálogo y se muestra el código de la recién creada actividad.

    Código predeterminado de una actividad

  7. No conviene que nos olvidemos de guardar los cambios que hemos hecho en el manifiesto. Para ello pulsamos en su pestaña y seleccionamos File | Save en el menú de Eclipse.

Crear una nueva actividad en el proyecto no nos añade un diseño XML (porque no es algo obligatorio), por lo que tendremos que agregarlo nosotros siguiendo los siguientes pasos:

  1. Desplegamos el proyecto en la vista Package Explorer de Eclipse, desplegamos la carpeta res y pulsamos con el botón derecho del ratón sobre layout. En el menú que se despliega seleccionamos New | Other. Se nos muestra una lista, organizada por carpetas, de todo lo que podemos crear en nuestra versión de Eclipse.

    Elementos disponibles en Eclipse

  2. Desplegamos la carpeta Android y seleccionamos Android XML File. Después pulsamos Next para mostrar el cuadro de diálogo New Android XML File.

    Nuevo archivo XML para Android

  3. Este cuadro de diálogo sirve para crear muchos de los diferentes archivos XML de recursos que se pueden utilizar en un proyecto Android. Como nosotros vamos a crear un diseño, nos aseguraremos de que esté seleccionada la opción Layout en la lista What type of resource would you like to create?. Luego, escribimos el nombre que le queremos dar al archivo en el cuadro de texto File y pulsamos Finish. Android exige que escribamos el nombre en minúsculas. La extensión no es necesario escribirla. Al terminar se abre el nuevo archivo creado en el modo de edición gráfica.

    Editor gráfico de diseños

Como lo que queremos es escribir directamente el código (o copiarlo del otro post), tenemos que pulsar sobre la pestaña inferior con el nombre del archivo, a la derecha de Graphical Layout, para mostrar el editor de código XML. Ahora sólo nos queda reemplazar el código que se genera de forma predeterminada por el nuestro y guardar el archivo.

El lugar adecuado para cargar el diseño es, como ya vimos, el método onCreate. El código necesario para que el diseño que hemos creado en XML se muestre en la actividad es el siguiente, asumiendo que hemos guardado el XML anterior en la carpeta res/layout con el nombre prueba.xml:

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
   super.onCreate(savedInstanceState);
   setContentView(R.layout.prueba);
}

Como se ve en el código, lo único que hace falta para cargar un diseño completo es llamar al método setContentView. El parámetro que recibe este método es un identificador que crea el compilador al procesar el archivo XML.

Para ver el resultado tenemos que asegurarnos de que la nueva actividad se muestre cuando se inicie la aplicación. Eso se controla en el manifiesto de la aplicación. Tenemos dos formas de hacerlo: usando el editor visual o modificando directamente el código. Veamos como se hace con el editor:

  1. Abrimos el archivo AndroidManifest.xml, si no estaba abierto.

  2. Seleccionamos la pestaña Application en la parte inferior. Tras plegar las secciones Application Toggle y Application Attributes veremos la lista de nodos con la actividad que creamos antes.

    Actividad en el editor del manifiesto

  3. Pulsamos con el botón derecho sobre la actividad en la lista y escogemos la opción Add en el menú que se despliega. Se muestra una ventana con los elementos que podemos crear en ese punto.

    Elementos que se pueden crear en una actividad

  4. Nos aseguramos de tener seleccionada la segunda opción, Create a new element in the selected element y luego escogemos Intent Filter en la lista de elementos disponibles. Finalmente pulsamos OK.

    Actividad con un Intent Filter

  5. Ahora repetimos el mismo proceso pulsando sobre el Intent Filter con el botón derecho del ratón y escogiendo Add.

    Elementos que se pueden crear en un Intent Filter

  6. En la ventana que se abre seleccionamos Action y pulsamos OK.

    Intent Filter con Action

  7. Al elemento Action hay que ponerle un nombre. Para ello desplegamos la lista Name en la sección Attributes for Action y seleccionamos android.intent.action.MAIN.

  8. Tenemos que añadir un elemento más al Intent Filter, así que volvemos a pulsar con el botón derecho sobre Intent Filter, escogemos Add, seleccionamos Category y pulsamos OK.

    Intent Filter con Action y Category

  9. También tenemos que asignar un nombre al elemento Category, así que desplegamos la lista Name y escogemos android.intent.category.LAUNCHER.

  10. Finalmente, grabamos los cambios con File | Save.

Si pulsamos en la última pestaña inferior, AndroidManifest.xml, podemos ver el código XML que se ha creado:

<activity android:name="IUIntroXML">
   <intent-filter>
      <action android:name="android.intent.action.MAIN"></action>
      <category android:name="android.intent.category.LAUNCHER"></category>
   </intent-filter>
</activity>

Se puede observar claramente que el código reproduce la estructura que hemos ido creando. Podemos, por tanto, conseguir lo mismo añadiendo esas mismas líneas (el <intent-filter> y su contenido) a cualquier actividad que tengamos en la aplicación. Además, aunque lo habitual es que sólo una de ellas esté configurada para ser actividad de inicio, podemos tener este Intent Filter en varias actividades a la vez. En esta situación, cualquiera de las actividades marcada con la acción MAIN puede ser la primera que se muestre al iniciar la aplicación. Y cualquier actividad con la categoría LAUNCHER tendrá un icono en el lanzador de aplicaciones del dispositivo cuando la instalemos.

Creando la interfaz de usuario por código

Para terminar este post, veamos el código que permite crear el mismo diseño que el archivo XML mostrado arriba, pero sin utilizarlo:

/** Called when the activity is first created. */
@Override
public void onCreate (Bundle savedInstanceState)
{
   super.onCreate(savedInstanceState);

   TextView etiqueta1 = new TextView(this);
   etiqueta1.setText("Esto es una etiqueta de texto");
   etiqueta1.setLayoutParams(new LayoutParams(
      LayoutParams.WRAP_CONTENT,
      LayoutParams.WRAP_CONTENT));

   Button boton1 = new Button(this);
   boton1.setText("Esto es un botón");
   boton1.setLayoutParams(new LayoutParams(
      LayoutParams.WRAP_CONTENT,
      LayoutParams.WRAP_CONTENT));

   LinearLayout principal = new LinearLayout(this);
   principal.setOrientation(LinearLayout.VERTICAL);
   principal.setLayoutParams(new LayoutParams(
      LayoutParams.FILL_PARENT,
      LayoutParams.FILL_PARENT));
   principal.addView(etiqueta1);
   principal.addView(boton1);

   setContentView(principal);
}

Se crea un objeto para cada una de las vistas. En el constructor se pasa la propia actividad (this) como contexto. La vista la necesita para acceder a sus recursos.

Las propiedades de cada vista se modifican con los métodos set correspondientes. Los parámetros, como ya hemos mencionado en posts anteriores, son diferentes. Se asignan mediante el método setLayoutParams utilizando una clase LayoutParams. En este caso se ha usado la versión más general, definida como clase anidada en ViewGroup, en lugar de la específica del LinearLayout (que tiene el mismo nombre: LayoutParams).

Una vez creadas las tres vistas, se añaden los widgets al diseño, en el mismo orden en que se pusieron en el archivo XML, dado que es el orden en que queremos que se muestren. Para ello se utiliza el método addView que proporciona la clase ViewGroup.

Finalmente se asigna el diseño a la actividad, utilizando una sobrecarga del mismo método setContentView que usamos para cargar el diseño XML.

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

Una respuesta to “Diseñando interfaces en Android: codificación”

  1. Muy currado este blog de android. Me lo apunto. Enhorabuena

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