Comment puis-je créer une table avec des frontières dans Android?

- Je utiliser un tableau de mise en page pour afficher des données sous forme de tableau, mais je veux une table définies par l'utilisateur avec des colonnes et des lignes avec des frontières. Des Suggestions?

InformationsquelleAutor Pinki | 2010-01-21
  1. 188

    Ma solution pour ce problème est de mettre un xml drawable ressource sur le champ de fond de chaque cellule. De cette manière, vous pouvez définir une forme avec la bordure que vous souhaitez pour toutes les cellules. Le seul inconvénient est que les frontières de l'extrême cellules ont la moitié de la largeur de l'autres, mais il n'est pas un problème si votre table remplit l'écran entier.

    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/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: Un exemple

    Comment puis-je créer une table avec des frontières dans Android?

    Edit2: un Autre exemple (avec des éléments plus: cercle des coins, des dégradés...)
    Comment puis-je créer une table avec des frontières dans Android?

    J'ai expliqué ce problème avec plus de détails dans http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more. Il est en espagnol, mais il y a certains codes et des images de plus de tableaux complexes.

    • C'était très utile.Merci pour le post
    • je ne suis pas en mesure d'afficher le contenu
    • Utile. merci!
    • Très utile, y compris votre blog via traduction
    • Grâce sMaN! C'est génial!
    • Comment pourrais-je définir l'arrière-plan de la vue par programmation? view.setBackground(?)
    • Pour l'afficher, il suffit de supprimer la première ligne appelé tabla_cabecera
    • Cela rendra les frontières apparaissent au moins 2px d'épaisseur qui n'est pas aussi agréable qu'un 1px de largeur de la bordure.
    • Oui, comme je l'ai expliqué, c'est le seul inconvénient, mais si votre table remplit la totalité de l'écran vous pouvez définir bas et de gauche frontières de 1px (par exemple) et vous aurez un tableau avec 1px frontières.

    InformationsquelleAutor David Jesse
  2. 53

    Je suis d'accord avec Brad. C'était une terrible réponse. Le Android documentation indique que TableLayout conteneurs de ne pas afficher les lignes frontalières, afin de les envoyer à l'Android site de coutume de les aider un peu. J'ai été en mesure de trouver un "sale" solution sur droidnova, qui consiste à mettre une couleur de fond pour le TableLayout, puis à définir une couleur de fond différente pour les TableRow et l'ajout de layout_margin à la ligne. Je ne suis pas fan de cette solution, mais il fonctionne pour la ligne des frontières. Je suppose que vous pourriez faire la même chose avec les éléments de la composition de chaque "cellule", mais je n'ai pas vérifié.

    Un exemple semblable à celui sur DroidNova:

    <TableLayout android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow android:background="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp">
...
</TableRow>
</TableLayout>
    • Méfiez-vous de la délibérée de découvert question ici, il peut provoquer des janking / bégaiement dans l'INTERFACE utilisateur si la table est grande.
    • Comment puis-je définir layout_margin par programme sur TableRow objet?
    InformationsquelleAutor Shawn
  3. 38

    SI vous êtes juste essayer d'avoir une ligne entre les lignes (par exemple, juste au-dessus d'une ligne "Total"), alors il existe une solution facile - il suffit d'ajouter un TableRow avec une couleur de fond et une layout_height comme ceci:

    <TableRow android:layout_height="1px" android:background="#BDBDBD">
<TextView android:layout_span="2" android:layout_height="1px" 
android:layout_width="fill_parent" android:text="">
</TextView>
</TableRow>

    Ensemble android:layout_height="1px" ou cependant vous voulez épaisseur à la frontière. Remplissez autant de vide TextView de colonnes que vous avez besoin pour correspondre au reste de votre table, ou tout simplement utiliser l'une avec android:layout_span comme je l'ai démontré.

    La sortie devrait ressembler à quelque chose comme ceci:

    Comment puis-je créer une table avec des frontières dans Android?

    Si vous essayez d'ajouter plus compliqué frontières puis de l'autre des réponses déjà postées sont plus appropriés.

    • pourquoi un TextView lorsque vous pouvez utiliser un View à la place? Aussi il n'est pas recommandé de spécifier exact de pixels. Utilisation dp/sp au lieu. Voir aussi ce fil: stackoverflow.com/questions/2025282/....
    • Merci pour les commentaires... Pas de raison d'utiliser TextView je suppose - c'était juste un exemple. Deuxièmement, à moins que je suis malentendu dp/sp (assez probable, en fait, depuis que j'ai seulement été en développement sur Android pour environ une semaine) je px parce que je ne veux garanti-ligne de 1 pixel entre mes lignes, peu importe ce que la résolution ou la taille de l'écran que j'utilise. J'aime les traits très fins. D'autres utilisateurs peuvent avoir des goûts différents et d'utiliser d'autres unités.
    • oui, mais aimez-vous les traits très fins ! - que dit la bonne solution simple obtient mon vote
    InformationsquelleAutor Michael Bray
  4. 23

    Ce que je voulais est un tableau comme celui

    Comment puis-je créer une table avec des frontières dans Android?

    J'ai ajouté ceci dans mon styles.xml :

          <style name="Divider">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@color/divider_color</item>
</style>
<style name="Divider_invisible">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
</style>

    Ensuite dans mon disposition de table :

     <TableLayout
android:id="@+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#92C94A" >
<TextView
android:id="@+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider_invisible" />
</LinearLayout>
<TextView
android:id="@+id/textView12"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/main_wo_colon"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<TextView
android:id="@+id/textView13"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/side_wo_colon"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
<TextView
android:id="@+id/textView14"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="@string/total"
android:textColor="@color/white"
android:textSize="16sp" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F9C33" >
<TextView
android:id="@+id/textView21"
android:padding="5dp"
android:text="@string/servings"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="@style/Divider" />
</LinearLayout>
..........
.......
......
    InformationsquelleAutor YasirAzgar
  5. 21

    Vous pouvez également le faire progamatically, plutôt que via un fichier xml, mais c'est un peu plus "hackish". Mais donner à un homme sans options, et vous lui laissez pas le choix :p.. Voici le code:

    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);
    InformationsquelleAutor Mnightmare
  6. 13

    Comment puis-je créer une table avec des frontières dans Android?

    Ici, j'ai conçu la liste par la suite à la conception de l'image. Mon listitem nom de fichier est Propertylistitem.xml et cellborder.xml est utilisé drawable pour la forme de la cellborder de sortie, dans cette image. nécessaire de code que j'ai ajouté ici.

    FileName:propertylistitem.xml

    <TableLayout... >
<TableRow... >
<TextView ...
android:background="@drawable/cellborder"
android:text="Amount"/>
</TableRow>
<TableRow... >
<TextView...
android:background="@drawable/cellborder"
android:text="5000"/>
</TableRow>
</TableLayout>

    filename:cellborder.xml
    Ici, je veux juste seulement de la frontière dans ma conception, j'ai donc mis en commentaire la couleur solide tag. 

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<!--     <solid android:color="#dc6888"/>     -->
<stroke android:width="0.1dp" android:color="#ffffff"
/>
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
    InformationsquelleAutor MohanRaj S
  7. 11

    De faire 1dp effondrement-bordure autour de chaque cellule sans avoir à écrire du code java et sans créer un autre xml de mise en page avec <shape...> balise, vous pouvez essayer cette solution:

    Dans <TableLayout...> ajouter
    android:background="#CCC" et android:paddingTop="1dp" et android:stretchColumns="0"

    Dans <TableRow...> ajouter
    android:background="#CCC" et android:paddingBottom="1dp" et android:paddingRight="1dp"

    Dans chaque cellule/enfant dans TableRow, c'est à dire <TextView...> ajouter
    android:background="#FFF" et android:layout_marginLeft="1dp"

    Il est très important de suivre les rembourrages et les marges, tel que décrit. Cette solution permettra de dessiner un 1dp frontière aka border-collapse de la propriété en (X)HTML/CSS.

    Couleur d'arrière-plan dans <TableLayout...> et <TableRow...> représente une ligne de bordure et la couleur de fond dans <TextView...> remplit une cellule de tableau. Vous pouvez mettre un peu de rembourrage dans les cellules si nécessaire.

    Un exemple est ici:

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#CCC"
android:paddingTop="1dp"
android:stretchColumns="0"
android:id="@+id/tlTable01">
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView 
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item1"/>
<TextView 
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="123456"/>
</TableRow>
<TableRow
android:background="#CCC"
android:paddingBottom="1dp"
android:paddingRight="1dp">
<TextView 
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:text="Item2"/>
<TextView 
android:layout_marginLeft="1dp"
android:padding="5dp"
android:background="#FFF"
android:gravity="right"
android:text="456789"/>
</TableRow>
</TableLayout>
    • La bonne solution...
    InformationsquelleAutor davidmrnustik
  8. 8

    Après de longues recherches et heures de l'essayer c'est le code le plus simple que je pourrais faire:

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

    tv est un TextView avec un texte simple et le contenu de mon conteneur (LinearLayout dans ce Cas).
    C'est un peu plus facile.

    • nécessite API lvl 16 🙁
    • setBackgroundDrawable() peut être utilisé à la place.
    InformationsquelleAutor Marios
  9. 6

    Bien que peut inspirer d'u
    Ces étapes montrent comment créer bordé tableau dynamiquement

    voici la vue de la table

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:scrollingCache="true">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/simpleTableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:stretchColumns="*"
>
</TableLayout>
</android.support.v4.widget.NestedScrollView>

    et voici la ligne à utiliser "attrib_row.xml" 

    <?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/border"
>
<TextView
android:id="@+id/attrib_name"
android:textStyle="bold"
android:height="30dp"
android:background="@drawable/border"
android:gravity="center"
/>
<TextView
android:id="@+id/attrib_value"
android:gravity="center"
android:height="30dp"
android:textStyle="bold"
android:background="@drawable/border"
/>
</TableRow>

    et nous pouvons ajouter ce fichier xml pour drawable pour ajouter une bordure à notre table "border.xml"

    <?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="@color/colorAccent"/>
<stroke android:width="1dp" android:color="#000000"/>
</shape>

    et enfin, voici le code compact écrit dans Kotlin mais il est facile de le convertir en java si vous avez besoin d'

    bien temps est un tableau de la liste contiennent des données: ArrayList<Double>()

    fun CreateTable()
{
val temps=controller?.getTemps()
val rowHead = LayoutInflater.from(context).inflate(R.layout.attrib_row, null) as TableRow
(rowHead.findViewById<View>(R.id.attrib_name) as TextView).text=("time")
(rowHead.findViewById<View>(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<View>(R.id.attrib_name) as TextView).text=((i+1).toString())
(row.findViewById<View>(R.id.attrib_value) as TextView).text=(temps[i].toString())
table!!.addView(row)
}
table!!.requestLayout()
}

    et vous pouvez l'utiliser dans votre fragment, par exemple comme ceci 

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

    le résultat final ressemble à ceci
    Comment puis-je créer une table avec des frontières dans Android?

    InformationsquelleAutor DINA TAKLIT
  10. 5

    Comment sur la substitution de la méthode onDraw puis peindre les lignes sur la toile?

    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);
}
    InformationsquelleAutor Andrew
  11. 3

    J'ai utilisé cette solution: dans TableRow, j'ai créé pour chaque cellule LinearLayout avec la ligne verticale et réelle de la cellule en elle, et après chaque TableRow, j'ai ajouté une ligne horizontale.

    Regardez le code ci-dessous:

    <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1">
<TableRow            
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout 
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView 
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
<LinearLayout 
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_height="match_parent"
android:layout_width="1dp"
android:background="#BDCAD2"/>
<TextView 
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
</TableRow>
<View
android:layout_height="1dip"
android:background="#BDCAD2" />
<!-- More TableRows -->
</TableLayout>

    Espère que ça va aider.

    • C'est une approche simple pour l'ajout d'une seule ligne en dessous de la ligne.
    InformationsquelleAutor Matus
  12. 3

    Ici est un excellent moyen de résoudre ce problème:

    Créer un rectangle dessiné avec des coins arrondis comme ceci:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
<stroke android:width="2dp"
android:color="#888888"/> 
<corners android:bottomRightRadius="6dp" 
android:bottomLeftRadius="6dp" 
android:topLeftRadius="6dp" 
android:topRightRadius="6dp"/> 
</shape>

    de l'enregistrer dans le dossier drawable avec le nom rounded_border.xml

    Puis créer une relative mise en page qui utilise le rounded_border comme arrière-plan comme ceci:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:background="@drawable/rounded_border">
<ListView 
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>

    enregistrer dans votre mise en page de dossier et nommez-le table_with_border.xml

    alors à chaque fois que vous besoin d'une telle table de tirer dans un affichage à l'aide de la syntaxe ressemble à ceci:

    <include
android:id="@+id/rounded_table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/table_with_border" />

    Vous voulez probablement ajouter quelques espacement autour des bords - donc, juste wrap de l'inclure dans un LinearLayout et ajouter un peu de rembourrage autour des bords.

    Simple et facile pour obtenir une jolie bordure autour d'une table.

    InformationsquelleAutor Aaron
  13. 2

    Le coup double sur le middel sections, j'ai utilisé cette couche de liste drawable:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/grey" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:bottom="1dp" android:right="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/lightgrey" />
</shape>
</item>
</layer-list>
    • Une bonne réponse, mais il fait également office de frontières.
    InformationsquelleAutor user3853262
  14. 2

    Je pense qu'il est préférable de créer 1px neuf-patch de l'image, et l'utilisation showDividers attribut dans TableRow et TableLayout, car ils sont à la fois LinearLayouts

    • Pouvez-vous donner un exemple simple sur elle?
    InformationsquelleAutor Bartek
  15. 2

    Une frontière entre les cellules est doublé dans les réponses ci-dessus.
    Donc, vous pouvez essayer cette solution:

    <item
android:left="-1dp"
android:top="-1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/>
<stroke
android:width="1dp"
android:color="#ccc"/>
</shape>
</item>

    InformationsquelleAutor CoolMind
  16. 2

    Je sais que c'est une vieille question ... de toute façon ... si vous voulez garder votre xml simple et sympathique, vous pouvez étendre TableLayout et remplacer dispatchDraw de faire quelques dessin personnalisé.

    Ici est un moyen rapide et sale de mise en œuvre qui dessine un rectangle autour de la table de la vue ainsi que les horizontales et les verticales des barres:

    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);
}
}
}
}
}
}
}

    exemple de xml avec la troisième colonne de l'habillage du texte:

    <com.YOURPACKAGE.TableLayoutEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="2"
android:paddingTop="6dp">
<TableRow>
<TextView
android:text="@string/my_text_0_0"
android:padding="@dimen/my_padding"/>
<TextView
android:text="@string/my_text_0_1"
android:padding="@dimen/my_padding"/>
<TextView                   
android:text="@string/my_text_0_2_to_wrap"
android:padding="@dimen/my_padding"/>
</TableRow>
<!--more table rows here-->
</com.YOURPACKAGE.TableLayoutEx>
    InformationsquelleAutor A.J.Bauer
  17. 1

    Une autre solution est d'utiliser linéaire mises en page et définissez les séparations entre les lignes et les cellules comme ceci:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<View
android:layout_width="@dimen/border"
android:layout_height="match_parent"
android:background="#8000"
android:layout_marginTop="1px"
android:layout_marginBottom="1px"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#8000"/>
</LinearLayout>

    C'est une solution sale, mais il est simple et fonctionne également avec un fond transparent et de frontières.

    InformationsquelleAutor Gregor Ažbe