Firemonkey GUI-Design-Anleitung gesucht

[Hobbycoder]

Hi,

meine ersten Gehversuche unter Firemonkey laufen recht gut. Ich hab zwar noch nicht viel gemacht, aber der grundsätzliche Programmablauf funktioniert. (Lokale Datenspeicherung, Datentransfer von und zum Server, Loginform, etc).

Jetzt bin an der ersten Form mehr mehr als 2 Editkomponenten und stelle fest, dass das Design am Entwicklungsrechner und die App dann auf einem Androidhandy, sehr von einander abweicht. Die Maße der Controls werden wohl relativ angepasst und die Fontsize ist auch nicht wirklich passend.

Wie macht man's also richtig?
Gibt es irgendwo eine Art Anleitung, wo beschrieben wird, welches Controls für Mobile Geräte am besten zu verwenden sind, wie man beim Design am Besten vorgeht und worauf man so alles achten muss, damit es auf den unterschiedlichsten Geräten nicht zu Überraschungen kommt oder zumindest schon mal halbwegs passend ist.

[AuronTLG]

Eine Anleitung kann ich nicht bieten, aber hinsichtlich Design für Mobilgeräte ist bei Firemonkey entscheidend, dass man so gut wie alles am Design über Alignments regelt und das Setzen von fixen Werten weitestgehend vermeidet. Nur wenn möglichst alles relativ ist, kann man sich darauf verlassen, dass die App so aussieht, wie sie soll, unabhängig davon ob es ein kleines Smartphone oder ein Riesen-iPad ist.

Um komplexere Anordnungen zu schaffen, bieten sich dafür die diversen Layout-Komponenten an, die dazu gedacht sind, andere Komponenten in bestimmten optischen Anordnungen in sich zusammenzufassen.
Das Standard-TLayout kann man für alles mögliche nehmen, die anderen Layouts bieten spezifischere Funktion wie z.B. TGridLayout oder TGridPanelLayout, die es einfach machen, gridförmige Konstruktionen anzulegen, wie man sie z.B. bei einem Taschenrechner für die Buttons gebrauchen könnte.

Einfaches Beispiel: Wölltest du z.B. ein Beschriftungs-Label mit einer Combobox zur Auswahl dahinter haben und darunter ein TMemo, das sich abhängig von der Auswahl füllt, so könntest du das Label mit Align=alLeft und die ComboxBox mit Align=alVertCenter in ein TLayout packen, welches selbst Align=alTop bekommt. Darunter dann ein weiteres TLayout mit Align=alTop, in welches man das TMemo mit Align=alCLient packt. Über Paddings und Margins kann man dann die Abstände noch feinjustieren.
Dadurch, dass alles aligned ist, sieht die Konstruktion dann unabhängig von der Größe des Gerätes gleich aus.

Für komplizierte Konstruktionen, die man evtl mehrfach verwenden möchte und/oder spezielle Funktionen haben, wie z.B. ein klassisches Mediaplayer-Layout zum Abspielen von Audiodateien, benutze ich sehr gerne Frames.
Für alles was in Richtung Listen geht verwende ich TListview und für Dinge wie Seitenmenüs, PopUps etc verwende ich sehr gerne TMultiView.

Generell einfach mal mal mit den Alignments und Layouts rumspielen. Wenn du damit den Bogen raushast, ist es relativ einfach, auch komplexer Designs zustandezubringen, die überall drauf laufen.