¿Cómo puedo crear una tabla con bordes en Android?

Utilizo un diseño de tabla para mostrar datos como tabla, pero quiero una tabla con columnas definidas por el usuario y filas con bordes. Sugerencias?

Mi solución para este problema es poner un recurso xml drawable en el campo de fondo de cada celda. De esta manera, podría definir una forma con el borde que desea para todas las celdas. El único inconveniente es que los límites de las celdas extremas tienen la mitad de ancho que los otros, pero no es un problema si la tabla ocupa toda la pantalla.

Un ejemplo:

drawable / cell_shape.xml

     

layout / my_table.xml

                           

Editar: un ejemplo

enter image description here

Edit2: Otro ejemplo (con más elementos: esquinas del círculo, degradados …) enter image description here

He explicado este problema con más detalles en http://blog.intelligenia.com/2012/02/progtwigcion-movil-en-android.html#more . Está en español, pero hay algunos códigos e imágenes de tablas más complejas.

Tengo que estar de acuerdo con Brad. Esa fue una respuesta horrible. La documentación de Android establece que los contenedores de TableLayout no muestran líneas de borde, por lo que enviarlos al sitio de Android no los ayudará un poco. Pude encontrar una solución “sucia” en droidnova, que implica establecer un color de fondo para TableLayout, luego establecer un color de fondo diferente para TableRow y agregar layout_margin a la fila. No me gusta esta solución, pero funciona para los bordes de las filas. Supongo que podrías hacer lo mismo con los elementos que componen cada elemento de “celda” pero no he verificado.

Un ejemplo similar al de DroidNova:

   ...   

Si solo está tratando de tener una línea entre las filas (por ejemplo, justo encima de una fila “Total”), entonces hay una solución fácil: simplemente agregue un TableRow con un color de fondo y un layout_height específico como este:

     

Set android:layout_height="1px" o por más grueso que quieras que sea el borde. Complete tantas columnas vacías de TextView como necesite para unir el rest de su tabla, o simplemente use una junto con android:layout_span como lo he demostrado.

La salida se verá algo como esto:

Table Border demostrado

Si intenta agregar bordes más complicados, las otras respuestas ya publicadas son más apropiadas.

También puede hacer esto de forma progamatica, en lugar de a través de xml, pero es un poco más “hackish”. Pero no le de a un hombre opciones y no le dejas ninguna opción: p .. Aquí está el código:

 TableLayout table = new TableLayout(this); TableRow tr = new TableRow(this); tr.setBackgroundColor(Color.BLACK); tr.setPadding(0, 0, 0, 2); //Border between rows TableRow.LayoutParams llp = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); llp.setMargins(0, 0, 2, 0);//2px right-margin //New Cell LinearLayout cell = new LinearLayout(this); cell.setBackgroundColor(Color.WHITE); cell.setLayoutParams(llp);//2px border on the right for the cell TextView tv = new TextView(this); tv.setText("Some Text"); tv.setPadding(0, 0, 4, 3); cell.addView(tv); tr.addView(cell); //add as many cells you want to a row, using the same approach table.addView(tr); 

Lo que quería era una mesa como esta

imagen de la mesa con divisores verticales

Añadí esto en mi styles.xml :

    

Luego en el diseño de mi mesa :

                        .......... ....... ...... 

enter image description here

Aquí he diseñado la lista por la siguiente imagen de diseño. Mi nombre de archivo listitem es Propertylistitem.xml y cellborder.xml se utiliza forma dibujable para la salida del borde de la celda, se muestran en esta imagen. código necesario que agregué aquí.

FileName: propertylistitem.xml

         

nombre de archivo: cellborder.xml Aquí solo quiero solo borde en mi diseño, así que puse el comentario en la etiqueta de color sólido.

       

Para hacer un borde de colapso de 1dp alrededor de cada celda sin escribir un código java y sin crear otro diseño xml con la etiqueta , puedes probar esta solución:

En add android:background="#CCC" y android:paddingTop="1dp" y android:stretchColumns="0"

En add android:background="#CCC" y android:paddingBottom="1dp" y android:paddingRight="1dp"

En cada célula / niño en TableRow, es decir, add android:background="#FFF" y android:layout_marginLeft="1dp"

Es muy importante seguir los rellenos y los márgenes como se describe. Esta solución dibujará una frontera de 1dp, también conocida como colapso de borde, en (X) HTML / CSS.

El color de fondo en y representa un color y fondo de línea de borde en llena una celda de la tabla. Puede poner algo de relleno en las celdas si es necesario.

Un ejemplo está aquí:

           

Después de una larga búsqueda y horas de prueba, este es el código más simple que podría hacer:

 ShapeDrawable border = new ShapeDrawable(new RectShape()); border.getPaint().setStyle(Style.STROKE); border.getPaint().setColor(Color.BLACK); tv.setBackground(border); content.addView(tv); 

tv es una vista de texto con un texto simple y el contenido es mi contenedor (LinearLayout en este caso). Eso es un poco más fácil.

¿Qué hay sobre anular el método onDraw y luego pintar líneas en el canvas?

 for(int i = 0; i < rows; i++) { canvas.drawLine(0, i * m_cellHeight, m_totalWidth, i * m_cellHeight, paint); } for(int i = 0; i < m_columns; i++){ canvas.drawLine(i* m_cellWidth, 0, i * m_cellWidth, m_cellHeight * rows, paint); } 

Bueno, eso puede inspirarte. Esos pasos muestran cómo crear dinámicamente una tabla delimitada.

aquí está la vista de tabla

     

y aquí la fila para usar “attrib_row.xml”

      

y podemos agregar este archivo xml a dibujable para agregar borde a nuestra tabla “border.xml”

      

y finalmente aquí está el código compacto escrito en Kotlin, pero es fácil convertirlo a Java si lo necesita

well temps es una lista de matriz que contiene datos: ArrayList()

 fun CreateTable() { val temps=controller?.getTemps() val rowHead = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow (rowHead.findViewById(R.id.attrib_name) as TextView).text=("time") (rowHead.findViewById(R.id.attrib_value) as TextView).text=("Value") table!!.addView(rowHead) for (i in 0 until temps!!.size) { val row = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow (row.findViewById(R.id.attrib_name) as TextView).text=((i+1).toString()) (row.findViewById(R.id.attrib_value) as TextView).text=(temps[i].toString()) table!!.addView(row) } table!!.requestLayout() } 

y puedes usarlo en tu fragmento, por ejemplo, así

  override fun onViewCreated(view: View?, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) table = view?.findViewById(R.id.simpleTableLayout) as TableLayout CreateTable() } 

el resultado final se ve así enter image description here

TableRow esta solución: en TableRow , creé para cada celda LinearLayout con línea vertical y celda real en él, y después de cada TableRow , agregué una línea horizontal.

Mira el código a continuación:

              

Espero que ayude

Aquí hay una excelente manera de resolver este problema:

Crea un rectángulo dibujable con esquinas redondeadas como este:

      

guárdelo en la carpeta dibujable con el nombre rounded_border.xml

A continuación, cree un diseño relativo que use rounded_border como un fondo como este:

     

guárdelo en su carpeta de diseño y asígnele el nombre table_with_border.xml

luego, cada vez que necesite una tabla así, extráigala a una vista utilizando la syntax include como esta:

  

Probablemente desees agregar algo de espacio alrededor de los bordes, así que simplemente envuelve el include en LinearLayout y agrega algo de relleno alrededor de los bordes.

Manera simple y fácil de obtener un lindo borde alrededor de una mesa.

El trazo se duplica en las secciones medias, usé esta lista de capas dibujables:

             

Creo que es mejor crear una imagen de 1px de nueve parches, y usar el atributo showDividers en TableRow y TableLayout ya que ambos son LinearLayouts

Un límite entre celdas se duplica en las respuestas anteriores. Entonces, puedes probar esta solución:

       

Sé que esta es una vieja pregunta … de todos modos … si quieres mantener tu xml simple y agradable, puedes extender TableLayout y anular el dibujo de envío para hacer un dibujo personalizado.

Aquí hay una implementación rápida y sucia que dibuja un rectángulo alrededor de la vista de tabla, así como barras horizontales y verticales:

 public class TableLayoutEx extends TableLayout { private Paint linePaint = null; private Rect tableLayoutRect; public TableLayoutEx(Context context) { super(context); } public TableLayoutEx(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); float strokeWidth = this.getContext().getResources().getDisplayMetrics().scaledDensity * 1; linePaint = new Paint(0); linePaint.setColor(0xff555555); linePaint.setStrokeWidth(strokeWidth); linePaint.setStyle(Paint.Style.STROKE); Rect rect = new Rect(); int paddingTop= getPaddingTop(); this.getDrawingRect(rect); tableLayoutRect = new Rect(rect.left, rect.top + paddingTop, rect.right, rect.bottom); } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); Rect rect = new Rect(); if (linePaint != null) { canvas.drawRect(tableLayoutRect, linePaint); float y = tableLayoutRect.top; for (int i = 0; i < getChildCount() - 1; i++) { if (getChildAt(i) instanceof TableRow) { TableRow tableRow = (TableRow) getChildAt(i); tableRow.getDrawingRect(rect); y += rect.height(); canvas.drawLine(tableLayoutRect.left, y, tableLayoutRect.right, y, linePaint); float x = tableLayoutRect.left; for (int j = 0; j < tableRow.getChildCount() - 1; j++) { View view = tableRow.getChildAt(j); if (view != null) { view.getDrawingRect(rect); x += rect.width(); canvas.drawLine(x, tableLayoutRect.top, x, tableLayoutRect.bottom, linePaint); } } } } } } } 

ejemplo xml con la tercera columna que ajusta el texto:

         

Otra solución es usar diseños lineales y establecer divisores entre filas y celdas como esta:

                    

Es una solución sucia, pero es simple y también funciona con fondos y bordes transparentes.