Ich verwende ein Tabellenlayout, um Daten als Tabelle anzuzeigen, möchte jedoch eine Tabelle mit benutzerdefinierten Spalten und Zeilen mit Rahmen. Vorschläge?
quelle
Ich verwende ein Tabellenlayout, um Daten als Tabelle anzuzeigen, möchte jedoch eine Tabelle mit benutzerdefinierten Spalten und Zeilen mit Rahmen. Vorschläge?
Meine Lösung für dieses Problem besteht darin, eine XML-Zeichenressource in das Hintergrundfeld jeder Zelle einzufügen. Auf diese Weise können Sie für alle Zellen eine Form mit dem gewünschten Rand definieren. Die einzige Unannehmlichkeit besteht darin, dass die Ränder der extremen Zellen halb so breit sind wie die anderen, aber es ist kein Problem, wenn Ihre Tabelle den gesamten Bildschirm ausfüllt.
Ein Beispiel:
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>
Bearbeiten: Ein Beispiel
Edit2: Ein weiteres Beispiel (mit mehr Elementen: Kreisecken, Verläufe ...)
Ich habe dieses Problem mit weiteren Details unter http://blog.intelligenia.com/2012/02/programacion-movil-en-android.html#more erklärt . Es ist auf Spanisch, aber es gibt einige Codes und Bilder von komplexeren Tabellen.
view.setBackground(?)
Ich muss Brad zustimmen. Das war eine schreckliche Antwort. In der Android-Dokumentation heißt es, dass in TableLayout-Containern keine Grenzlinien angezeigt werden. Das Senden an die Android-Site hilft ihnen also nicht weiter. Ich konnte auf droidnova eine "schmutzige" Lösung finden, bei der eine Hintergrundfarbe für das TableLayout festgelegt, dann eine andere Hintergrundfarbe für die TableRow festgelegt und der Zeile layout_margin hinzugefügt wird. Ich mag diese Lösung nicht, aber sie funktioniert für Zeilenränder. Ich denke, Sie könnten das Gleiche mit den Elementen tun, aus denen jedes "Zellen" -Element besteht, aber ich habe es nicht überprüft.
Ein ähnliches Beispiel wie bei DroidNova:
quelle
TableRow
Objekt festlegen ?Wenn Sie nur versuchen, eine Linie zwischen den Zeilen zu haben (z. B. direkt über einer "Gesamt" -Zeile), gibt es eine einfache Lösung: Fügen Sie einfach eine TableRow mit einer Hintergrundfarbe und einer bestimmten layout_height wie der folgenden hinzu:
Stellen Sie ein
android:layout_height="1px"
oder wie dick der Rand sein soll. Füllen Sie so viele leere TextView-Spalten aus, wie Sie benötigen, um mit dem Rest Ihrer Tabelle übereinzustimmen, oder verwenden Sie einfach eine zusammen mit,android:layout_span
wie ich gezeigt habe.Die Ausgabe sieht ungefähr so aus:
Wenn Sie versuchen, kompliziertere Rahmen hinzuzufügen, sind die anderen bereits veröffentlichten Antworten besser geeignet.
quelle
TextView
wenn SieView
stattdessen ein verwenden können? Es ist auch keine gute Praxis, genaue Pixel anzugeben. Verwenden Sie stattdessen dp / sp. Siehe auch diesen Thread: stackoverflow.com/questions/2025282/… .Was ich wollte, ist ein Tisch wie dieser
Ich habe dies in meiner styles.xml hinzugefügt :
Dann in meinem Tabellenlayout :
quelle
Sie können dies auch progamatisch tun, anstatt über XML, aber es ist ein bisschen "hackischer". Aber geben Sie einem Mann keine Optionen und Sie lassen ihm keine Wahl: p .. Hier ist der Code:
quelle
<shape...>
Sie können diese Lösung ausprobieren, um eine 1-dp-Kollapsgrenze um jede Zelle herum zu erstellen, ohne einen Java-Code zu schreiben und ohne ein weiteres XML-Layout mit Tag zu erstellen :In
<TableLayout...>
addandroid:background="#CCC"
undandroid:paddingTop="1dp"
undandroid:stretchColumns="0"
In
<TableRow...>
addandroid:background="#CCC"
undandroid:paddingBottom="1dp"
undandroid:paddingRight="1dp"
In jeder Zelle / jedem Kind in TableRow, dh
<TextView...>
hinzufügenandroid:background="#FFF"
undandroid:layout_marginLeft="1dp"
Es ist sehr wichtig, die beschriebenen Polster und Ränder einzuhalten. Diese Lösung zeichnet eine 1dp-Border-Eigenschaft, auch bekannt als Border-Collapse-Eigenschaft, in (X) HTML / CSS.
Die Hintergrundfarbe in
<TableLayout...>
und<TableRow...>
repräsentiert eine Grenzlinienfarbe und der Hintergrund in<TextView...>
füllt eine Tabellenzelle. Bei Bedarf können Sie Zellen auffüllen.Ein Beispiel ist hier:
quelle
Hier habe ich die Liste anhand des folgenden Designbildes gestaltet. Mein Listitem-Dateiname lautet Propertylistitem.xml und cellborder.xml wird als zeichnbare Form für die Cellborder-Ausgabe verwendet. Diese Bilder werden in diesem Bild angezeigt. notwendiger Code, den ich hier hinzugefügt habe.
Dateiname: propertyylistitem.xml
Dateiname: cellborder.xml Hier möchte ich nur einen Rand in meinem Design, also habe ich das einfarbige Tag kommentiert.
quelle
Nach langer Suche und stundenlangem Ausprobieren ist dies der einfachste Code, den ich machen konnte:
tv ist eine Textansicht mit einem einfachen Text und Inhalt ist mein Container (in diesem Fall LinearLayout). Das ist etwas einfacher.
quelle
setBackgroundDrawable()
kann stattdessen verwendet werden.Nun, das könnte Sie inspirieren. Diese Schritte zeigen, wie Sie eine umrandete Tabelle dynamisch erstellen
Hier ist die Tabellenansicht
und hier die zu verwendende Zeile "attrib_row.xml"
und wir können diese XML-Datei zu drawable hinzufügen, um unserer Tabelle "border.xml" einen Rahmen hinzuzufügen.
und schließlich ist hier der kompakte Code, der in Kotlin geschrieben ist, aber es ist einfach, ihn bei Bedarf in Java zu konvertieren
well temps ist eine Array-Liste, die Daten enthält:
ArrayList<Double>()
und Sie können es zum Beispiel so in Ihrem Fragment verwenden
Das Endergebnis sieht so aus
quelle
Wie wäre es, wenn Sie die onDraw-Methode überschreiben und dann Linien auf die Leinwand malen?
quelle
Ich habe diese Lösung verwendet: In habe
TableRow
ich für jede ZelleLinearLayout
mit vertikaler Linie und tatsächlicher Zelle erstellt und nach jederTableRow
eine horizontale Linie hinzugefügt.Schauen Sie sich den folgenden Code an:
Hoffe es wird helfen.
quelle
Hier ist eine gute Möglichkeit, dieses Problem zu lösen:
Erstellen Sie ein Rechteck, das mit abgerundeten Ecken wie folgt gezeichnet werden kann:
Speichern Sie es im Zeichenordner mit dem Namen round_border.xml
Erstellen Sie dann ein relatives Layout, das den abgerundeten Rand als Hintergrund wie folgt verwendet:
Speichern Sie das in Ihrem Layoutordner und nennen Sie es table_with_border.xml
Wenn Sie eine solche Tabelle benötigen, ziehen Sie sie mit der Include-Syntax wie folgt in eine Ansicht:
Möglicherweise möchten Sie einen gewissen Abstand um die Kanten hinzufügen. Wickeln Sie das Include also einfach in ein LinearLayout ein und fügen Sie etwas Polsterung um die Kanten hinzu.
Einfacher und einfacher Weg, um einen hübschen Rand um einen Tisch zu bekommen.
quelle
Der Strich verdoppelt sich in den mittleren Abschnitten. Ich habe diese Ebenenliste zum Zeichnen verwendet:
quelle
Ich denke, es ist am besten, ein 1px-Bild mit neun Patches zu erstellen und das showDividers-Attribut in TableRow und TableLayout zu verwenden, da beide LinearLayouts sind
quelle
Eine Grenze zwischen Zellen wird in den obigen Antworten verdoppelt. Sie können diese Lösung also ausprobieren:
quelle
Eine andere Lösung besteht darin, lineare Layouts zu verwenden und Teiler zwischen Zeilen und Zellen wie folgt festzulegen:
Es ist eine schmutzige Lösung, aber es ist einfach und funktioniert auch mit transparentem Hintergrund und Rahmen.
quelle
Ich weiß, dass dies eine alte Frage ist ... jedenfalls ... wenn Sie Ihre XML-Datei schön und einfach halten möchten, können Sie TableLayout erweitern und dispatchDraw überschreiben, um benutzerdefinierte Zeichnungen zu erstellen.
Hier ist eine schnelle und schmutzige Implementierung, die ein Rechteck um die Tabellenansicht sowie horizontale und vertikale Balken zeichnet:
XML-Beispiel mit dem Text zum Umschließen der dritten Spalte:
quelle
Wenn Sie eine Tabelle mit dem Rand benötigen, empfehle ich ein lineares Layout mit Gewicht anstelle von TableLayout.
quelle