Android, scrollbare Tabelle mit festem Tabellenkopf

Wenn man für Android Geräte entwickelt speziell jedoch für Mobilegeräte stößt man sehr schnell an die Displaygrenzen. Hier möchte ich nun  zeigen wie man eine Tabelle mit einem festen Tabellenkopf und scrollbarem Inhalt erstellt.

Als erstes das Layout als kurze Skizze aus welchem schon ersichtlich sein sollte wie später die Layoutdatei (*.xml) aussehen sollte.

Layoutskizze der späteren Struktur
Layoutskizze der späteren Struktur

 

Das Layout

Aus der obrigen Skizze sehen Sie die Widget’s welche benötigt werden.
Hier nun das Layout der späteren Activity.
Dieses wird in dem Verzeichniss „layout“ unter dem Namen „scrollabletablelayout.xml“ gespeichert.

Die Activity

Zuerst erstellen wir uns eine „normale“ Java Klasse welche die Klasse Activity erweitert.

Nun noch die Methode um das zuvor erstellte Layout in dieser Activity zu laden.

Wenn man nun die App startet sieht das Layout zunächst unscheinbar aus.

Die Spalten unserer Tabelle.
Die Spalten unserer Tabelle.

Als nächstes müssen die Spaltenbreiten und Spaltenhöhen vergeben werden dazu legen wir folgende Membervariablen an.

In diesem Beispiel haben alle Spalten dieselbe Breite und man könnte problemlos ohne ein Array arbeiten, jedoch soll es später möglich sein jede Spalte eine andere Breite zu vergeben und damit ist das Array in seiner existens bestätigt.

Wenn wir nun die App starten können wir schon einmal den Tabellenkopf nach links scrollen wobei die erste Spalte fest stehen bleibt.

Android App mit einer Tabelle.
Android App mit einer Tabelle.

Es fehlt jetzt noch die Logik um die Tabelle bzw. Tabellen zu befüllen.

In diesem Beispiel wird durch eine einfache For-Schleife ein Zahlenwert in jede Spalte geschrieben. Über den index kann man ggf. den Hintergrund später modifizieren so das jede 2. Zeile anders dargestellt wird.

Wenn nun die App gestartet wird, wird die befüllte Tabelle angezeigt.
Jedoch ist zwar nun der Inhalt der Tabelle scrollbar und der Tabellenkopf jedoch scrollt dieser (noch) nicht zusammen in die gewünschte Richtung.

Android App mit eine Tabelle wo der Inhalt scrollbar ist.
Android App mit eine Tabelle wo der Inhalt scrollbar ist.

Um nun das simultane Scrollen der beiden android.widget.HorizontalScrollView zu implementieren wird die Methode onCreate wie folgt erweitert.

Schauen wir uns nun das Ergebnis an sieht es schon viel besser aus, wenn nun die Tabelle nach links oder rechts gescrollt wird läuft der Tabellenkopf mit.

Android App, Tabellenkopf und Tabelleninhalt ist nun simultan scrollbar.
Android App, Tabellenkopf und Tabelleninhalt ist nun simultan scrollbar.

Was mich persönlich gestört hat ist der Umstand das beim scrollen nun 2 Scrollleisten zusehen sind, einmal die vom Tabellenkopf und die vom Tabelleninhalt. Die für mich überflüssige Scrollleiste im Tabellenkopf entferne ich mit folgendem Code:

Wenn nun gescrollt wird, wird die Scrollleiste im Tabellenkopf nicht angezeigt.

Android, Tabelle mit Inhalt
Android, Tabelle mit Inhalt

Der fertige Quellcode zum Download und einsetzen in einer Android App

Die Zip Datei enthält folgende Dateien:

  • ScrollableTable.java
  • scrollabletablelayout.xml
  • strings.xml

2 Gedanken zu „Android, scrollbare Tabelle mit festem Tabellenkopf

  • April 24, 2018 um 22:35
    Permalink

    Hallo,
    Ich finde die Anleitung sehr gut.
    Gib es da auch eine, damit man die Tabelle mit Daten aus einer
    Mysql DB füllen kann.

    Danke

    Antwort
    • April 25, 2018 um 06:35
      Permalink

      Hallo Helmut,

      wenn du bereits ein ResultSet hat dann kannst du mit einer „einfachen“ Schleife dieses durchlaufen und dann die einzelnen Tabellen mit TextView Objekten befüllen.

      Gruß,

      Stefan

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.