Archivo de junio de 2012

Como hacer una calculadora simple en Android (y II)

domingo 24 de junio de 2012

En la entrada anterior estuvimos diseñando la layout de nuestra calculadora. Ahora toca hacer que funcione 🙂

Código

Aparte del algoritmo básico de la calculadora, lo principal es darle funcionalidad a los distintos botones. Para ello vamos a hacer uso de los listeners.

Un listener (o «escuchador» en español) es un objeto de una clase que implementa un interfaz que «le obliga» a tener una función que se ejecutará en el caso de que se produzca un evento determinado. Dicho así queda confuso, así que lo mejor es implementarlo para nuestra calculadora.

Lo primero será crear para cada uno de los recursos de la calculadora una variable de control, por ejemplo:

private EditText _edit;
private Button _b1;

Lo siguiente es asignar a cada una de estas variables, los objetos de cada uno de los recursos que ya han sido creados por la función setContentView(R.layout.main);. Para ello utilizamos la función miembro de la clase Activity findViewById, que busca un recurso por su identificador. En nuestro caso, y siguiendo con los dos recursos anteriores;

_edit = (EditText)findViewById(R.id.editTextos);
_b0 = (Button)findViewById(R.id.button0);

Y por fin, el listener. En nuestro caso tenemos 16 botones, pero 10 de ellos tiene un funcionalidad similar: queremos que al pulsar, aparezca en la casilla de edición el número que aparece como texto en el botón. Es por esto, que en vez de hacer 10 listeners para cada uno de los botones, optamos por la creación de un único listener común a todos ellos:

View.OnClickListener lsBoton = new View.OnClickListener() {
     @Override
     public void onClick(View arg0) {
         _edit.setText(_edit.getText()+((Button)arg0).getText().toString());
     }
};

Analicémoslo:

View.OnClickListener, es un interfaz que han de implementar aquellas clases que vayan a crear objetos listeners. Para no crear la clase ya que solo va a tener un uso mu concreto, hacemos un new del interfaz, pero definiendo la función que el listener nos «obliga» a tener, en este caso OnClick(). Dicha función recibe como argumento la View del recurso sobre el que se pincha (arg0), así que son un casting  podemos obtener de manera sencilla el valor del rótulo del botón.

Sólo nos queda asociar este listener a nuestro botones:

_b1.setOnClickListener(lsBoton);

Sólo nos queda repitir este paso para todos los botones numéricos, repitir un proceso similar con los botones de las operaciones y aplicar la lógica de la calculadora.

Extra

Existe otras dos  posibilidades para asignar el listener al botón.

La primera es definirlo desde el propio layout. Simplemente se le añade la propiedad android:onClick, dándole como valor la función a la que se llamará en el caso de producirse el evento Click. Por ejemplo:

android:onClick="funcion"

La segunda es hacer que la propia Activity implemente el interfaz View.OnClickListener, con lo cual será necesario definir la función onClick en su interior, pero podríamos asignar el objeto this como valor a las funciones de asignación de listeners

_b1.setOnClickListener(this);
class Calculadora extends Activity implments View.OnClickListener {
     ...
     @Override
     public void onClick(View v) {
           ...
     }
     ...
}

Puedes acceder al código de la calculadora en github
+ Info en | Android developers

 

Como hacer una calculadora simple en Android (I)

jueves 21 de junio de 2012

En estas dos entradas vamos a crear una primera aplicación en Android, consistente en una calculadora que únicamente procese números enteros. La idea es manejar el TableLayout y los listeners.

Creando el proyecto

Para empezar desde Eclipse, seleccionamos File/New/Android Project… Le damos como nombre de proyecto Calculadora, elegimos una de las plataformas que tenemos instaladas y en la última ventana elegimos el nombre del paquete al que pertenece la aplicación. Este nombre es importante, ya que será el nombre completo con el que la aplicación será conocida, y podría entrar en conflicto con otras aplicaciones si el nombre se repitiera. En este caso ponemos: edu.uhuru.moviles.android.Calculadora

Creando el layout

Vamos al fichero main.xml que está dentro de la carpeta res. En ese fichero se define el diseño de la actividad principal (y única en nuestro caso). Desde el diseñador gráfico incluímos un TableLayout.

Nota: en muchas ocasiones puede ser interesante insertar los layouts en la ventana de Outline, que muestra el árbol de recursos de la Activity

Los layouts son los elementos invisibles pensando para controlar la distribución, posición y dimensiones de los controles que van en su interior. Hay varios disponibles, pero en este nos decidimos por un TableLayout, que organiza a sus hijos en forma de tabla. Se compone de elementos TableRow (filas). Cada fila puede contener cero o mas celdas. El ancho de la columna viene normalmente definido por el ancho de la celda más ancha, aunque siempre es posible aplicar algún atributo para jugar con el tamaño de las columnas.

Por defecto se nos crean 4 filas, así que añadimos una más simplemente arrastrando desde la paleta de controles una TableRow. Una vez añadida, procedemos a ir incorporando a cada fila los distintos recursos:

  1. Fila 1: 1 EditText
  2. Fila 2: 4 Buttons
  3. Fila 3: 4 Buttons
  4. Fila 4: 4 Buttons
  5. Fila 5: 4 Buttons

El siguiente problema es como hacer «crecer» el EditText para que ocupe las 4 columnas. Para ello utilizamos la propiedad  layout_span=»4″, que al igual que en HTML, nos expande la columna para que ocupe 4 columnas. Para colocar estas propiedades es casi más recomendable (y rápido) dejar el editor visual y trabajar directamente sobre el HTML:

<EditText  android:id="@+id/editTextos" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_span="4" />

A continuación hay que ajustar los botones, para que se repartan de manera equitativa por todo el ancho de la actividad. Para ello utilizamos la propiedad android:stretchColumns=»*», que indica que columnas (en nuestro caso todas, *) pueden expandirse para absorver el espacio libre dejado por las demás columnas a la derecha de la pantalla. De esta forma, los botones aparecerán ya compensados. O al menos aparentemente. El problema vendría si alguno de los botones tuviera más de un caracter (por ejemplo si pusiéramos  +/- , MR …). En ese caso, todos los botones de la columna de ese botón aumentaría su ancho. El problema se soluciona de una manera simple mediante  el uso de la propiedad  android:layout_weight=»1″.

Esta propiedad indica el peso relativo que ha de tener ese recursos con sus hermanos. Por ejemplo, si a 3 de los botones les pusieramos android:layout_weight=»1″ y al cuarto android:layout_weight=»2″, este último sería el doble de ancho que el primero. Como en nuestro caso queremos tener todos del mismo ancho indicamos android:layout_weight=»1″.

Por otra parte, necesitamos indicar al renderizador que el ancho de los botones no ha de ir en función de su tamaño «natural» (cuanto más texto tenga dentro, más grande). Por ello cambiaremos el ancho de wrap_content a 0dip. Juntando cada una de estas dos opciones en uno de los botones (por ejemplo el 7) quedaría:

<Button android:id="@+id/button7"
         android:layout_width="0dip"
         android:layout_height="wrap_content"
         android:text="7"
         android:layout_weight="1" />

Por último, para darle los últimos detalles estéticos, vamos a justificar el texto del EditText a la derecha, a no permitir la edición y a ocultar el cursor. Para ello, modificamos el EditText añadiendo:

<EditText  android:id="@+id/editTextos" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_span="4" 
            android:editable="false"
            android:gravity="right"
            android:cursorVisible="false" />