Vom Prototyp zum passenden User Interface

FireMonkey (FMX) bildet die Basis für plattformübergreifende User Interfaces (UI). FMX zeichnet alle Steuerelemente selbst. Die gängigsten UI-Controls (Buttons, Listen, Eingabefelder et cetera) stehen als plattformneutrale Komponenten zur Verfügung. Sie folgen dem Style-Prinzip: Eine Style-Vorlage bestimmt ihr Aussehen, damit sie dem jeweiligen Betriebssystem nachempfunden sind. So bringt FMX für Android und iOS eigene Style-Sets mit, beispielsweise sieht ein TSwitch-Schalter (Delphi) unter iOS automatisch wie ein nativer iOS-Toggle aus. Über Behaviors passt FMX Verhaltensweisen plattformgerecht an, so werden etwa Tabs auf iPhones am unteren Bildschirmrand angezeigt, auf Android dagegen am oberen. Diese Abstraktion ermöglicht es, eine Codebasis für alle Plattformen zu nutzen, ohne auf ein natives Look and Feel verzichten zu müssen. Gleichzeitig kann man das Erscheinungsbild bei Bedarf anpassen.

Ein wesentliches Konzept bei FMX ist das Layout. Layout-Komponenten wie TLayout, TPanel, TScrollBox und viele weitere dienen als Container, um andere Controls anzuordnen. Über Eigenschaften wie Align, Margins und Padding lassen sich responsive Oberflächen gestalten, die auf unterschiedlichen Bildschirmgrößen skalieren und sich automatisch anpassen, wenn sich Displaygrößen oder Ausrichtungen ändern.

Mobile-Design-Prinzipien: Touch und Responsive

Bei der Gestaltung mobiler Apps stehen Touch-Optimierung und responsives Design im Vordergrund. FMX unterstützt hierbei mit mehreren Mechanismen:

• Touch-Optimierung: Mobile UIs erfordern größere Schaltflächen und ausreichend Abstände, damit man sie bequem mit dem Finger bedienen kann. FMX bietet dafür die Eigenschaft TouchTargetExpansion, mit der sich die Fläche eines Controls virtuell vergrößern lässt. So kann man zum Beispiel um einen Button einen unsichtbaren Puffer von ein paar Pixeln definieren, damit Fehleingaben reduziert werden. Zudem unterstützen alle FMX-Controls Gesten und Multitouch-Ereignisse.
• Responsive Layouts: Man entwirft das UI auf einer Master-Form. Delphi erlaubt es anschließend, für spezifische Auflösungen View-Varianten anzulegen. Alle Komponenten und die Logik der Master-Form werden vererbt und können in einer abgeleiteten Ansicht individuell neu angeordnet oder skaliert werden. Der Großteil des UI-Designs bleibt plattformübergreifend einheitlich, und nur wo nötig nimmt man Anpassungen für bestimmte Device-Typen vor. Die IDE bietet hierzu eine Multi-Device-Vorschau (Bild 1), mit der man das Layout auf virtuellen Geräte-Frames betrachten kann. Darüber hinaus stehen Eigenschaften wie Anchors zur Verfügung, um Controls bei Größenänderungen relativ zu positionieren, sowie das Konzept der ScaledLayout-Komponente, die ihren Inhalt proportional skaliert.
• Plattformanpassung: Trotz einheitlicher Codebasis soll sich eine App auf der jeweiligen Plattform natürlich anfühlen. FMX berücksichtigt automatisch Unterschiede zwischen iOS Human Interface Guidelines und Android Material Design. Schriftarten, Scrollverhalten oder die Darstellung von Dialogen werden je nach Plattform variiert. Für weitere Anpassungen kann man im Code über Compiler-Direktiven plattformabhängig unterschiedliche Implementierungen vornehmen.

Visueller Designer und Styles mit FireMonkey

Der grafische Designer (Bild 2) ist für mobile Apps das zentrale Werkzeug. Entwickler können die visuellen Komponenten per Drag and Drop auf die Form ziehen und dort anordnen.

Während man Eigenschaften im Objektinspektor einstellt, sieht man direkt im Designer die Auswirkungen. Da eine FMX-Form alle Plattformen zugleich bedient, kann man schon beim Design darauf achten, dass zum Beispiel Buttons nicht zu breit für das kleinste Device sind oder Labels nicht abgeschnitten werden. Delphi bietet Projektvorlagen, die bereits gängige Layout-Gerüste mitbringen, etwa eine App mit Kopf- und Fußleiste.

FMX bietet für jede Plattform Default-Styles, welche für ein natives Erscheinungsbild sorgen. Darüber hinaus kann man eigene Styles erstellen oder bestehende anpassen. Ein StyleBook ist eine Ressourcen-Sammlung. Darin kann man Farben, Schriften, Eckradien, Icons et cetera verändern, ohne das grundsätzliche Verhalten des Controls anzutasten. So lässt sich zum Beispiel ein Corporate Design umsetzen.

Animationen, Effekte und moderne UX-Patterns

Moderne Apps setzen häufig Animationen und visuelle Effekte ein, um die Benutzerführung intuitiver zu gestalten. Man kann Animationen entweder im Designer konfigurieren, das heißt, jede visuelle Komponente hat unter Effects zum Beispiel ein TFloatAnimation oder TColorAnimation. Beispiele: Schaltflächen, die beim Tippen sanft aufleuchten, Panels, die weich einblenden, oder Listenobjekte, die sich beim Entfernen nach links aus der View schieben. FMX bringt vordefinierte Effekte mit, die sich einem UI-Element zuweisen lassen. Auch 3D-Transformationen und Rotationen sind möglich.

Navigationskonzepte und Gestensteuerung

In FMX gibt es verschiedene Herangehensweisen, um zwischen Ansichten oder Funktionseinheiten zu wechseln. Der einfachste Ansatz ist es, alles in einer Form mit unterschiedlichen Tabs abzubilden. FMX stellt mit TTabControl einen Container zur Verfügung, der mehrere Seiten (Tabs) beinhaltet. Diese Tabs können im Designer befüllt und per Code oder Swipe-Geste gewechselt werden. Auch das Drawer-Menü (Bild 3) lässt sich mittels TMultiView umsetzen.

Diese Komponente kann je nach Gerätegröße als Hamburger-Menü, Ausklappleiste oder permanent sichtbarer Bereich dienen.

Ergänzend zur Navigation spielt die Gestensteuerung eine Rolle. Über die Komponente TGestureManager lassen sich Gesten für Formen oder einzelne Controls verwalten. Man wählt im Objektinspektor aus, welche Gesten ein Element erkennen soll, zum Beispiel Left-/Right-Swipe, Zwei-Finger-Zoom et cetera, und implementiert dann den OnGesture-Eventhandler, um auf die Geste zu reagieren. Ein Anwendungsfall: In einer Bildergalerie könnte ein Swipe nach links zum nächsten Bild führen.

Praxisbeispiel: Vom Prototyp zum produktiven UI

Sehen wir uns an, wie wir das UI unserer Beispielapplikation (Foto-App mit Standorterfassung) gestalten. Im ersten Teil haben wir das Projekt angelegt. Jetzt soll das UI gestaltet werden. Hilfreich ist ein erster Prototyp. Eine Handskizze oder noch besser ein Entwurf mit einem geeigneten Prototyping-Tool stellt eine nützliche Grundlage für die technische Umsetzung dar (Bild 4).

Ziel ist eine Hauptansicht, in der man Fotos aufnehmen kann und eine Liste der aufgenommenen Bilder mit Zusatzinformationen (Zeit und GPS-Position) sieht. Die Schritte:

• Grundgerüst erstellen: Als Ausgangspunkt verwenden wir die Delphi-Projektvorlage Geräteübergreifende Anwendung mit Kopf- und Fußzeile. Diese legt ein Formular mit einer oberen und unteren Toolbar an. In der oberen Toolbar platzieren wir einen SpeedButton, den wir durch die Zuweisung eines Styles zu einem Auslöser für die Kamera gestalten.
• Liste für Fotos gestalten: Für die Auflistung der Fotos mit Informationen nutzen wir eine TListView-Komponente, da diese viele Einträge handhaben kann. Wir platzieren eine TListView im Zentrum (mit Align = Client). Im Objektinspektor konfigurieren wir die ItemAppearance der ListView so, dass jedes Listenelement ein Bild und Text enthalten kann. Delphi bietet vordefinierte Layouts (zum Beispiel ImageListItem mit Bild links, Text rechts), die wir anpassen können. Für mehr Kontrolle könnten wir auch ein eigenes Layout für ein Listenelement definieren. Über DataBinding oder manuelles Befüllen (Code) der ListView werden diese Objekte dann als Listenelemente dargestellt.
• Feinschliff und Tests: Wir können im Designer Details anpassen, zum Beispiel Symbole auf Buttons, Farbschema der Toolbars et cetera. Erste Tests können wir unter Windows durchführen; dank FMX-Framework lässt sich die App als Win32/64-App starten, um Logik und UI grob zu prüfen. Für die Feinheiten testen wir auf den mobilen Geräten.

Wir starten die App auf den mobilen Devices (Bild 5). Der Entwurf des UI ist damit geschafft.

Fazit und Ausblick

In diesem Teil haben wir die UI-Gestaltung mit Delphi FMX detailliert betrachtet. Wir schätzen die Mischung aus visuellem Design und der Möglichkeit, Anpassungen vorzunehmen, wo nötig. Die Unterstützung durch Tutorials ist gut, und Anforderungen wie responsives Design, Touch-Bedienung, Dark Mode und Animationen lassen sich umsetzen.  

Im nächsten Teil der Serie geht es um den Zugriff auf Sensoren und Hardware-Features. Die einzelnen Funktionen werden schrittweise umgesetzt und die Meilensteine innerhalb dieser Serie besprochen. Den Projektfortschritt kann man auf GitHub verfolgen.