La interfaz de una app

Este es uno de los capítulos del tutorial Como programar tu primera aplicación Android en Ubuntu. Encontrarás los enlaces a todos los de capítulos, al final de este artículo.

Introducción

En el artículo anterior, nos centramos en la instalación del SDK de Google, el funcionamiento de Eclipse y el diseño gráfico de la aplicación. En este segundo artículo vamos a darle vida a la aplicación, concluyendo en primer lugar el interfaz gráfico, y posteriormente haciendo que cada elemento se comporte como se espera de él.

El objetivo de este artículo es conseguir llegar a tener un interfaz completamente funcionable, que convierta entre grados celsius, fahrenheit, kelvin y rankine, y tendrá un aspecto como el que se muestra a continuación:

0172_5556:SGN2.png

La aplicación

Completando la interfaz

Antes de nada, lo primero que vamos a hacer es asignarle un nombre adecuado a cada uno de los objetos que aparecen en el interfaz para que seamos capaces de identificarlos posteriormente. De esta manera a la etiqueta «de», le he llamado «label_from», a la caja de entrada (EditText), le he llamado «value_from», y para el cuadro desplegable que nos permitirá seleccionar la unidad de conversión, le he llamado «unit_from». Igualmente he realizado para las unidades de destino pero cambiando «from» por «to». Además le he puesto al botón de conversión «button_convert» y al otro «Button_switch».

Conforme lo dejamos en el artículo anterior, si te fijas debajo de cada uno de los objetos que aparecen en el interfaz, hay un pequeño triángulo amarillo con un símbolo de exclamación:

0173_Selección.png

esto es porque tenemos que definir el texto para cada uno de los elementos en el archivo «values/strings.xml» Esto lo haremos a través de un sencillo cuadro de diálogo que nos permite ir añadiendo nuevos valores y listas:

0174_Java - Test05-res-values-strings.xml - ADT .png

Para cada uno de los objetos, definimos su correspondiente valor:

0175_Java - Test05-res-values-strings.xml - ADT .png

Excepto para las listas desplegables que como contienen los mismos valores solo haremos una, añadiendo todos los valores que queramos cambiar:

0176_Java - Test05-res-values-strings.xml - ADT .png

Una vez asignados todos los valores, guardamos para que estén disponibles desde el resto de la aplicación. Ahora asignaremos los valores a sus correspondientes objetos, para lo que seleccionaremos de nuevo, «layout > activity_main.xml», e indicando en cada uno de los objetos el valor de texto correspondiente, de forma que por ejemplo, al objeto «label_from», le asignaremos en el parámetro Text el valor «@string/label_from», y así sucesivamente:

0177_Java - Test04-res-layout-activity_main.xml - ADT .png

Con esto queda completamente definida la interfaz, ahora nos queda darle vida a la aplicación.

Un poco de código

Nos queda definir las acciones que se realizarán al pulsar los botones convertir y cambiar. Para ello tenemos que editar el archivo src > es.atareao.text05 > MainActivity.java» y que inicialmente tendrá un aspecto como sigue:

package es.atareao.test05;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class SecondActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_second);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_second, menu);
		return true;
	}

}

Primero definiremos los valores correspondientes a los objetos que nos vendrá muy bien para hacer las conversiones:

private EditText value_from;
private EditText value_to;
private Spinner unit_from;
private Spinner unit_to;

Y en la función «onCreate» hacemos todo el trabajo, definiendo quien es quien con la asignación de valores «value_from = (EditText)findViewById(R.id.value_from);», y posteriormente definiendo los eventos que sucederán al hacer clic sobre cada uno de los botones.

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		value_from = (EditText)findViewById(R.id.value_from);
		value_to  = (EditText)findViewById(R.id.value_to);
		unit_from = (Spinner)findViewById(R.id.unit_from);
		unit_to = (Spinner)findViewById(R.id.unit_to);
		Button convertButton = (Button) findViewById(R.id.button_convert);
		convertButton.setOnClickListener(new View.OnClickListener() {
			public void onClick(View view) {
				double fv = convert2double(value_from.getText().toString());
				double tv = 0.0;
				String fu = String.valueOf(unit_from.getSelectedItem());
				String tu = String.valueOf(unit_to.getSelectedItem());
				if(fu=="ºC"){
					if(tu=="ºF"){
						tv = 9.0/5.0*fv+32.0;
					}else if(tu=="K"){
						tv = fv+273.15;
					}else if(tu=="ºR"){
						tv = (fv+273.15)*9.0/5.0;
					}else{
						tv = fv;
					}
				}else if(fu=="ºF"){
					if(tu=="ºC"){
						tv = (fv-32.0)*5.0/9.0;
					}else if(tu=="K"){
						tv = (fv-32.0)*5.0/9.0+273.15;
					}else if(tu=="ºR"){
						tv = fv-32.0+(273.15)*9.0/5.0;
					}else{
						tv = fv;
					}
				}else if(fu=="K"){
						if(tu=="ºC"){
							tv = fv-273.15;
						}else if(tu=="ºF"){
							tv = 9.0/5.0*(fv-273.15)+32.0;
						}else if(tu=="ºR"){
							tv = (fv)*9.0/5.0;
						}else{
							tv = fv;
						}			
				}else if(fu=="R"){
					if(tu=="ºC"){
						tv = 5.0/9.0*fv-273.15;
					}else if(tu=="ºF"){
						tv = fv+32.0-(273.15)*9.0/5.0;
					}else if(tu=="K"){
						tv = (fv)*5.0/9.0;
					}else{
						tv = fv;
					}
				}
				value_to.setText(Double.toString(tv));				
			}
		});

		Button switchButton = (Button) findViewById(R.id.button_switch);
		switchButton.setOnClickListener(new View.OnClickListener() {
			public void onClick(View view) {
				int idf = unit_from.getSelectedItemPosition();
				int idt = unit_to.getSelectedItemPosition();
				unit_to.setSelection(idf);
				unit_from.setSelection(idt);
			}
		});
	}

Además he creado una sencilla función auxiliar para convertir de cadena de texto a número.

Conclusiones

Con esto queda la aplicación completamente definida, solo queda lanzarla en un dispositivo virtual o directamente en tu aplicación. Actualmente yo la estoy haciendo funcionar en el dispositivo virtual, pero en todo caso me toca iniciar el dispositivo virtual, y luego ir lanzándole las diferentes versiones de la aplicación, porque tengo que confesar que va increíblemente lento.

En el próximo artículo de Android, es ampliar la aplicación con otras magnitudes. Para ello, la idea es que las magnitudes aparezcan en la parte izquierda de la ventana, y se puedan seleccionar fácilmente. Tipos los menús laterales de Google+ o Facebook, y que explica muy detalladamente en Nosinmiubuntu

11 comentarios en “La interfaz de una app

  1. Una pequeña sugerencia para que no tengas tantos if else anidados haciendo cosas raras: Da igual la escala que ponga el usuario, convierte siempre a la misma y luego conviertes desde ahí. De esta forma solo necesitas dos bloques if else, uno para ‘from’ y otro para ‘to’.

  2. Finalmente funciono pero el código tiene un error grave, los String en Java se comparan de la forma String1.equals(String2), el uso de == no corresponde a la lógica del programa y si se deja así simplemente no va a funcionar por lo demás gracias El atareao.

  3. Hola estimado, te agradezco el tiempo que has dedicado a estas entradas, pero tengo una duda, no de la programación o código sino de algo mucho mas simple; no he logrado hacer correr ninguna aplicación en el dispositivo virtual de android, la verdad no se como debo hacerlo. Instale el ADT descargado desde google que trae todo… en Ubuntu, esta todo con sus permisos, ya no se que hacer… gracias de antemano.

  4. Hola!
    en primer lugar, muchas gracias por la entrada.
    He estado intentando hacer lo mismo que has puesto aqui pero me han surgido unos problemas.
    A la hora de definir el texto para cada uno de los elementos en el archivo con “values/strings.xml” no me sale lo mismo que a ti, y no consigo avanzar más. En su lugar me salen 3 puntos (app_name (string), action_setting (string) y hello_world(string)).
    ¿que he hecho mal?

    muchas gracias 🙂

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *