MIT App Inventor – einfaches Android-Menü

Ein Menü kann für Android-Apps mit mehreren Bildschirmen praktisch sein. Der nächste Artikel in MIT App Inventor, einer Serie zur Entwicklung von Android-Apps, kann dabei helfen.

Die mit diesem Artikel verknüpften ZIP-Dateien enthalten auch die Projektdatei (.aia) und die installierbare Anwendung (.apk). Es wurde nicht ausgiebig getestet, ich habe es nur auf meinem eigenen Handy ausprobiert, also installieren Sie es auf eigene Gefahr.

Projektdateien von hier heruntergeladen: MenuExample.zip

Lassen wir uns also zuerst den Abschnitt „Designer“ erstellen. Wir benötigen ein ‚HorizontalArrangement‘-Layout. Platzieren wir hier eine ‚Label‘- und eine ‚ListPicker‘-Komponente. Ich habe ‚Label1‘ bei ‚Text‘-wert, auf ‚Home‘ gesetzt. Dies ist der Titel die Anwendung. „ListPicker“ name wird „Menü“ haben.

In den ‚ListPicker‘-Einstellungen finden wir das Attribut ‚ElementsFromString‘, geben wir die Menüpunkte durch Kommas getrennt ein. Wir finden diese Einstellungen auch in der Projektdatei (.aia) in der Download-Datei (.zip) unten. Dies ist ein guter Ausgangspunkt, wir können die Farben der Komponenten nach unsere eigenen Geschmack ändern.

Das war’s, die anderen Seiten können kommen. Der nächste ‚Über die App‘-Bildschirm. Klicken wir auf die Schaltfläche „Add Screen…“ und geben wir im Popup-Fenster den Namen des Bildschirms ein, in diesem Fall „About“.

Ziehen wir die im Bild unten gezeigten Komponenten auf das Handy. Im ersten Layout ist ‚Label1‘ der Titel des Bildschirms. ‚Button1‘ wird mit ‚ Schließ ‚ beschriftet. Diese Komponenten werden benötigt, damit das Menü funktioniert. Zusätzliche Komponenten füllen den Bildschirm mit Inhalten. ‚Label2‘ ist ein Textfeld, ein paar Worte zur App.

Im obigen Beispiel habe ich eine unsichtbare Komponente platziert, dies ist ‚ActivityStarter‘. Mit dieser Komponente können wir eine andere Anwendung auf unsere Gerät starten, in diesem Fall den Webbrowser mit den angegebenen Parametern starten, wenn wir auf das Bild „Image1“ oder die Schaltfläche „Button2“ klicken.

Fügen wir einen weiteren Bildschirm namens „Settings“ hinzu. Fügen wir ein horizontales Layout mit einem Textfeld mit der Bezeichnung „Einstellungen“ und einer Schaltfläche mit der Bezeichnung „Schließ“ hinzu.

Das fertige Menü auf Ihrem Handy:

Damit ist der Abschnitt ‚Designer‘ abgeschlossen. Sehen wir uns den Abschnitt Blockeditor an. Beginnen wir mit dem Bildschirm ‚Screen1‘. Wenn wir einen Eintrag im ‚ListPicker‘ auswählen, wird der entsprechende Code ausgeführt. Wenn wir beispielsweise auf den Menüpunkt ‚Einstellungen‘ klicken, welcher der Punkt mit Indexierung 1 in der Liste ist (Indexierung der Elemente in der Liste beginnt bei 1 und nicht bei 0!), öffnet sich der Bildschirm ‚Einstellungen‘.

Im Beispiel ist das dritte indizierte Element in der Liste „Beenden“. Wenn wir dieses Menüelement auswählen, wird die Anwendung geschlossen.

Der Code für den Bildschirm „Einstellungen“ bedarf keiner besonderen Erklärung. Durch Drücken von ‚Button1‘ wird der Bildschirm ‚Einstellungen‘ geschlossen

Und schließlich die Bildschirmblöcke ‚About‘. Der erste Block schließt den aktuellen Bildschirm. Der zweite ruft beim Klicken auf die Schaltfläche ‚Button2‘ die Komponente ‚ActivityStarter‘ auf, die den Browser mit den zuvor festgelegten Parametern öffnet. Der dritte Block macht dasselbe, wenn wir auf das Bild ‚Image1‘ klicken.

Dieses kleine Menübeispiel kann eine gute Grundlage für die Entwicklung einer Android-Anwendung sein.