jueves, 3 de noviembre de 2011

Primeros pasos con Android

Se podría decir que en toda aplicación Android (con interfaz gráfica) tendremos tres elementos básicos: Views, Layouts y Events.

Los objetos de tipo View son todos aquellos que el usuario puede ver, es decir, texto, imágenes o botones por nombrar algunos. Los layouts nos brindaran la infraestructura necesaria para poder organizar como queremos mostrar los diferentes objetos de tipo View en la pantalla de nuestro Android. Y por ultimo los Events, son los encargados de capturar las acciones realizadas por el usuario y llevar a cabo alguna acción, por ejemplo al tocar un botón emitir un sonido.

A esto es a lo que queremos llegar:

Imagen usada de fondo fue obtenida de 140geek

Nuestro hola mundo, contiene una imagen sobre la cual se escribe el mensaje "¡Hola Mundo!" y en la parte inferior tenemos la leyenda "Tocar la pantalla para salir.".

Cuando generemos el proyecto con Eclipse o Motodev (un eclipse tuneado para desarrollar en Android), únicamente tendremos el método onCreate (nuestro "main")

1:  public class HelloWorld extends Activity {  
2:    /** Called when the activity is first created. */  
3:    @Override  
4:    public void onCreate(Bundle savedInstanceState) {  
5:      super.onCreate(savedInstanceState);  
6:    }  
7:  }  

A excepción del ultimo fragmento de código y del fichero xml, todos los fragmentos siguientes deben ir dentro del método onCreate.

Para mostrar texto en pantalla, tenemos que usar objetos de tipo TextView. En las lineas 2 y 8 obtenemos el texto con id hello y msgExit respectivamente desde el gestor de recursos. Sino queremos usar el gestor de recursos y poner una cadena de texto normal entre comillas también es valido.

1:  TextView tvHello = new TextView(this);  
2:  tvHello.setText(R.string.hello);     //obtenemos el string con id hello
3:  tvHello.setGravity(Gravity.CENTER);  //centramos el texto en la pantalla
4:  tvHello.setTextColor(Color.BLACK);   //cambiamos el color de la fuente
5:  tvHello.setTextSize(20);             //cambiamos el tamaño de la fuente
6:    
7:  TextView tvExit = new TextView(this);  
8:  tvExit.setText(R.string.msgExit);  
9:  tvExit.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);  
10:  tvExit.setTextColor(Color.BLACK);  




En el explorador de paquetes, nos encontramos con la carpeta res, donde estarán los recursos contenidos en el gestor de recursos. Si queremos agregar alguna imagen basta con copiarla a alguna de las carpetas drawable y el identificador sera el nombre del fichero. En cambio para agregar cadenas de texto, tenemos que modificar el fichero strings.xml



1:  <?xml version="1.0" encoding="UTF-8" standalone="no"?>  
2:  <resources>  
3:    <string name="hello">¡Hola Mundo!</string>  
4:    <string name="app_name">Hola Mundo</string>  
5:    <string name="title">/dev/kmem - Hola Mundo</string>  
6:    <string name="msgExit">Tocar la pantalla para salir.</string>  
7:  </resources>  

Para no distorsionar la imagen es mejor usa un ImageView en lugar de la propiedad Background de los Layouts, porque esta ultima estrecha o estira la imagen sin respetar las proporciones.

1:  ImageView ivAndroid = new ImageView(this);  
2:  ivAndroid.setImageDrawable(getResources().getDrawable(R.drawable.android));  

Ya que tenemos creados los tres objetos que queremos mostrar al usuario, ahora tenemos que crear un layout , agregar los elementos y establecer como contenido principal el layout. Como la imagen no ocupa toda la pantalla y para evitar que queden franjas negras por encima y por debajo, cambiamos el color de fondo del layout al mismo que el de la imagen.

1:  FrameLayout layout = new FrameLayout (this);  
2:  layout.setBackgroundColor(Color.WHITE);  
3:  layout.addView(ivAndroid);  
4:  layout.addView(tvHello);  
5:  layout.addView(tvExit);  
6:    
7:  setContentView(layout);  

Y por ultimo, onTouchEvent se activa cuando el usuario toca la pantalla, y el método finish termina la ejecución del programa, por lo que cuando el usuario toque la pantalla se cerrara la aplicación.

1:    @Override  
2:    public boolean onTouchEvent(MotionEvent ev)  
3:    {  
4:        this.finish();  
5:        return true;  
6:    }  

Y con eso, tenemos nuestra primera aplicación en Android.