Programmieren der Benutzeroberfläche

Notwendige Eigenschaften der App

Wie ich es schon angemerkt habe, seid ihr bei der Gestaltung eurer App sehr frei. Es gibt lediglich ein paar Vorgaben, die ihr einhalten solltet, um die App gut benutzbar zu machen.

• Drei Taster. Einen für die Automatikbetrieb-Vorwahl, einen für die Handbetrieb-Vorwahl und einen für das Starten des Automatikbetriebs. Es sollte klar sein, welcher Taster was tut, d.h., ihr solltet mit Beschriftungen oder aussagekräftigen Bildern arbeiten.
• Freie Bezeichnungen, in die später die Werte der Variablen geschrieben werden, die ihr überwachen möchtet. Es sollte wie bei den Tastern klar sein, worauf sich die Felder beziehen. Fügt also am besten noch weitere Bezeichnungen ein, damit sich etwas ergibt, wie z.B.: "Systemdruck: 2 bar".
  

Tipps zum Erstellen der Benutzeroberfläche

Es ist einfach, mit dem MIT App Inventor Oberflächen zu erstellen, dennoch sind die folgenden Tipps eine große Hilfe, wenn sie auch schön werden soll.

Anordnungen

Anordnungen sind ein sehr hilfreiches Mittel, eure App übersichtlicher zu gestalten. Wenn ihr ein Element zu einer Anordnung hinzufügen wollt, müsst ihr es einfach an die richtige Stelle darin ziehen. Es gibt fünf verschiedene Anordnungen zur Auswahl:

• HorizontaleAusrichtung
  Reiht die eingefügten Elemente nebeneinander auf. Außerdem: Vielleicht wollt ihr im Laufe der Erstellung eurer App ein Element rechtsbündig, oder eines am linken und ein anderes am rechten Rand anordnen. Fügt dafür vor das Element, das rechtsbündig ausgerichtet werden soll einfach eine leere Bezeichnung der Breite FuelleAlles ein. Sie sorgt dafür, dass das andere Element an den rechten Rand "gedrückt" wird.
  
• HorizontalScrollArrangement
  Reiht die eingefügten Elemente ebenfalls nebeneinander auf, ermöglicht es aber, durch sie hindurch zu scrollen. Wenn ihr also eine große Anzahl an Elementen ordnen wollt, eignet sich diese Anordnung gut, da ihr so eine übersichtliche Leiste bekommt.
  
• Tabelle
  Wie der Name schon sagt - eine Tabelle. Ihr könnt die Anzahl der Zeilen und Spalten einstellen und die Elemente an die Stelle ziehen, an der ihr sie haben wollt.
  
• VertikaleAusrichtung
  Das gleiche wie die HorizontaleAusrichung, nur dass diese ihre Elemente vertikal anordnet. Auch hier könnt ihr den Trick mit der leeren Bezeichnung anwenden, nur dass diesmal die Höhe FuelleAlles sein muss. Das Ergebnis ist dabei, dass ein Element am unteren Rand des Bildschirms platziert wird.
  
• VertikalScrollArrangement
  Auch hiermit lassen sich größere Mengen an Elementen einfach ordnen. Hier entsteht, anders als bei der horizontalen Version, eine vertikale Liste.

Maße der Bedienelemente anpassen

Zum Einstellen der Maße eurer Bedienelemente habt ihr die Wahl zwischen vier verschiedenen Möglichkeiten:

• Automatisch: Die Maße der Komponente werden automatisch an ihren Inhalt angepasst. So wird beispielsweise eine Bezeichnung mit der Menge an Text, die sie beinhaltet, breiter.
  
• FuelleAlles: Passt die Höhe/Breite des Bedienelements an die der übergeordneten Anordnung an. Wenn ihr z.B. eine Bezeichnung in einer horizontalen Ausrichtung habt, die die Hälfte der Breite des Displays einnimmt und ihr die Breite der Bezeichnung auf FuelleAlles stellt, wird die Bezeichnung auch halb so breit wie das Display. Wenn es keine übergeordnete Ausrichtung gibt, nimmt FuelleAlles das gesamte Display in Höhe oder Breite ein.
• Pixel: Damit lässt sich die Größe pixelgenau anpassen. Dies ist jedoch nur dann zu empfehlen, wenn eure App nur auf einem einzigen Smartphone verwendet wird. Das Problem bei mehreren Geräten ist, dass die Elemente auf Displays verschiedener Geräte mit verschiedenen Auflösungen unterschiedlich groß erscheinen.
• Prozent: Damit werden die Komponenten auf eine bestimmte Prozentzahl der Maße des Displays angepasst. Dies hat allerdings auch den Nachteil, dass die Komponenten auf Bildschirmen mit unterschiedlichen Seitenverhältnissen (16:9, 18:9, ...) zueinander verzerrt erscheinen. Ein Quadrat auf einem 18:9-Display sieht so auf einem 16:9-Display breiter aus als hoch.
  

Platzhalter

Hier im Beispiel seht ihr im linken Bild eine HorizontaleAusrichung der Breite FuelleAlles, in der ein Taster von 100 x 100 Pixeln und eine Bezeichnung nebeneinander platziert sind. Ihr merkt vielleicht, dass zwischen den einzelnen Komponenten kein Platz gelassen wurde, z.B. liegt der Taster ganz links am Rand des Bildschirms. Das sieht, gerade wenn die App fertig auf dem Smartphone ist, nicht besonders schön aus.

Es gibt leider im App Inventor keine Bausteine für Platzhalter. Stattdessen könnt ihr, wie im rechten Bild, Bezeichnungen verwenden, in die ihr einfach keinen Text einfügt. Die Größe des Platzhalters richtet sich nach der Schriftgröße, die ihr einstellt, obwohl gar kein Text in der Bezeichnung steht. Das funktioniert auch vertikal und zwischen allen anderen Komponenten genauso.

Komponenten zentrieren

Jetzt ist im Beispiel von oben zwar genügen Platz zwischen den Bedienelementen, aber die Beschriftung klebt etwas unschön am oberen rand der horizontalen Ausrichtung, weil sie weniger hoch ist als der Taster. Wie die Beschriftung auf einer Höhe mit dem Taster platziert wird, ist im Bild unten zu sehen. Wählt bei den Eigenschaften bei AusrichtungVertikal "Mitte: 2" aus, und schon sind Taster und Beschriftung auf einer Höhe.

Das ganze funktioniert auch, wenn ihr etwas horizontal zentrieren wollt, nur diesmal mit der Option "AusrichtungHorizontal":

Trotz vieler Elemente den Überblick behalten

Wenn ihr ein großes Projekt mit vielen Funktionen verwirklichen wollt, sammeln sich schnell viele Bedienelemente an. Da ist der Überblick schnell verloren. Deshalb ist es sehr ratsam, dass ihr die Elemente entsprechend benennt, dass ihr sie auch in der Liste der verwendeten Komponenten schnell identifizieren könnt.

Außerdem könnt ihr für mehr Übersichtlichkeit mit Ausrichtungen Elemente gruppieren. So bietet es sich z.B. an, funktional ähnliche, untereinanderliegende Elemente trotzdem in eine VertikaleAusrichtung einzufügen. So erscheinen sie in der Komponentenübersicht in einem Ordner der vertikalen Ausrichtung, der einfach eingeklappt werden kann, wenn er nicht gebraucht wird.