lunes, 7 de marzo de 2011

Como crear una aplicación android (parte 1/2)


Bueno a petición de algunos e-mails que me hicieron llegar diciendo que fue algo avanzado el último tutorial sobre animación, y me pidieron que hiciera uno básico para la creación de una aplicación y que explicara los archivos básicos de los que depende una aplicación en android. Este será un tutorial en dos partes el primero ósea este solo explicare la estructura y los archivos generados de un proyecto; ).

Cuando creamos un nuevo proyecto de android nos genera siempre una estructura de archivos definida como en este caso:

MainActivity.java: es la actividad principal de nuestra aplicación en otras palabras es la clase que inicia al ejecutarse nuestra app, cuando recién creamos nuestro proyecto la clase solo contiene esto:


R.java: esta clase sirve para encontrar los recursos de datos que se generen en la aplicación, con esta clase no hay que meternos ya que se genera automáticamente cada vez que compilamos o al momento que ingresamos un nuevo recurso en algún archivo, inicialmente contiene esto:



main.xml: este archivo nos sirve para declarar o posicionar los objetos como, botones, vistas, textos, inputs etc. se basa en tags al estilo de html, inicialmente solo tiene un objeto "TextView" con la leyenda "Hello Android from NetBeans". Básicamente este archivo es el que muestra todo lo que vemos en pantalla, se pueden tener varios archivos de este tipo en la carpeta layout si se quiere tener más de una vista diferente.


Strings.xml: este archivo se utiliza para crear recursos estáticos de variables o otras cosas, como por ejemplo el nombre de la app o valores iníciales para algún imput, en este caso solo tengo una string con el nombre de mi app.



AndroidManifest.xml: el archivo donde se indica que actividad será la principal, cuales serán los intents (otras actividades), el nombre de versión, el nombre de aplicación, el icono que usara su aplicación entre otras cosas.



Estos serian los archivos principales de un proyecto en android en el siguiente parte ya iniciaremos a crear una app sencilla para abordar temas como los layouts, métodos override y otras cosillas básicas, les dejo el proyecto creado.bueno hasta pronto.

viernes, 4 de marzo de 2011

Demo suguz #1 : Animacion simple en Android app


En este ejemplo les mostrare como pueden crear una animación simple utilizando un canvas en una aplicación android. Con esto podrían hacer juegos e intros para sus aplicaciones o cualquier cosa que se les ocurra que sea animación. Lo que hará esta aplicación es mostrar una palabra y hacer que rebote por toda la pantalla, ok ps vamos al grano jeje.

Lo primero que haremos es crear una clase que extienda View, será lo que veremos en pantalla. Esta es mi clase:

Con la clase creada, en nuestro layout principal (el mío es main.xml) un objeto tipo IntroVista en mi caso, ya que es la clase que usare para lo que se verá en pantalla, quedaría de esta forma:


Ahora volvamos a nuestra vista y declaremos en el constructor nuestro lienzo en el cual dibujaremos, me he adelantado y también declare variables que usaremos después, como el Angulo en que iniciara el movimiento:


Como pueden ver nada del otro mundo solo declarar nuestro lienzo (nPaint) y agregarle propiedades como el stroke, color etc.

Ahora agregaremos un método Override "onDraw" el cual se encarga de dibujar todo en el canvas. En el método agregaremos la variable String "leyenda" la cual será la encargada de rebotar en las paredes.



También se agrego la propiedad setTextSize a mPaint que por su descripción se entiende lo que hace, poner un tamaño al texto. Con canvas.DrawText se dibuja en el canvas nuestra String, los parámetros que usa DrawText es (String, punto x, punto y, lienzo).

Lo que toca hacer es agregar movimiento para ello son la variable "haora" y el método CalculaRebote que recibe como parámetro "haora". Este sería el método CalcularRebote:


Este es nuestro engine para hacer los rebotes en las paredes, cada if es un rebote en dicha pared, si rebota al lado izquierdo mi posición X tomaría el valor de 0 por que cuando se encuentra en algún punto (o,y) quiere decir que choco contra la pared izquierda, lo mismo pasa cuando choca con la pared de arriba, cuando está en algún punto (x,0). Para el lado de la base (abajo) solo obtengo el largo de mi pantalla con el método getHeight() y para el lado derecho obtengo el ancho de la pantalla con getWidth(). Para reafirmar lo de los puntos ( x, y) les dejo la siguiente imagen para que se de entender como se pintan los puntos en pantalla:


Cada if tiene un método para obtener el Angulo de rebote que son estos 4:

Esta parte son mas formulas para obtener el Angulo del rebote que otra cosa, cada caso requiere una y depende si el movimiento va hacia la izquierda , derecha ,arriba o abajo, todo los cálculos son en radianes quiere decir que cuando se multiplica 2 * PI = 360 ósea un Angulo de 360 grados. No explicare las formulas porque no es clase de trigonometría ; ) doy por sentado que ya saben de qué va, si no en este link lo explica muy bien el forero muZk con eso se pueden dar idea de lo que está plasmado en los métodos.

Ahora seguiré explicando el método calcularRebote esta parte en particular:


La variable "otro" nos sirve para obtener un cierto control sobre la velocidad de nuestra animación la formula seria (el tiempo actual - el ultimo ) * pixeles por segundo , y se divide en 1000 porque los tiempos están en milisegundos, para obtener el tiempo actual -> SystemClock.elapsedRealtime(); .

Las siguiente dos lineas es donde modificamos nuestra posición (x,y) en pantalla, para ello con el ángulo que nos resulto de los métodos anteriores, aplicamos un coseno en caso de la "X" y un seno en caso de la "Y" y multiplicamos por nuestra variable de tiempo "otro", con esto se obtiene el siguiente punto después del rebote con respecto al ángulo y por ultimo guardamos nuestro tiempo actual que pasa a ser "ultimoUpdate". Si también andas perdido esta parte de trigonometría consulta esta página Trigonometría.

Después de esto ya tenemos el engine de nuestra app solo faltaría la clase de nuestra actividad principal la cual quedaría así:


Como pueden ver es muy fácil hacer una animación en android, creo que lo más difícil fue la trigonometría usada jeje, la programación es muy sencilla teniendo claro a donde quieres llegar. Por último les dejo el código del proyecto por si quieren verlo corriendo es para netbeans, saludos y espero que les guste.



Links actualizados: 11/09/2012