Utilizo un diseño de tabla para mostrar los datos como tabla, pero quiero una tabla con columnas y filas definidas por el usuario con bordes. Sugerencias?
fuente
Utilizo un diseño de tabla para mostrar los datos como tabla, pero quiero una tabla con columnas y filas definidas por el usuario con bordes. Sugerencias?
Mi solución para este problema es poner un recurso dibujable xml 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 bordes de las celdas extremas tienen la mitad del ancho de los demás, pero no hay problema si su tabla ocupa toda la pantalla.
Un ejemplo:
drawable / cell_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle" >
<solid android:color="#000"/>
<stroke android:width="1dp" android:color="#ff9"/>
</shape>
layout / my_table.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableRow
android:id="@+id/tabla_cabecera"
android:layout_width="match_parent"
android:layout_height="match_parent"></TableRow>
<TableLayout
android:id="@+id/tabla_cuerpo"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cell_shape"
android:padding="5dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
</TableRow>
</TableLayout>
</LinearLayout>
Editar: un ejemplo
Edit2: Otro ejemplo (con más elementos: esquinas circulares, gradientes ...)
He explicado este problema con más detalles en http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more . Está en español pero hay algunos códigos e imágenes de tablas más complejas.
view.setBackground(?)
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 fila. Supongo que podría hacer lo mismo con los elementos que componen cada elemento de "celda" pero no lo he verificado.
Un ejemplo similar al de DroidNova:
fuente
TableRow
objeto?SI solo está tratando de tener una línea entre filas (por ejemplo, justo encima de una fila "Total"), entonces hay una solución fácil: simplemente agregue una TableRow con un color de fondo y una altura de diseño específica como esta:
Establezca
android:layout_height="1px"
o, por más grueso que desee, que sea el borde. Complete tantas columnas vacías de TextView como necesite para que coincida con el resto de su tabla, o simplemente use una junto con lasandroid:layout_span
que he demostrado.La salida se verá más o menos así:
Si está intentando agregar bordes más complicados, las otras respuestas ya publicadas son más apropiadas.
fuente
TextView
cuando puedes usar unView
en su lugar? Además, no es una buena práctica especificar píxeles exactos. Use dp / sp en su lugar. Vea también este hilo: stackoverflow.com/questions/2025282/… .Lo que quería es una mesa como esta
Agregué esto en mi styles.xml :
Luego, en el diseño de mi mesa :
fuente
También puede hacer esto de forma progamática, en lugar de hacerlo a través de xml, pero es un poco más "hack". Pero no le dé opciones a un hombre y no le deja otra opción: p. Aquí está el código:
fuente
Para hacer 1dp collapse-border alrededor de cada celda sin escribir un código java y sin crear otro diseño xml con
<shape...>
etiqueta, puede probar esta solución:En
<TableLayout...>
agregarandroid:background="#CCC"
yandroid:paddingTop="1dp"
yandroid:stretchColumns="0"
En
<TableRow...>
agregarandroid:background="#CCC"
yandroid:paddingBottom="1dp"
yandroid:paddingRight="1dp"
En cada celda / hijo en TableRow, es decir,
<TextView...>
agregueandroid:background="#FFF"
yandroid:layout_marginLeft="1dp"
Es muy importante seguir los rellenos y márgenes como se describe. Esta solución dibujará un borde de 1dp, también conocido como propiedad de colapso del borde en (X) HTML / CSS.
El color de fondo
<TableLayout...>
y<TableRow...>
representa un color de línea de borde y el fondo<TextView...>
llena una celda de tabla. Puede poner algo de relleno en las celdas si es necesario.Un ejemplo está aquí:
fuente
Aquí he diseñado la lista con la siguiente imagen de diseño. Mi nombre de archivo de listitem es propiedadylistitem.xml y cellborder.xml se utiliza forma dibujable para la salida de cellborder, se muestran en esta imagen. código necesario que agregué aquí.
FileName: propiedadylistitem.xml
filename: cellborder.xml Aquí solo quiero un borde en mi diseño, así que pongo un comentario en la etiqueta de color sólido.
fuente
Después de largas búsquedas y horas de intentarlo, este es el código más simple que podría hacer:
tv es un TextView con un texto simple y el contenido es mi contenedor (LinearLayout en este caso). Eso es un poco más fácil.
fuente
setBackgroundDrawable()
se puede usar en su lugar.Bueno, eso puede inspirarte. Esos pasos muestran cómo crear dinámicamente una tabla con borde.
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
bien temps es una lista de matriz que contiene datos:
ArrayList<Double>()
y puedes usarlo en tu fragmento, por ejemplo, así
el resultado final se ve así
fuente
¿Qué tal anular el método onDraw y luego pintar líneas en el lienzo?
fuente
Utilicé esta solución: en
TableRow
, creé para cada celdaLinearLayout
con línea vertical y celda real, y después de cadaTableRow
, agregué una línea horizontal.Mira el código a continuación:
Espero que ayude.
fuente
Aquí hay una excelente manera de resolver este problema:
Crea un rectángulo dibujable con esquinas redondeadas como esta:
guárdelo en la carpeta dibujable con el nombre rounded_border.xml
Luego, cree un diseño relativo que use el redondeado_border como 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 de este tipo, llévela a una vista utilizando la sintaxis de inclusión como esta:
Probablemente desee agregar algo de espacio alrededor de los bordes, así que simplemente envuelva la inclusión en un LinearLayout y agregue algo de relleno alrededor de los bordes.
Manera simple y fácil de obtener un borde bonito alrededor de una mesa.
fuente
El trazo se duplica en las secciones middel, utilicé esta lista de capas dibujable:
fuente
Creo que es mejor crear una imagen de nueve parches de 1 px y usar el atributo showDividers en TableRow y TableLayout ya que ambos son LinearLayouts
fuente
Un borde entre celdas se duplica en las respuestas anteriores. Entonces, puedes probar esta solución:
fuente
Otra solución es usar diseños lineales y establecer divisores entre filas y celdas de esta manera:
Es una solución sucia, pero es simple y también funciona con fondo y bordes transparentes.
fuente
Sé que esta es una vieja pregunta ... de todos modos ... si desea mantener su xml agradable y simple, puede extender TableLayout y anular dispatchDraw para hacer un dibujo personalizado.
Aquí hay una implementación rápida y sucia que dibuja un rectángulo alrededor de la vista de la tabla, así como barras horizontales y verticales:
Ejemplo xml con el texto de ajuste de la tercera columna:
fuente
Si necesita una tabla con el borde, sugiero un diseño lineal con peso en lugar de TableLayout.
fuente