J'utilise une disposition de tableau pour afficher les données sous forme de tableau, mais je veux un tableau avec des colonnes définies par l'utilisateur et des lignes avec des bordures. Suggestions?
la source
J'utilise une disposition de tableau pour afficher les données sous forme de tableau, mais je veux un tableau avec des colonnes définies par l'utilisateur et des lignes avec des bordures. Suggestions?
Ma solution à ce problème est de mettre une ressource dessinable xml sur le champ d'arrière-plan de chaque cellule. De cette manière, vous pouvez définir une forme avec la bordure souhaitée pour toutes les cellules. Le seul inconvénient est que les bordures des cellules extrêmes ont la moitié de la largeur des autres mais ce n'est pas un problème si votre tableau remplit tout l'écran.
Un exemple:
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 / ma_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: un exemple
Edit2: Un autre exemple (avec plus d'éléments: coins de cercle, dégradés ...)
J'ai expliqué ce problème avec plus de détails dans http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more . C'est en espagnol mais il y a des codes et des images de tableaux plus complexes.
view.setBackground(?)
Je suis d'accord avec Brad. C'était une réponse terrible. La documentation Android indique que les conteneurs TableLayout n'affichent pas de lignes de bordure, donc leur envoi sur le site Android ne les aidera pas un peu. J'ai pu trouver une solution "sale" sur droidnova, qui consiste à définir une couleur d'arrière-plan pour le TableLayout, puis à définir une couleur d'arrière-plan différente pour le TableRow et à ajouter layout_margin à la ligne. Je n'aime pas cette solution, mais elle fonctionne pour les bordures de rangées. Je suppose que vous pourriez faire la même chose avec les éléments composant chaque élément "cellule" mais je n'ai pas vérifié.
Un exemple similaire à celui de DroidNova:
la source
TableRow
objet?SI vous essayez simplement d'avoir une ligne entre les lignes (par exemple, juste au-dessus d'une ligne "Total"), il existe une solution simple - ajoutez simplement un TableRow avec une couleur d'arrière-plan et un layout_height spécifique comme celui-ci:
Définissez
android:layout_height="1px"
ou quelle que soit l'épaisseur souhaitée de la bordure. Remplissez autant de colonnes TextView vides que nécessaire pour correspondre au reste de votre tableau, ou utilisez-en simplement une avecandroid:layout_span
comme je l'ai démontré.La sortie ressemblera à quelque chose comme ceci:
Si vous essayez d'ajouter des bordures plus compliquées, les autres réponses déjà publiées sont plus appropriées.
la source
TextView
quand vous pouvez utiliser un à laView
place? De plus, il n'est pas recommandé de spécifier des pixels exacts. Utilisez plutôt dp / sp. Voir aussi ce fil: stackoverflow.com/questions/2025282/… .Ce que je voulais, c'est une table comme celle-ci
J'ai ajouté ceci dans mon styles.xml :
Puis dans ma disposition de table :
la source
Vous pouvez aussi le faire par programme, plutôt que par xml, mais c'est un peu plus "hackish". Mais ne donnez aucune option à un homme et vous ne lui laissez pas le choix: p .. Voici le code:
la source
Pour créer une bordure de réduction 1dp autour de chaque cellule sans écrire de code java et sans créer une autre mise en page XML avec une
<shape...>
balise, vous pouvez essayer cette solution:Dans
<TableLayout...>
ajouterandroid:background="#CCC"
etandroid:paddingTop="1dp"
etandroid:stretchColumns="0"
Dans
<TableRow...>
ajouterandroid:background="#CCC"
etandroid:paddingBottom="1dp"
etandroid:paddingRight="1dp"
Dans chaque cellule / enfant de TableRow, c'est-à-dire
<TextView...>
ajouterandroid:background="#FFF"
etandroid:layout_marginLeft="1dp"
Il est très important de suivre les rembourrages et les marges comme décrit. Cette solution dessinera une bordure 1dp aka propriété border-collapse en (X) HTML / CSS.
La couleur d'arrière-plan dans
<TableLayout...>
et<TableRow...>
représente une couleur de ligne de bordure et l'arrière-plan dans<TextView...>
remplit une cellule de tableau. Vous pouvez mettre du rembourrage dans les cellules si nécessaire.Un exemple est ici:
la source
Ici, j'ai conçu la liste par l'image de conception suivante. Mon nom de fichier listitem est Propertylistitem.xml et cellborder.xml est une forme dessinable utilisée pour la sortie cellborder, sont montrés dans cette image. code nécessaire que j'ai ajouté ici.
Nom du fichier: propertylistitem.xml
filename: cellborder.xml Ici, je veux juste une bordure dans ma conception, donc je mets en commentaire la balise de couleur unie.
la source
Après de longues recherches et des heures d'essais, voici le code le plus simple que je puisse créer:
tv est un TextView avec un texte simple et le contenu est mon conteneur (LinearLayout dans ce cas). C'est un peu plus facile.
la source
setBackgroundDrawable()
peut être utilisé à la place.Eh bien, cela peut vous inspirer Ces étapes montrent comment créer dynamiquement un tableau bordé
voici la vue du tableau
et ici la ligne pour utiliser "attrib_row.xml"
et nous pouvons ajouter ce fichier xml à drawable pour ajouter une bordure à notre table "border.xml"
et enfin voici le code compact écrit en Kotlin mais il est facile de le convertir en java si vous avez besoin
bien temps est une liste de tableaux contenant des données:
ArrayList<Double>()
et vous pouvez l'utiliser dans votre fragment par exemple comme ceci
le résultat final ressemble à ceci
la source
Que diriez-vous de remplacer la méthode onDraw et de peindre des lignes sur le canevas?
la source
J'ai utilisé cette solution: dans
TableRow
, j'ai créé pour chaque celluleLinearLayout
avec une ligne verticale et une cellule réelle, et après chaqueTableRow
, j'ai ajouté une ligne horizontale.Regardez le code ci-dessous:
J'espère que cela aidera.
la source
Voici un excellent moyen de résoudre ce problème:
Créez un rectangle dessinable avec des coins arrondis comme ceci:
enregistrez-le dans le dossier dessinable avec le nom arrondi_border.xml
Ensuite, créez une mise en page relative qui utilise arrondi_border comme arrière-plan comme ceci:
enregistrez-le dans votre dossier de mise en page et nommez-le table_with_border.xml
puis chaque fois que vous avez besoin d'une telle table, tirez-la dans une vue en utilisant la syntaxe d'inclusion comme celle-ci:
Vous voudrez probablement ajouter un espacement autour des bords - il suffit donc d'enrouler l'inclusion dans un LinearLayout et d'ajouter un peu de remplissage autour des bords.
Un moyen simple et facile d'obtenir une jolie bordure autour d'une table.
la source
Le trait double sur les sections intermédiaires, j'ai utilisé cette liste de calques dessinable:
la source
Je pense qu'il est préférable de créer une image 1px à neuf patchs et d'utiliser l'attribut showDividers dans TableRow et TableLayout car ils sont tous les deux LinearLayouts
la source
Une frontière entre les cellules est doublée dans les réponses ci-dessus. Donc, vous pouvez essayer cette solution:
la source
Une autre solution consiste à utiliser des mises en page linéaires et à définir des diviseurs entre les lignes et les cellules comme ceci:
C'est une solution sale, mais c'est simple et fonctionne également avec un fond transparent et des bordures.
la source
Je sais que c'est une vieille question ... de toute façon ... si vous voulez garder votre xml agréable et simple, vous pouvez étendre TableLayout et remplacer dispatchDraw pour faire un dessin personnalisé.
Voici une implémentation rapide et sale qui dessine un rectangle autour de la vue du tableau ainsi que des barres horizontales et verticales:
xml exemple avec le texte d'habillage de la troisième colonne:
la source
Si vous avez besoin d'un tableau avec la bordure, je suggère une mise en page linéaire avec un poids au lieu de TableLayout.
la source