Android Tutorial Visual Designer und Event Handling

klaus

Expert
Licensed User
Longtime User
Zur Installation und Konfiguration von Basic4Android gibt es diese beiden Tutorials:
Basic4android und Android SDK installieren
Android Emulator installieren und Hello World Programm


In diesem Tutorial werden wir den Designer verwenden und ein Layout erstellen. Das Layout enthält ein EditText (TextBox), ein Label und einen Button.
Der Benutzer soll eine Zufallszahl raten. Der Benutzer gibt die Zahl in das EditText (Control) Feld ein und drückt auf einen Knopf um seine Wahl dem Programm zu übermitteln.
Eine "Toast" Meldung (MessageBox) zeigt dem Benutzer ob seine Zahl grösser oder kleiner als die Zufallszahl ist.

- Neues Projekt erstellen und speichern.
- Den Designer im Menü 'Designer' öffnen.

Der Designer besteht aus zwei Teilen. Dem 'Control Panel' das alle verfügbare Properties (Eigenschaften) und Optionen enthält, und Teil des IDE's (Integated Development Environment) ist:

gmn_designer.png


und einem 'Monitor' der auf dem Gerät oder im Emulator läuft:

gmn_emulator_designer.png



Der Monitor zeigt das Layout an. Er erlaubt auch Views (Controls) zu verschieben, vergrössern oder zu verkleinern.
Eine Änderung des Layouts im Monitor verändert auch die Werte im Control Panel.

Alle Daten sind im Control Panel gespeichert. So dass nichts 'peinliches' passieren kann falls der Monitor abstürzen oder geschlossen würde.
Man kann ihn wieder starten und das Layout wird wieder angezeigt.

Zuerst muss das Gerät oder der Monitor angeschlossen werden mit 'Tools – Connect'.
Das kann einige Sekunden dauern. Das IDE bleibt solange verbunden bis es geschlossen wird. Ein schliessen des Designers unterbricht nicht die Verbindung.


Erstellung des Layouts:
- Mit dem Menü 'Add View' einen Button, ein EditText und ein Label anfügen.
- Die Text Parameter der Views ändern und die Views wie folgend aufstellen:

gmn_layout1.png


- Die Activity Drawable Eigenschaft (property) zu GradientDrawable ändern um den gradient Effekt zu bekommen.

Tipp: Wenn man mit einem kleinen Bildschirm arbeitet kann man die Option 'Top Most' ankreuzen (in der oberen rechten Ecke). Das verursacht dass der Designer immer sichtbar bleibt und nicht vom Emulator überdeckt wird.

- Das Layout mit dem Namen 'Layout1' speichern.

Ein wichtiger Begriff über Layouts ist dass sie völlig unabhängig vom Code sind.
Das Layout wird in einer Datei mit der '.bal' Extension gespeichert. Jedes Projekt kann eine beliebige Anzahl von Layouts enthalten, diese haben aber keinen Einfluss auf das Programm solange ein Layout nicht ausdrücklich in das Programm geladen wurde.

Sobald ein Layout gespeichert ist wird es automatisch in den "File manager" (Dateimanager) eingefügt. Man kann es im IDE unten rechts unter "Files" sehen.

Wir wollen das Click Event vom Button abfangen.
Jedes View hat einen 'EventName' Wert. Es ist eine Eigenschaft (property) im Designer, und ein Parameter der der 'Initialize' Methode zugefügt werden muss wenn ein View im Code zugefügt wird.
Um ein Event abfangen zu können muss man eine Sub Routine mit folgender Struktur schreiben (es ist einfacher als es sich anhört):
Sub <EventName>_<Event> (Event Parameter).

Im Designer wird die EventName Eigenschaft standardmässig dem Viewnamen gleich gesetzt, kann aber nachher geändert werden.
Um das Click Event von einem Button mit dem EventName 'Button1' abzufangen, müssen wir folgende Subroutine schreiben:
Sub Button1_Click

Hier der komplette Code:

B4X:
Sub Process_Globals
    
End Sub

Sub Globals
    Dim MyNumber As Int
    Dim EditText1 As EditText 'will hold a reference to the view added by the designer    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1") 'Load the layout file.
    MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
End Sub

Sub Button1_Click
    If EditText1.Text > MyNumber Then
        ToastMessageShow("My number is smaller.", False)
    Else If EditText1.Text < MyNumber Then
        ToastMessageShow("My number is larger.", False)
    Else
        ToastMessageShow("Well done.", True)
    End If
    EditText1.SelectAll
End Sub
Einige Bemerkungen:
- Zu jedem Activity Modul gehört ein Activity Objekt welches erlaubt das Activity zu behandeln.
- Activity.LoadLayout lädt die Layoutdatei.
- Es gibt andere Views die Layouts laden können, wie Panel und TabHost. Für TabHost, kann jede Tabseite (tab page) durch laden einer Layoutdatei erstellt werden.
- Damit ein View, das im Designer zugefügt wurde, erreicht oder erkannt werden kann muss es in der Sub Global Routine angegeben werden.
- ToastMessageShow zeigt eine kurze Meldung an die nach kurzer Zeit wieder verschwindet.
In diesem Fall eine Toast Meldung zu nutzen ist nicht das Beste weil sie vielleicht nicht gesehen wird falls die soft Tastatur geöffnet ist.

Tipp für das Schreiben von Events Subs:
Im IDE, Sub schreiben und die Leertatse drücken. Man sieht dann einen kleinen Tooltipp mit "press tab to insert event declaration" ("Tab drücken um den Eventnamen einzugeben).
Tab drücken, Objektart wählen und dann das Event wählen.
sub_event_code_snippet.png

Jetzt braucht man nur noch den benötigten Eventnamen eingeben und Enter drücken.

Unterstützung von mehreren Bildschirmauflösungen und Orientierungen

Jede Layoutdatei kann verschiedene Layoutvarianten enthalten. Jede Layoutvariante

enthält einen unterschiedlichen Satz von View Stellungen und View Grössen.
Zum Beispiel wenn man den Text einer View ändert wird er automatisch in allen Layouts geändert. Jedoch wenn man die Stellung ändert, wird sie nur in dem aktuellen Layout geändert.
Die Skalierung kann, nach Verlangen, automatisch behandelt werden. Das heisst, dass sich das Layout automatisch skaliert, wenn ein Programm auf einem Gerät mit hoher Auflösung gestartet wird.

Aber man kann auch verschiedene Varianten mit verschiedenen Skalen erstellen.

Wenn eine Layoutdatei geladen wird, wird das Layout galaden das am Besten dem Gerätebildschirm angepasst ist.

Normalerweise braucht man zwei Varianten:
- 320 x 480, Scala = 1 (160 dpi). Das ist die Standardscala im Hochformat.
- 480 x 320, Scala = 1 (160 dpi). Standardscala im Querformat.

Also den Designer neu öffnen, die Layout1 Datei öffnen falls sie nicht schon offen ist.
'New Variant' wählen und 480 x 320 (zweite Option) wählen.

designer3.png

Auf Ctrl + F11 drücken um die Emulator Orientierung zu ändern.

Die Gerätelayoutdetails erscheinen unter der Variantenliste.

Das Layout wie unten ändern:

gmn_landscape.png


Man kann die aktuelle Variante ändern und sehen welchen Effekt sie auf des Layout hat.


Das Layout speichern und das Programm starten.
Die Emulatororientierung wechseln, und sehen wie sich das Layout ändert.

Android zerstört die alte Activity und erstellt jedes mal eine Neue wenn die Orientierung gewechselt wird. Das heisst dass die Routine Activity.LoadLayout jedes mal neu aufgerufen wird. Leider wird die Zufallszahl auch jedes mal neu generiert. Das kann man leicht vermeiden... Aber nicht in diesem Tutorial.

Letzter Tipp für dieses Tutorial:
- Im DIE, im Menü 'Files', kann man mit 'Export as zip' eine Zip Datei erstellen die Alle nötigen Dateien für das Projekt enthält.


Das Projekt mit allen Dateien findet man im Englischen Originaltutorial.
 
D

Deleted member 103

Guest
Dank Klaus.
:sign0098:

Komisch, ich verstehe jetzt das Tutorial besser.;)
 

manhof

Member
Licensed User
Longtime User
Hallo,

nur zum Verständnis:
MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
Sollte doch eine Nummer zwischen 1 und 100 ergeben, oder?

Manfred
 

DonManfred

Expert
Licensed User
Longtime User
Hallo,

nur zum Verständnis:
MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
Sollte doch eine Nummer zwischen 1 und 100 ergeben, oder?

Wenn man DIESES Ergebnis möchte, dann muss man den Befehl SO verwenden. Siehe Hinweis von Klaus zur Beschreibung der funktion.

B4X:
MyNumber = Rnd(1, 101) 'Choose a random number between 1 to 100

Wenn man als 2. Wert 100 benutzt (dieser Wert ist exclusive 100. Also bis 99 inkl.) dann wird der höchste Wert die 99 sein.
 
Last edited:

manhof

Member
Licensed User
Longtime User
Danke.
Es ist für mich ungewöhnlich, einmal inklusive und einmal exklusive.
@klaus: Ich habe Rnd nicht in der Hilfe gefunden. Wo kann ich dies selbst finden?
Manfred
 

manhof

Member
Licensed User
Longtime User
Danke DonManfredo für den objectbrowser. Den kannte ich nicht. Klasse.
Manfred
 
Top