Archivo de la categoría: tablas

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

linearlayout xmlns:android="http://schemas.android.com/apk/res/android"   
android:orientation="vertical"    
android:layout_width="fill_parent"    
android:layout_height="fill_parent"    
android:id="@+id/linear"    
android:isScrollContainer="true"

fichero .java

/*******************************************************************
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
********************************************************************/

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;
    }
}