Scrollbare Tabellen für mobile Anwendungen, die datengetrieben sind

Nutzer mobiler Geräte erwarten stets maximale Informationen in der einfachsten Form, aber kleine Bildschirmgrößen können Kompromisse erforderlich machen. Entwickler von mobilen Anwendungen stehen vor der Herausforderung, Daten, Navigationsfunktionen und Hilfsinformationen in einem ansprechenden Layout unterzubringen, andernfalls riskieren sie, Endnutzer zu frustrieren, die potenzielle Kunden, Kollegen oder Führungskräfte sein könnten. MobileTogether 2.1 führt scrollbare Tabellen und andere innovative Funktionen ein, um Entwicklern dabei zu helfen, Anwendungen zu erstellen, die Daten elegant darstellen und auf allen Geräten gleich funktionieren.

Scrollbare Tabellen

MobileTogether 2.1 ermöglicht es Entwicklern, Tabellen zu definieren, die sich horizontal oder vertikal scrollen lassen, wobei ein Header und ein Footer an festen Positionen verbleiben. Durch horizontales Scrollen können Entwickler mehr Spalten einer breiten Tabelle anzeigen, ohne den Text auf eine unleserliche Größe zu reduzieren. Vertikales Scrollen ermöglicht es, wichtige Informationen dauerhaft auf dem Bildschirm anzuzeigen, was die Übersichtlichkeit verbessert.

Vertikales Scrollen ist besonders nützlich für Tabellen mit sich wiederholenden Zeilen, da der Entwickler bei der Gestaltung nicht wissen kann, wie viele Datenzeilen letztendlich auf dem Bildschirm eines Benutzers angezeigt werden können. Im Folgenden wird eine einfache Tabelle mit vier Spalten und sich wiederholenden Zeilen gezeigt, die im MobileTogether Designer erstellt wurde:

Im Dialogfenster "Neue Tabelle" haben wir die Anzahl der Spalten, die dynamische Anzahl der Zeilen sowie die Zeilen für Kopf- und Fußbereich festgelegt. Anschließend fügten wir Beschriftungen für die Kopfzeilenspalte hinzu, Steuerelemente für den Fußbereich und definierten Eigenschaften für Schriftgrößen und -farben.

Wir können vertikales Scrollen aktivieren, indem wir in dem Hilfefenster "Stile und Eigenschaften" die maximale Tabellenhöhe festlegen. Anschließend können wir auswählen, ob die gesamte Tabelle oder nur die inneren Zeilen zwischen Kopfzeile und Fußzeile scrollen sollen. Die maximale Höhe kann ein Prozentsatz, eine bestimmte Anzahl von Pixeln sein, oder wir können wählen, dass der restliche Bildschirm automatisch ausgefüllt wird.

Für Entwickler, die den sichtbaren Bereich des Bildschirms für die Darstellung von Daten maximieren möchten, enthält MobileTogether 2.1 eine neue Eigenschaft "Seite", mit der die Titelleiste der Seite ausgeblendet werden kann:

Die hellblaue Fußzeile unserer Tabelle enthält Navigationsfunktionen, mit denen der Benutzer einen anderen Monat oder ein anderes Jahr auswählen kann. Die Jahresspalte in der Mitte der Fußzeile wurde mithilfe des "Verbinden"-Buttons in der MobileTogether-Symbolleiste erstellt, um die Spalten 2 und 3 zu einer breiteren Steuerung zusammenzufügen. Sie können Spalten horizontal oder vertikal verbinden oder sie später wieder trennen, falls Sie Ihre Meinung ändern. Sie können sogar eine komplett neue Tabelle innerhalb einer bestehenden Zelle einbetten, um eine hierarchische Tabelle zu erstellen und so das perfekte Layout für komplexe Daten zu gestalten.

Vertikale Linien

MobileTogether 2.1 führt außerdem eine neue vertikale Liniensteuerung ein. Wenn Sie eine vertikale Linie zwischen den Spalten einer Tabelle hinzufügen möchten, können Sie einfach eine aus dem Hilfefenster für Steuerelemente auswählen und per Drag-and-Drop an die gewünschte Position ziehen, wie im folgenden Designer-Fenster dargestellt. Die vertikale Linie wird in einer neuen Tabellenspalte platziert, und Sie können die Eigenschaft "Breite" dieser Spalte auf "wrap_content" setzen, um den minimalen Platz zu belegen.

Die Eigenschaften vertikaler Linien können genauso angepasst werden wie die von horizontalen Linien. Das Fenster "Stile & Eigenschaften" für jede vertikale Linie ermöglicht es Ihnen, die Linienstärke, den Stil, die Farbe sowie die linken und rechten Ränder in Pixeln festzulegen.

MobileTogether ermöglicht es Ihnen, die Sichtbarkeit jedes Elements basierend auf der Ausrichtung festzulegen. Die oben gezeigte Tabelle mit sechs Spalten ist eine alternative Version, die nur im Querformat angezeigt wird, wie durch das Querformat-Symbol auf der linken Seite angegeben. Unsere ursprüngliche Tabelle mit vier Spalten kann so eingestellt werden, dass sie nur im Hochformat angezeigt wird.

Der Screenshot unten zeigt die fertige, installierte App für scrollbare Tabellen, die auf einem Android-Smartphone im Querformat ausgeführt wird. Der Benutzer kann durch die Zeilen der Daten innerhalb der Tabelle mit vertikalen Wischbewegungen scrollen, während die anderen Elemente an ihrer Position bleiben. Die "-" und "+" Steuerelemente im Fußbereich dienen als Navigationswerkzeuge, um den vorherigen oder nächsten Monat auszuwählen.

Ein Gerät mit einer anderen Bildschirmgröße kann mehr oder weniger Zeilen mit Daten anzeigen, aber die Tabelle füllt weiterhin die maximale Höhe, die wir in Prozent definiert haben

Der MobileTogether Designer ist kostenlos nutzbar, daher.. Eine Kopie herunterladen Starten Sie noch heute und nutzen Sie scrollbare Tabellen für Ihre eigene, plattformübergreifende mobile App, die auf Daten basiert!