Documente Academic
Documente Profesional
Documente Cultură
Pulsa Finish.
…google.com/…/conocimientos-bsicos… 1/11
21/12/2010 Conocimientos básicos: Mover un obje…
En el ejemplo que vamos a hacer tenemos estos dos tipos de fondos llamados
fondo.png:
¡Vamos a comenzar!
Toda la pantalla donde dibujaremos en nuestra aplicación sera una vista (View),
es decir, un componente que llamaremos VistaJuego1. La situaremos dentro de
un ViewGroup. En este caso, dentro de un LinearLayout. (que ya lo
conocemos.)
Para hacer la vista, necesitamos añadir un archivo nuevo al proyecto. Para ello,
hacemos clic con el botón derecho sobre nuestro paquete dentro de src y
seleccionamos New > Class.
…google.com/…/conocimientos-bsicos… 2/11
21/12/2010 Conocimientos básicos: Mover un obje…
Esto quiere decir, que lo podremos utilizar como si fuera un TextView, EditText
o cualquier otra vista.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
¡Qué mal! Aparece la barra de título. ¡Vamos a quitarla! Para ello, vamos a editar
el código fuente de la Actividad. (La clase principal) Hacemos doble clic sobre
TutorialJuego1.java y dejamos el método onCreate de esta forma:
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
…google.com/…/conocimientos-bsicos… 4/11
21/12/2010 Conocimientos básicos: Mover un obje…
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
}
Obtenemos esto...
…google.com/…/conocimientos-bsicos… 5/11
21/12/2010 Conocimientos básicos: Mover un obje…
// Cuantos píxels nos moveremos a cualquier dirección cuando se pulse cada
tecla
private static int PASO_MOVIMIENTO = 5;
// Dimensiones de la pantalla del dispositivo
private int anchoPantalla, altoPantalla;
// Posición de la imagen que moveremos por la pantalla
private int posX, posY;
// Imagen que dibujaremos en la pantalla
private Drawable nube;
// Dimensiones de la imagen que dibujaremos
private int anchoNube, altoNube;
De aquí los más importantes son posX, posY (Que guardan en cada momento
donde dibujar la nube) y nube, que guardará una referencia a la imagen. (Ahora la
estableceremos.)
nube = context.getResources().getDrawable(R.drawable.nube);
anchoNube = nube.getIntrinsicWidth(); // Obtenemos el ancho de la nube
altoNube = nube.getIntrinsicHeight(); // Obtenemos el alto de la nube
setFocusable(true); // Para asegurarnos que recibimos las pulsaciones de
las teclas
setBackground(R.drawable.fondo);
La primera línea, nos sirve para cargar la imagen en memoria. (Y trabajar con ella
como si fuera un objeto Drawable. Es decir, un objeto que podemos pintar en la
pantalla.)
La segunda y tercera línea nos sirven para obtener el ancho y alto de la imagen
que acabamos de cargar.
setFocusable(true) nos sirve para indicarle a android que nuestra vista (View)
mantendrá el foco, esto quiere decir, que podremos detectar pulsaciones de
teclas que nos servirán para mover el objeto.
La última línea (gris) que muestro no tienes por qué ponerla ya que establecimos
la imagen de fondo en el XML. Esto es para que sepas que desde el código en
JAVA puedes establecer/cambiar la imagen del fondo cuando quieras.
Este sería un buen lugar para colocar el código donde le damos valores a las
variables anchoPantalla y altoPantalla, pero tenemos el problema de que en el
momento en el que se está ejecutando el constructor (este código), todavía no
sabemos las dimensiones de esta vista (View). Así que tendremos que tomarlos,
cuando se redimensione este objeto para ocupar la pantalla completa.
Para esto, hacemos clic con el botón derecho del ratón sobre el código. En el
menú que aparece seleccionamos Source > Override / Implement Methods...
@Override
…google.com/…/conocimientos-bsicos… 7/11
21/12/2010 Conocimientos básicos: Mover un obje…
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// TODO Auto-generated method stub
super.onSizeChanged(w, h, oldw, oldh);
posX y posY tendrían las coordenadas del centro de la pantalla, pero como
cuando dibujarmos el punto que damos es el de la esquina superior izquierda, en
este caso, estaríamos colocando la esquina superior izquierda del objeto en el
centro de la pantalla. El objeto no quedaría centrado. (Por eso, lo desplazamos la
mitad de su ancho y la mitad de su alto)
Sería importante que una vez terminado este ejemplo probaras darle valores
directamente, como por ejemplo:
posX = 0;
posY = 0;
Para darte una referencia, estas son las coordenadas (x,y) de las esquinas de la
pantalla:
Para quien no le quede claro, voy a poner un ejemplo para un tamaño de pantalla
de 320 x 240
Cuando x vale 0, indica que está en el lado izquierdo y cuando vale 320, indica
que está en el derecho. Cuando vale 160, está en la mitad.
Cuando y vale 0, indica que está arriba de la pantalla y cuando vale 240, indica
que está abajo del todo. Cuando vale 120, está en la mitad.
…google.com/…/conocimientos-bsicos… 8/11
21/12/2010 Conocimientos básicos: Mover un obje…
Para ello, dejaremos el método onDraw así: (Se añaden las treslíneas que indico
en negrita)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
nube.setBounds(posX, posY, posX+anchoNube, posY+altoNube);
nube.draw(canvas);
invalidate(posX-PASO_MOVIMIENTO, posY-PASO_MOVIMIENTO,
posX+anchoNube+PASO_MOVIMIENTO,
posY+altoNube+PASO_MOVIMIENTO);
}
Si te fijas bien en este esquema, comprenderás cómo por qué para saber las
coordenadas de la esquina inferior derecha tenemos que sumar posX con
anchoNube, al igual que posY con altoNube.
…google.com/…/conocimientos-bsicos… 9/11
21/12/2010 Conocimientos básicos: Mover un obje…
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Suponemos que vamos a procesar la pulsación
boolean procesada = true;
switch(keyCode){
case KeyEvent.KEYCODE_DPAD_UP:
posY-=PASO_MOVIMIENTO;
break;
case KeyEvent.KEYCODE_DPAD_DOWN:
posY+=PASO_MOVIMIENTO;
break;
case KeyEvent.KEYCODE_DPAD_LEFT:
posX-=PASO_MOVIMIENTO;
break;
case KeyEvent.KEYCODE_DPAD_RIGHT:
posX+=PASO_MOVIMIENTO;
break;
default:
// Si hemos llegado aquí, significa que no hay pulsación que nos interese
procesada = false;
break;
}
return procesada;
}
La parte azul del código anterior está bastante clara, vamos a comprobar los
valores de la tecla pulsada, que nos vienen en keyCode. Lo hacemos con un
switch(keyCode){
UP - Arriba
DOWN - Abajo
LEFT - Izquierda
RIGHT - Derecha
La parte roja del código anterior es más fácil. En ella, comprobamos que posY y
posX se encuentren dentro de los límites de la pantalla, teniendo en cuenta, que
las coordenadas que damos son las de la esquina superior izquierda de la imagen
que vamos moviendo. En cuanto detectamos que nos salimos, ponemos su valor
…google.com/…/conocimientos-bsicos… 10/11
21/12/2010 Conocimientos básicos: Mover un obje…
que vamos moviendo. En cuanto detectamos que nos salimos, ponemos su valor
justo en el borde por el que nos hemos salido. Ejemplo, si posY es menor que
cero, lo dejamos a cero. (En vez de quedarnos con un valor negativo.)
Ejecutamos otra vez... Probamos que podemos mover la nube pulsando las
teclas de dirección y que no se puede salir de la pantalla.
Crear un grupo - Grupos de Google - Página principal de Google - Condiciones del servicio - Política de privacidad
©2010 Google
…google.com/…/conocimientos-bsicos… 11/11