Tabla dinámica con bordes

Gracias al proyecto de fin de carrera que estoy desarrollando (Cuando lo termine ya lo publicaré por aqui ;) ), me topé que en la SDK de Android no tiene implementado la posibilidad de mostrar los bordes de la tabla. Cosa muy utilizada desde luego, asi que me puse manos a la obra y recopilando información que saque  por medio del oráculo, implementé un método para que te devuelva un TableLayout pasándole como parámetros el groso del borde, el numero de fila y el de columnas, y el color del borde.

Tuve muchos problemas con el ancho de cada celda, y por ahora tiene un apaño muy raro... pero funciona, que es lo importante.

El truco está en que cada celda tiene dos contenedores, uno que tiene de fondo el color que pasamos por parámetro como color de borde, y tiene unos padding que es el parámetro del ancho del borde de la tabla. Dentro de este contenedor esta el contenedor del texto que tiene el truco de tener de fondo el mismo color que el fondo de la ventana principal, y el ancho de este contenedor es hasta los padding del  contenedor anterior, creando asi un efecto de bordes.

Es un truco que arregla los bordes, pero nos ayuda del paso mientras que Google implemente en la SDK algo para subsanarlo.

Aqui va la captura y el código (Descargar):




fichero main.xml






fichero .java

package com.olidroide;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;


public class TablasDinamicas extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Eliminamos el titulo de la ventana
        requestWindowFeature(Window.FEATURE_NO_TITLE);
       
        setContentView(R.layout.main);
        
        
        LinearLayout ll = (LinearLayout) findViewById(R.id.linear);
        
        TextView titulo= new TextView(this);
        titulo.setText("Generador de tablas con borde");
        ll.addView(titulo);
        //Llamamos al metodo dibujarTabla (AnchoBorde, Filas, Columnas, colorBorde)
        TableLayout etiquetaTabla = dibujarTabla(1, 2, 2, "#0055AA");
        ll.addView(etiquetaTabla);
        
        
        
    }
    /*
     * Método dibujarTabla
     * Devuelve una TableLayout con borde
     * recibe:
     *  tamaño del borde - int
     *  numero de filas - int
     *  numero de columnas - int
     *  color en Hexadecimal #FFFFFF - String
     */
    public TableLayout dibujarTabla(int tamBorde, int numeroFilas, int numeroColumnas, String colorBorde){
     TableLayout tabla = new TableLayout(this);
     
     if(numeroFilas>0 && numeroColumnas>0){
      TableRow fila = new TableRow(this);
      
      
      int numeroCeldas = numeroFilas * numeroColumnas;
      
      /* Calculo el Ancho de la siguiente manera:
       * El ancho de la pantalla los divido entre el nº de columnas y le resto
       * el tamaño del borde que esta sumado al borde dividido entre el nº de columnas
       * (a causa del borde derecho de la ultima columna)
       */
      
      int ancho=(getWindowManager().getDefaultDisplay().getWidth()/numeroColumnas)-(tamBorde+(tamBorde/(numeroColumnas)));
      //No se porqué pero si le resto uno funciona...
      ancho--;
      
      System.out.println("Tamaño ventana: "+getWindowManager().getDefaultDisplay().getWidth()+
        " ancho:"+ancho);
      int contadorColumnas=0;
         int contadorFilas=0;
      
         for (int i = 0; i <= numeroCeldas; i++) {
          //Si Ya ha dibujado la cantidad de columnas
          if(contadorColumnas==numeroColumnas){
           tabla.addView(fila);
           fila = new TableRow(this);
           contadorColumnas=0;
           contadorFilas++;
           
          }
          
          //Definimos los bordes de la tabla
          RelativeLayout borde = new RelativeLayout(this);
          //Dibuja los de arriba y la izquierda siempre
          borde.setPadding(tamBorde,tamBorde,0,0);
          //Pero
          //Si ya es la ultima columna de la fila...
          if(contadorColumnas==numeroColumnas-1){
           //Dibuja los de arriba a la derecha e izquierda.
           borde.setPadding(tamBorde, tamBorde, tamBorde, 0);
          }
          //Si Es la ultima fila
          if(contadorFilas==numeroFilas-1){
           //Dibuja arriba, izquierda y abajo
           borde.setPadding(tamBorde,tamBorde,0,tamBorde);
           //Si ademas de ser la ultima fila es la ultima columna
           if(contadorColumnas==(numeroColumnas)-1){
            //Dibuja todos los lados
            borde.setPadding(tamBorde,tamBorde,tamBorde,tamBorde);
           }
          }
          //Color del borde.
          borde.setBackgroundColor(Color.parseColor(colorBorde));
          
          //Ahora el texto..
          TextView texto = new TextView(this);
                 
          texto.setText("Celda "+i+" Ejemplo Tabla con Bordes");

          texto.setWidth(ancho);
          texto.setGravity(Gravity.CLIP_HORIZONTAL);
          texto.setPadding(2, 2, 2, 2);
          //Importante el color, porque si no se verá de color del borde!!
          texto.setBackgroundColor(Color.BLACK);
          
          //Al borde le añadimos el texto
          borde.addView(texto);
          
          //Y a la fila el borde con el texto
          fila.addView(borde);
          contadorColumnas++;
    
   }
     }else{
            TextView error= new TextView(this);
            error.setText("Valores de columnas o filas deben ser mayor de 0");
            tabla.addView(error);
  }
     return tabla;
    }
}

6 comentarios:

Nodens dijo...

Gracias, necesitaba esto

Ra dijo...

Muchas gracias, con tu permiso utilizaré el método dibujarTabla que creaste, claro que te citare como autor del mismo en mi código. Por si a alguien le interesa estoy creando una aplicación para crear grafos (de teoría de grafos) ya lo estoy dibujando pero ahora quiero listar valores en una tabla, tabla que quiero crear dinámicamente y tu método es lo que necesito. La aplicación tiene fines académicos también. Muchas gracias de nuevo.

Unknown dijo...

Genial MEN, esto me cae como anillo al dedo

Javier Roberto dijo...

muy bueno, era lo que andaba buscando. Gracias

Unknown dijo...

Hola!
Gracias por tu aporte, aunque no he abierto la App, al leer el post ya sé de qué se trata, creo que lo diferente es que todos los bordes son iguales. La pregunta es ¿se puede implementar una escucha al pulsar una celda y ejecutar alguna acción?, sería otro gran aporte de tu parte.

Desde Cali (Colombia) Gracias.

Unknown dijo...

Amplío el comentario anterior:
Al implementar la escucha me refiero a que se identifique la celda pulsada, y ser capaz por ejemplo, de darle color distinto a la fila o columna de esa celda o sólo cambiarle el color a dicha celda, ¿lo anterior es posible? parece que sí, pero hasta ahora no he encontrado un sitio donde haya un ejemplo completo.

Publicar un comentario