Max Hernandez

Laberinto - Ejemplo de Canvas en HTML5

sábado, 26 de mayo de 2012

Consruyendo las Piezas del Tablero - Botones y Listeners Android

Ahora que ya tengo un tablero para mi aplicación necesito botones así que esta vez decidí investigar acerca de la implementación de botones para el sistema operativo Android.

Botones en Android
Como podemos recordar la jerarquía de clases en las interfaces de Android tienen una descendencia directa de View, un bloque que es capaz de interactuar con eventos y dibujar dentro de el, entonces sería lógico pensar que habría una clase Button de la cual descendieran todos lo botones, pero no es así ya que casi cualquier bloque que desencadene un evento al pasar sobre el o al presionarlo podría ser un bloque. Entonces estuve buscando los tipos de botones existentes en Android para elegir el que se acomode a mis necesidades y estos fueron los que encontré:



Implementando un "TableLayout" y agregando todos lo botones que encontré obtuve esta información:
 
package ajedrez.principal;

import android.app.Activity;
import android.widget.*;
import android.content.Intent;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TableLayout;
import android.widget.TableRow;


public class Ajedrez_main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.relative);
        TableRow.LayoutParams params = new TableRow.LayoutParams(85, 85);
        TableLayout table = new TableLayout(this);
        TableRow row = new TableRow(this)  ;
        Button b = new Button(this);
          b.setLayoutParams(params);
        row.addView(b );
        CheckBox c = new CheckBox(this);
        c.setLayoutParams(params);
        row.addView( c);
        RadioButton r = new RadioButton(this);
        r.setLayoutParams(params);
        row.addView( r);
        
        table.addView(row);
        
        ToggleButton t = new ToggleButton(this);
        t.setLayoutParams(params);
        row.addView( t);
        ImageButton img = new ImageButton(this);
        img.setBackgroundResource(R.drawable.max);
        img.setLayoutParams(params);
        row.addView( img);
        ImageButton img2 = new ImageButton(this);
        img2.setLayoutParams(params);
        row.addView( img2);

        setContentView(table);
     }
}



De izquierda a derecha:
  • Button: Es un simple boton que reacciona cuando lo presionas y manda un evento a su listener.
  • CheckBox: Este boton es parecido a los proximos dos botones, cuando se presiona cambia su estado a seleccionado y muestra una flecha.
  • RadioButton: Cambia su estado a seleccionado cuando se presiona y muestra un pequeño circulo.
  • ToggleButton: Este cambia entre encendido y apagado cuando se presiona.
  • ImageButton: Este pertenece a una clase diferente a los demas, puedes poner una imagen de fondo y ademas tiene tres estado focused, presionado y normal.
Agregando piezas al tablero
Una vez que vi la variedad de botones que existen, elegí el "ImageButton"
puesto que necesito que se pueda ver la imagen de las piezas y así al mismo tiempo el fondo del tablero, además puedo poner un boton invisible para mapear (x,y) posición del tablero con un botón en especifico. La clase Ajedrez sirve para hacer toda la parte lógica del juego, utiliza una matriz de números enteros y un número ID para cada pieza para darle a conocer a la interfaz gráfica en que posición y que posibilidades de movimiento tiene cada pieza.

En cada una de las celdas de la "TableLayout" existe un  "FrameLayout" que contiene cada uno de los botones que representan ya sea piezas o celdas vacías. Cuando se presiona uno el listener identifica el movimiento y lo lleva a cabo con el objeto "ajedrez", después de esto redistribuye los botones y les asigna nuevas posiciones a las imágenes. Así da la funcionalidad de mover piezas en el tablero.


package ajedrez.principal;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
import android.widget.Toast;

import java.util.Hashtable;
import java.util.LinkedList;
import android.R.drawable;

class BotonImagen extends ImageButton{
 int x=-1;
 int y=-1;
 BotonImagen(Context algo, int xo, int yo){
  super(algo);
  this.x = xo;
  this.y = yo;
 }
};

public class Partida extends Activity {
 FrameLayout tableroCeldas[][] = new FrameLayout[8][8];
 String players[] = { "Player1","Player2" };
 Ajedrez ajedrez = new Ajedrez("Player1","Player2");
 int estado = 0;
 String turno = "Player1";
 int origen[] = {0,0};
 int destino[] = {0,0};

    
 void mostrarMovimientos(int[][] guia){
  for (int i = 0; i < 8; i++) {
   for (int j = 0; j < 8; j++) {
    if( guia[j][i] == 1) tableroCeldas[j][i].setBackgroundResource(R.drawable.square_red);
    if( guia[j][i] == 2) tableroCeldas[j][i].setBackgroundResource(R.drawable.square_green);
    if( guia[j][i] == 3) tableroCeldas[j][i].setBackgroundResource(R.drawable.square_blue);
    
   }
  }  
 }
 
 private void tableroInicial(){
  int k=0;
        for (int i = 0; i < 8; i++) {
         if((i+1)%2==0){
          k=0;
         }else{
          k=1;
         }
            TableRow row = new TableRow(this);
            for (int j = 0; j < 8; j++) {
                if(k==0 ){
                    tableroCeldas[j][i].setBackgroundResource(R.drawable.square);
                }else{
                 tableroCeldas[j][i].setBackgroundResource(R.drawable.square_brown);
                }
             
                row.addView(tableroCeldas[j][i]);
                if(k==0){ 
                 k++;
                }else{
                 if(k==1) k = 0;
                }
            } 
        }
 }
 
 
 private void reacomodarTablero(){
  //Limpia el tablero
  for (int i = 0; i < 8; i++) {
   for (int j = 0; j < 8; j++) {
    this.tableroCeldas[j][i].removeAllViews();
   }
  }
  
  //Dibuja las piezas
  for (int i = 0; i < 8; i++) {
   for (int j = 0; j < 8; j++) {
    BotonImagen temp = new BotonImagen(this, j, i);
    if(this.ajedrez.tablero[j][i] != 0){
//     BotonImagen temp = new BotonImagen(this, j, i);
     //Piezas Blancas
     if((this.ajedrez.tablero[j][i]>0) && (this.ajedrez.tablero[j][i]<=8) )temp.setBackgroundResource(R.drawable.wp);
     if(this.ajedrez.tablero[j][i]==9) temp.setBackgroundResource(R.drawable.wr);
     if(this.ajedrez.tablero[j][i]==10) temp.setBackgroundResource(R.drawable.wr);
     if(this.ajedrez.tablero[j][i]==11) temp.setBackgroundResource(R.drawable.wn);
     if(this.ajedrez.tablero[j][i]==12) temp.setBackgroundResource(R.drawable.wn);
     if(this.ajedrez.tablero[j][i]==13) temp.setBackgroundResource(R.drawable.wb);
     if(this.ajedrez.tablero[j][i]==14) temp.setBackgroundResource(R.drawable.wb);
     if(this.ajedrez.tablero[j][i]==15) temp.setBackgroundResource(R.drawable.wq);
     if(this.ajedrez.tablero[j][i]==16) temp.setBackgroundResource(R.drawable.wk);
     
     //Piezas negras
     if((this.ajedrez.tablero[j][i]<0) && (this.ajedrez.tablero[j][i]>=-8) )temp.setBackgroundResource(R.drawable.bp);
     if(this.ajedrez.tablero[j][i]==-9) temp.setBackgroundResource(R.drawable.br);
     if(this.ajedrez.tablero[j][i]==-10) temp.setBackgroundResource(R.drawable.br);
     if(this.ajedrez.tablero[j][i]==-11) temp.setBackgroundResource(R.drawable.bn);
     if(this.ajedrez.tablero[j][i]==-12) temp.setBackgroundResource(R.drawable.bn);
     if(this.ajedrez.tablero[j][i]==-13) temp.setBackgroundResource(R.drawable.bb);
     if(this.ajedrez.tablero[j][i]==-14) temp.setBackgroundResource(R.drawable.bb);
     if(this.ajedrez.tablero[j][i]==-15) temp.setBackgroundResource(R.drawable.bq);
     if(this.ajedrez.tablero[j][i]==-16) temp.setBackgroundResource(R.drawable.bk);
     
    }
     //Aquí lo agrega 
     temp.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                 BotonImagen boton = (BotonImagen)v;
                 if (!ajedrez.tengoTurno(turno))return;
                    if( estado == 0){
                     if( !ajedrez.verificarPertenencia(boton.x, boton.y, turno) )return;
 //                    this.mostrarMovimientos(ajedrez.verMovimientos(boton.x, boton.y) );
                     origen[0] = boton.x;
                     origen[1] = boton.y;
                     estado = 1;
                  Toast.makeText(Partida.this,
               (boton.x+" , "+boton.y), Toast.LENGTH_SHORT).show();

                    }else{
                  Toast.makeText(Partida.this,
               (boton.x+" , "+boton.y+"<--"), Toast.LENGTH_SHORT).show();
                  
                     if( ajedrez.moverPieza(origen[0], origen[1], boton.x, boton.y)){
                        reacomodarTablero();
                        if(turno == players[0]){
                         turno = players[1];
                        }else{
                         turno = players[0];
                        }
                        int cmd = ajedrez.estadoJuego(turno);
                        if(cmd == 1) Toast.makeText(Partida.this, ("Ha ganado el jugador: "+turno), Toast.LENGTH_SHORT).show();
                        if(cmd == 2) Toast.makeText(Partida.this, ("Ha perdido el jugador: "+turno), Toast.LENGTH_SHORT).show();
                         if(cmd == 3) Toast.makeText(Partida.this, ("Jaque!!!!"), Toast.LENGTH_SHORT).show();
                      }
                     estado = 0;
                    }
                }
            });

     
     this.tableroCeldas[j][i].addView(temp);  
   }
  }
 }
 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TableRow.LayoutParams params = new TableRow.LayoutParams(85, 85);
        TableLayout table = new TableLayout(this);
        int k=1;
        for (int i = 0; i < 8; i++) {
         if((i+1)%2==0){
          k=0;
         }else{
          k=1;
         }
            TableRow row = new TableRow(this);
            for (int j = 0; j < 8; j++) {
                tableroCeldas[j][i] = new FrameLayout(this);
                tableroCeldas[j][i].setLayoutParams(params);
                if(k==0 ){
                    tableroCeldas[j][i].setBackgroundResource(R.drawable.square);
                }else{
                 tableroCeldas[j][i].setBackgroundResource(R.drawable.square_brown);
                }
             
                row.addView(tableroCeldas[j][i]);
                if(k==0){ 
                 k++;
                }else{
                 if(k==1) k = 0;
                }
            }    
            table.addView(row);
        }
        setContentView(table);
        this.reacomodarTablero(); //Poner las piezas
        
    }
}

Resultado:



Las imágenes usadas como piezas fueron obtenidas de la página:
http://ixian.com/chess/jin-piece-sets/
Los créditos de su creación pertenecen a "Eric De Mund".


 Referencias:
http://www.mkyong.com/android/android-imagebutton-example/
http://developer.android.com/reference/android/widget/Button.html
http://developer.android.com/reference/android/widget/ImageButton.html

5 comentarios:

  1. Venga Max, aguante hombre, es un buen proyecto el que estas armando (Y)

    ResponderBorrar
  2. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  3. Podriamos hablar por correo sobre el proyecto?

    ResponderBorrar
  4. compa tu código esta increíble y algo confuso para un novato como yo :) , pero crees que podrías ayudarme en algo… donde es la parte en la que creas la matriz de botones???

    ResponderBorrar