En esta entrada vamos a adentrarnos a nivel técnico en un aspecto concreto del diseño de interfaces en Android. Vamos a hablar de uno de los layouts más básicos de una interface como es el TableLayout y de cómo darle las características propias de una tabla.
Aunque antaño los malos hábitos hacían que las tablas fueran el elemento más usado para crear interfaces en web y pasaran desapercibidas para el usuario, hoy en día su uso está limitado a aspectos muy concretos para una correcta estructuración de los datos y en los que el usuario es plenamente consciente de su existencia. Es por eso que cuando representamos una tabla pretendemos que presente las características típicas de esta: bordes, cabecera, letras en negrita, fondo de colores... Es en este aspecto donde el TableLayout falla porque como bien dice la documentación de Android: "TableLayout containers do not display border lines for their rows, columns, or cells", es decir, dicho Layout no contempla bordes y por tanto es un simple organizador de elementos en columnas y filas. A lo largo de este post vamos a intentar darle forma a una tabla y tratar de darle las características que deseemos.
Empecemos por el principio, si revisamos de nuevo la documentación de Android para este tema, veremos que es un contenedor de TableRows y este es a su vez otro contenedor de Views, es decir, podemos insertar el elemento que deseemos ya sea una imagen, texto o incluso otra tabla (lo normal es insertar TextViews). De esta forma en número de filas vendrá determinado por la cantidad de TableRows y el de columnas por el máximo número de Views que haya dentro de una fila.
El resultado de aplicar el código ( layout/main.xml) sería el siguiente:
Los transformaciones y estilos quedan supeditadas a los tipos de formas que podamos crear con shape que no son pocas. Aunque si tenemos más ganas de probar, también podemos usar otros elementos diferentes a shape como por ejemplo un layer-list que combina varios tipos de drawables como shape e imagenes pudiendo crear cualquier cosa imaginable.
Veamos un ejemplo:
Fuente: http://stackoverflow.com/questions/2108456/how-to-create-a-table-with-borders-in-android
David Jesse
Aunque antaño los malos hábitos hacían que las tablas fueran el elemento más usado para crear interfaces en web y pasaran desapercibidas para el usuario, hoy en día su uso está limitado a aspectos muy concretos para una correcta estructuración de los datos y en los que el usuario es plenamente consciente de su existencia. Es por eso que cuando representamos una tabla pretendemos que presente las características típicas de esta: bordes, cabecera, letras en negrita, fondo de colores... Es en este aspecto donde el TableLayout falla porque como bien dice la documentación de Android: "TableLayout containers do not display border lines for their rows, columns, or cells", es decir, dicho Layout no contempla bordes y por tanto es un simple organizador de elementos en columnas y filas. A lo largo de este post vamos a intentar darle forma a una tabla y tratar de darle las características que deseemos.
Empecemos por el principio, si revisamos de nuevo la documentación de Android para este tema, veremos que es un contenedor de TableRows y este es a su vez otro contenedor de Views, es decir, podemos insertar el elemento que deseemos ya sea una imagen, texto o incluso otra tabla (lo normal es insertar TextViews). De esta forma en número de filas vendrá determinado por la cantidad de TableRows y el de columnas por el máximo número de Views que haya dentro de una fila.
Bien, una vez tenemos claros todos los aspectos de TableLayout vamos a ver las posibles soluciones que se han dado al problema planteado:
Solución 1: Esta solución es la primera que se dió en cuanto se detectó el problema y además es la más sencilla. Consiste en dar un color de fondo al TableLayout y otro diferente a cada celda, de esta forma creamos la falsa impresión de que la tabla tiene un borde (observar que hay que dejar márgenes en cada celda para que esto ocurra).
Superposición del fondo de cada celda con el fondo de la tabla |
Esta solución, aunque sencilla, no permite gran flexibilidad (por ejemplo que la cabecera y el cuerpo tengan diferente borde) y tampoco es muy fina (se basa en una superposición).
Solución 2: No es mucho más compleja que la anterior y permite mucha más flexibilidad. Se trata de otorgarle bordes a cada celda mediante los elementos de diseño llamados drawables, estos elementos pueden ser imágenes o incluso xmls que definen formas, en nuestro caso vamos a usar lo segundo. Por tanto, la forma de proceder sería sencillamente construir un xml drawable que defina los bordes y asignárselo a todas las celdas. Si queremos varios tipos de bordes tan solo tenemos que crear varios tipos de xmls drawables y asignárselos a las celdas que queramos. De esta forma para cambiar el color de fondo o los bordes de X celdas tan solo tenemos que cambiar el drawable y no todas las celdas una a una, además nos ahorramos añadir márgenes y definir el fondo en el tableLayout. Por último, cabe añadir que para añadir un drawable a un View hay que asignárselo en la propiedad brackground.
Podemos ver el código de la solución en layouts/main.xml, drawable/celda_cuerpo.xml y drawable/celda_cabecera.xml y su resultado en la interface sería el siguiente:
Hasta aquí obtenemos los mismos resultados que la solución 1 pero de una manera más elegante, no obstante, la incorporación de tipos de celdas y elementos drawables nos da una potencia y flexibilidad que nada tienen que ver con la solución anterior, pudiendo:
- Redondear bordes
- Puntear bordes
- Añadir Gradientes
- Incorporar imagenes al fondo
- Y hasta donde la imaginación llegue
Veamos un ejemplo:
Y para hacer estos cambios tan solo hemos tenido que modificar los dos xml drawables que teníamos (Ver códigos en drawables/celda_cuerpo.xml y drawables/celda_cabecera.xml )
Además de las dos soluciones expuestas anteriormente existen otras muchas que se basan en la modificación del código de TableLayout o adaptaciones en la implementación, en cualquier caso son mucho más tediosas y no llegan a permitir la misma flexibilidad y sencillez que la solución 2. De hecho, con esta última y un poco de paciencia e imaginación se puede lograr cualquier tipo de tabla:
Ha sido un placer poner un granito de arena en este magnífico blog y espero intervenir en algún post más en el futuro. Espero también que os sirva en vuestros proyectos con Android y no olvidéis comentarlo si lo usáis ;)
Fuente: http://stackoverflow.com/questions/2108456/how-to-create-a-table-with-borders-in-android
David Jesse
muchas gracias amigo un favor podria colocarlo en un proyecto de eclipse para descargar te lo agradeceria mucho...gracias y sigue asi..=)
ResponderEliminarHola Gian!
ResponderEliminarMuchas gracias por el comentario. Es muy fácil incorporar los archivos dados en este post a cualquier proyecto, tan solo tienes que colocarlos en layouts/ e "inflar" el layout en la actividad en el que lo vayas a usar.
De todas formas, en cuanto tenga un hueco subo un proyecto donde se usen.
Saludos
hey thanks for the tout
ResponderEliminarNice explanation! Thanks
ResponderEliminarGracias!!! Un abrazo.
ResponderEliminarThank you for your comments. It's nice to be useful
ResponderEliminarmuy buen tutorial, gracias por tu ayuda.
ResponderEliminarEstimado muy buena explicación, en esto del diseño siempre tenemos algunos problemas para hacer que las cosas se vean como queremos.
ResponderEliminarUna consulta, cuando tengo un RadioButton y un TextView, estos tienen altos diferentes en sus margenes por ende no se ven como una sola linea, he utilizado MATCH_PARENT para que ocupen todo el espacio del padre (TableRow) pero no funciona.
j acabo de ver el comentario, ¿Sigues teniendo el problema? Pásame el código concreto y lo vemos ( o por los comentarios o por aquí http://www.intelligenia.com/pages/contacta )
EliminarSaludos
hi could you please provide the drawables of last image as well. That Blue table is looking really cool.
ResponderEliminarGracias!
ResponderEliminarСпасибо большое из Питера :)
De nada
Eliminarне стоит благодарности!
Seems to be nice post, but I don't understand Spanish. It would have been better if you had posted an English version or use of translation would be also good ;-(
ResponderEliminarHey Kanth A. You can find a similar explanation in http://stackoverflow.com/questions/2108456/how-to-create-a-table-with-borders-in-android. There is not examples there but, anyway, I think it's easy to get the idea.
EliminarThanks for your comment.
Nice onnne! :D
ResponderEliminarThanks for this great post!
You are welcome!
EliminarIt is a pleasure!
Un post bien escrito y muy útil ...
ResponderEliminarMuchas gracias por tu aporte.
Me alegra mucho que haya podido ayudarte!
EliminarMuchas gracias por comentar
Muchas gracias, era justo lo que estaba buscando pero no encontraba la solución. Está perfectamente explicado y los ejemplos lo redondean.
ResponderEliminarGracias!!
Genial! Es un placer poder haberte ayudado.
EliminarMuchisimas gracias por comentar!
Saludos
Hola me preguntaba si usted podría ayudarme con algunas dudas que tengo respecto a la personalización de tablas en android, soy nueva en esto u.u muchas gracias
ResponderEliminar