Diseño de interfases gráficas

La idea para la interfase del simulador es permitirles a las personas crear simulaciones básicas sin necesidad de programar en el smartphone, para lograr esto ofreceré elegir la malla del mundo y los tipos de agente.

Cuando el usuario elige las reacciones de cada agente a su ambiente necesita acceso a cada estado posible del agente y poder configurarlo de manera fácil, la pantalla a mostrar es una relación de estados {estado1, estado2}, etc.

Además el usuario debe ser capaz de crear y modificar variables, mostradas de forma fácil como "---", así se le podría asignar vida a agentes que representan animales, etc.

Entonces la interfase es una lista de los agentes creados mas un botón para crear más agentes incluso tomando como base los ya existentes y al crear el agente darle un color, imágen o número visible, depués para la configuración de cada agente la interfase es una lista de los estados que se tomarán en cuenta y cómo estos influyen en los agentes existentes (y variables) mas un botón para agregar un nuevo estado.

Por otro lado la interfase durante la simulación creo que será la malla del mundo seguido de una barra con los botones: Play/Pause, Step, Stop. Tal vez le agrego un panel vertical que mantiene actualizado los valores de las variables como vida, dinero, salud, etc, y si tienen valores mínimos y máximos los puedo mostrar con una barra estilo progreso horizontal.

<>

La manera recomendada de crear interfases para Android es describiendo en un xml qué paneles, barras y botones están incrustados en qué tipos de layouts, por ejemplo:

<?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" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

Se identifica bien fácil que el TextView (un campo de texto) y Button (un botón) son piezas de LinearLayout (una plantilla linear), tienen anchos, altos y otras variables.

<>

Ahora para "escuchar" cuándo se oprimen botones ó se interactúa con la GUI la clase View en android.view tiene una serie de interfases como View.OnClickListener() y View.OnTouchListener en las que tenemos que implementar el método onCLick(View v).

Opcionalmente para crear los menús tenemos los métodos onCreateOptionsMenu() y onCreateContextMenu(), y automáticamente cuando se seleccionan los elementos del menú se le llama a onOptionsItemSelected().

Para crear la malla en la GUI podría utilizar el layout Grid View o podría crear un objeto canvas y dibujar allí, y para las listas de agentes y de estados tomados en cuenta para cada agente podría utilizar un List View layout.

<>

Voy a dar una presentación de aproximadamente ocho minutos. En la presentación muestro la implementación, ejempĺos y tal vez algunas cosas como patrones de diseño.