Eu uso um layout de tabela para exibir dados como tabela, mas quero uma tabela com colunas definidas pelo usuário e linhas com bordas. Sugestões?
fonte
Eu uso um layout de tabela para exibir dados como tabela, mas quero uma tabela com colunas definidas pelo usuário e linhas com bordas. Sugestões?
Minha solução para esse problema é colocar um recurso extraível xml no campo de segundo plano de cada célula. Dessa maneira, você pode definir uma forma com a borda que deseja para todas as células. O único inconveniente é que as bordas das células extremas têm metade da largura das outras, mas não há problema se a sua mesa preencher a tela inteira.
Um exemplo:
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>
Edit: Um exemplo
Edit2: Outro exemplo (com mais elementos: cantos de círculo, gradientes ...)
Eu expliquei esse problema com mais detalhes em http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more . É em espanhol, mas existem alguns códigos e imagens de tabelas mais complexas.
view.setBackground(?)
Eu tenho que concordar com Brad. Essa foi uma resposta terrível. A documentação do Android afirma que os contêineres do TableLayout não exibem linhas de borda; portanto, enviá-los ao site do Android não os ajudará um pouco. Consegui encontrar uma solução "suja" no droidnova, que envolve definir uma cor de plano de fundo para o TableLayout, definir uma cor de plano de fundo diferente para o TableRow e adicionar layout_margin à linha. Não gosto dessa solução, mas funciona para bordas de linha. Eu acho que você poderia fazer o mesmo com os itens que compõem cada item da "célula", mas eu não verifiquei.
Um exemplo semelhante ao do DroidNova:
fonte
TableRow
objeto?Se você está apenas tentando ter uma linha entre as linhas (por exemplo, logo acima de uma linha "Total"), existe uma solução fácil - basta adicionar um TableRow com uma cor de fundo e um layout_height específico como este:
Defina
android:layout_height="1px"
ou quão grosso você deseja que a borda seja. Preencha quantas colunas vazias do TextView forem necessárias para corresponder ao restante da sua tabela ou use apenas umaandroid:layout_span
como demonstrado.A saída será mais ou menos assim:
Se você está tentando adicionar bordas mais complicadas, as outras respostas já postadas são mais apropriadas.
fonte
TextView
quando você pode usar umView
? Também não é uma boa prática especificar pixels exatos. Use dp / sp. Consulte também este tópico: stackoverflow.com/questions/2025282/… .O que eu queria é uma mesa como esta
Adicionei isso no meu styles.xml :
Então, no meu layout de tabela :
fonte
Você também pode fazer isso de forma programática, e não através de xml, mas é um pouco mais "hack". Mas não dê opções a um homem e você não terá escolha: p. Aqui está o código:
fonte
Para criar uma borda de recolhimento de 1dp em cada célula sem escrever um código java e sem criar outro layout xml com
<shape...>
tag, você pode tentar esta solução:Em
<TableLayout...>
adiçãoandroid:background="#CCC"
eandroid:paddingTop="1dp"
eandroid:stretchColumns="0"
Em
<TableRow...>
adiçãoandroid:background="#CCC"
eandroid:paddingBottom="1dp"
eandroid:paddingRight="1dp"
Em cada célula / filho no TableRow, ou seja,
<TextView...>
adicioneandroid:background="#FFF"
eandroid:layout_marginLeft="1dp"
É muito importante seguir as almofadas e margens, conforme descrito. Esta solução irá desenhar uma borda 1dp, também conhecida como propriedade de colapso de borda, em (X) HTML / CSS.
A cor de fundo
<TableLayout...>
e<TableRow...>
representa uma cor da linha de borda e o fundo em<TextView...>
preenche uma célula da tabela. Você pode colocar algum preenchimento nas células, se necessário.Um exemplo está aqui:
fonte
Aqui eu projetei a lista pela seguinte imagem de design. Meu nome do arquivo listitem é Propertylistitem.xml e cellborder.xml é usado como forma de desenho para a saída do limite da célula, são mostrados nesta imagem. código necessário que eu adicionei aqui.
FileName: propertylistitem.xml
filename: cellborder.xml Aqui eu só quero borda no meu design, então coloquei a tag de cor sólida.
fonte
Após longas pesquisas e horas tentando, este é o código mais simples que eu poderia criar:
tv é um TextView com um texto simples e o conteúdo é meu contêiner (LinearLayout neste caso). Isso é um pouco mais fácil.
fonte
setBackgroundDrawable()
pode ser usado em seu lugar.Bem, isso pode inspirar você. Essas etapas mostram como criar tabela com borda dinamicamente
aqui está a tabela
e aqui a linha para usar "attrib_row.xml"
e podemos adicionar esse arquivo xml ao drawable para adicionar borda à nossa tabela "border.xml"
e, finalmente, aqui está o código compacto escrito em Kotlin mas é fácil convertê-lo para java, se você precisar
temperatura do poço é uma lista de matriz que contém dados:
ArrayList<Double>()
e você pode usá-lo em seu fragmento, por exemplo, como este
o resultado final se parece com isso
fonte
Que tal substituir o método onDraw e pintar linhas na tela?
fonte
Usei esta solução:
TableRow
criei para cada célulaLinearLayout
com linha vertical e célula real e, depois de cadaTableRow
, adicionei uma linha horizontal.Veja o código abaixo:
Espero que ajude.
fonte
Aqui está uma ótima maneira de resolver esse problema:
Crie um retângulo que possa ser desenhado com cantos arredondados como este:
salve-o na pasta extraível com o nome rounded_border.xml
Em seguida, crie um layout relativo que use o rounded_border como plano de fundo como este:
salve-o na pasta de layout e nomeie-o table_with_border.xml
sempre que você precisar de uma tabela, puxe-a para uma visualização usando a sintaxe de inclusão como esta:
Você provavelmente desejará adicionar algum espaçamento nas bordas - apenas envolva a inclusão em um LinearLayout e adicione algum preenchimento nas bordas.
Maneira simples e fácil de obter uma borda bonita em torno de uma mesa.
fonte
O curso dobra nas seções intermediárias, usei esta lista de camadas desenháveis:
fonte
Eu acho que é melhor criar 1px imagem de nove correções e usar o atributo showDividers em TableRow e TableLayout, pois ambos são LinearLayouts
fonte
Uma borda entre células é dobrada nas respostas acima. Então, você pode tentar esta solução:
fonte
Outra solução é usar layouts lineares e definir divisores entre linhas e células assim:
É uma solução suja, mas é simples e também funciona com bordas e fundo transparentes.
fonte
Sei que essa é uma pergunta antiga ... enfim ... se você quiser manter seu xml agradável e simples, você pode estender o TableLayout e substituir o dispatchDraw para fazer algum desenho personalizado.
Aqui está uma implementação rápida e suja que desenha um retângulo ao redor da visualização da tabela, bem como as barras horizontais e verticais:
exemplo de xml com o terceiro texto de quebra de coluna:
fonte
Se você precisar de tabela com a borda, sugiro layout linear com peso em vez de TableLayout.
fonte