Desarrollo de interfaces gráficas

Al desarrollar aplicaciones con Android uno de los enfoques principales de esta plataforma es proporcionar un entorno mediante el cual los desarrollos de aplicaciones sean muy prácticos. Básicamente se tienen varias posibilidades para el diseño de una interface y las menciono a continuación:

• Por medio de la herramienta visual que se integra con eclipse.
• Manualmente afectando el archivo que se localiza en la carpeta de proyecto llamada layout con nombre “main.xml”.
• La edición se puede hacer por medio de un editor de XML o de texto. Diseño de interface a nivel código.

Como se puede ver son varias las opciones que se pueden escoger para el diseño de un interfaz en android. En mis prácticas realizadas y por simpleza recomiendo la segunda opción ya que la edición de XML es muy simple y permite un mayor control de los elementos a pintar sobre la interface. Las otras dos opciones tienen sus desventajas por ejemplo: la opción 1 hace que el diseño sea muy rápido pero hay veces donde en la definición de los elementos puede existir un detalle que a simple vista no se podría modificar y solo por medio de la parte manual lograrlo, por otro lado la versión de código es muy talachuda y requiere de mayor esfuerzo para realizarla.

Para ejemplificar lo que menciono vamos a hacer un ejemplo de una interface llena de botones manejando los elementos disponibles para diseño de interfaces proporcionados por android.

Primeros Pasos

Lo primero es instalar Android-Para mayor información revisen el manual que se encuentra en:

http://www.ubicuos.com/2010/03/25/instalacion-y-configuracion-de-android-en-linux/#more-780

Después de haber instalado el SDK y configurado el emulador de Android, podemos empezar a ver las características de diseño de interfaces.

Layouts.

Una de las principales cosas a definir cuando construimos una interface de usuario es el ordenamiento que se tendrá de los componentes que queremos pintar. Por ejemplo podríamos definir que los componentes se agregaran de manera horizontal o vertical en una línea. También definirlos en un formato de tabla controlando las posiciones en columnas y filas. Entre los layouts manejados por android tenemos los siguientes:

LinearLayout: Este layout ordena a sus elementos en una línea en sentido horizontal o vertical agregándolos uno por uno en el orden en que se van definiendo.

FrameLayout: Es el tipo más simple de layout que permite agregar un solo elemento en un espacio en blanco definido.

TableLayout: Este layout agrega sus elementos en columnas y filas.

RelativeLayout: Este layout permite agregar elementos respecto a uno previo. Esto significa que el posicionamiento se administra según la posición del elemento anterior.

Ejemplo LinearLayout:

Orden Vertical.

Orden Horizontal.

Ejemplo FrameLayout:

Solo un elemento se agrega a este layout

Ejemplo TableLayout:

Ejemplo RelativeLayout:

En estos ejemplos que se muestran, podemos ver los layouts que se recomiendan utilizar y que se pueden implementar por medio del proceso manual. Básicamente para definirlos debemos editar el archivo con nombre “main.xml” que se encuentra en la carpeta layout de la plantilla original del proyecto generada por Eclipse.

Al abrirlo lo vemos de la siguiente manera:

Aquí se ve la estructura inicial del archivo main.xml en donde podemos definir la serie de componentes que se pintaran sobre un layout que definamos. En este ejemplo sencillo tenemos un elemento LinearLayout que tiene un TextView.

Es necesario hablar un poco de los elementos que se pueden agregar dentro de los layouts que definamos.

Componentes.

En Android hay distintos tipos de componentes que son de un tipo especial que permite que se puedan visualizar en pantalla. Estos tipos heredan las propiedades de la clase View, la cual define las características fundamentales para que un componente pueda pintarse en pantalla.

El listado de elementos que se pueden utilizar para pintar en pantalla es el siguiente:

ViewGroups:

• Gallery: Utilizado para desplegar listados de imágenes en un componente con Scroll.
•  GridView: Despliega una tabla con Scroll de m columnas y n filas.
• ListView: Despliega una lista con Scroll de una columna.
•  ScrollView: Una columna vertical de elementos con Scroll
• Entre otros

Views:

• Button: Elemento que pinta un botón en la pantalla con el objetivo de que el usuario realice alguna interacción y  sea evaluada en el momento.
• CheckBox: Caja de texto seleccionable que permite evaluar dos estados del elemento seleccionado y no seleccionado.
• EditText: Elemento que permite editar texto dentro de sí.
• ImageButton: Elemento que pinta un botón con una imagen.
• RadioButton: Elemento seleccionable parecido al CheckBox pero con la diferencia de que una vez que se ha seleccionado no regresa a su estado anterior.
• VideoView: Elemento que despliega un archivo de video.
•  WebView: Elemento que despliega páginas web.
•  Entre Otros

Como se puede observar este listado es resumido y como recomendación para los lectores de este manual deberia de revisar la api que viene con el SDK para poder ver la variedad de elementos que se pueden manejar para la costrucción de una interfase de usuario.

Entonces al redefinir o agregar mas elementos a nuestro archivo main.xml podemos obtener algo asi:

Contenido archivo main.xml de ejemplo:

Este ejemplo utiliza RelativeLayout como layout principal sobre el que se pintan elementos como: botones, cajas de texto y cajas editables de texto. Ahora bien y ¿como es que este layout se carga?

Para hacer la carga Android en los recursos originados del proyecto define una clase Activity principal que realiza la carga del layout definido una vez que esta terminado de diseñar. Las lineas de codigo son las siguientes:

package com.ubicuos.test;
 
 
import android.app.Activity;
import android.os.Bundle;
 
 
public class GUITest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); //LINEA DE CODIGO QUE CARGA EL LAYOUT DEFINIDO PARA PINTARLO
    }
}

El resultado es:

Para concluir podemos ver que es muy fácil trabajar con el diseño de la interfaz para una aplicación Android. Ahora les toca profundizar en la variedad de elementos que se pueden manejar en Android pintando distintas configuraciones de layout que quieran.

<?xml version="1.0" encoding="utf-8"?>   
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent" android:layout_height="wrap_content"
      android:padding="10px">
      <TextView android:id="@+id/label" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:text="@string/hello" />
      <EditText android:id="@+id/entry" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:background="@android:drawable/editbox_background"
            android:layout_below="@id/label"
            />
      <Button android:id="@+id/uno"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/uno"
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"/>       
      <Button android:id="@+id/dos"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/two"
            android:layout_toLeftOf="@id/uno"
        android:layout_alignTop="@id/uno"/>          
      <Button android:id="@+id/tres"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/three"
            android:layout_below="@id/uno"
            android:layout_alignParentLeft="true"/>              
      <Button android:id="@+id/cuatro"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/four"
            android:layout_toRightOf="@id/tres"
        android:layout_alignTop="@id/tres"/>         
      <Button android:id="@+id/cinco"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/five"
            android:layout_below="@id/cuatro"
            android:layout_alignParentRight="true"/>       
      <Button android:id="@+id/seis"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="@string/six"
            android:layout_toLeftOf="@id/cinco"
        android:layout_alignTop="@id/cinco"/>        
</RelativeLayout>

Be Sociable, Share!

•