Android, PopUpDialog mit auswählbaren ListItems

In diesem Tutorial möchte ich erklären wie ich ein benutzerdefiniertes PopupDialog für eine Activity erstelle.

TagCludDialog, zum wählen von Tags für eine Android Anwendung

Für mein aktuelles Projekt benötige ich unter anderem diverse Dailoge welche es nicht standardmäßig von Android gibt zbsp:.

  • DateTimePickerDialog (zur auswahl eines Zeitstempels)
  • TagCloudDialog (zum setzen von Tags)

Hier möchte ich beschreiben wie ich mein TagCloudDialog erstellt habe, welches dazu dient einen oder mehrere Tags aus einer Liste (ListView) zu wählen welche nach dem bestätigen des Dialoges auf der Activity dargestellt werden.
Grundsätzlich habe ich mich an dem bestehenden Beispiel zur DialogFragment API von der Android Hilfe gehalten.

Die Klasse TagCloudDialog

Die Klasse TagCloudDialog wird später unser Dialog darstellen.

Es erweitert erstmal die Klasse DialogFragment welche die grundfunktionalitäten eines PopupDialoges mitbringt.

Als erstes überschreiben wir die Methode onCreateDialog(Bundle bundle) folgendermaßen:

In der Zeile 3 und 4 wird das Layout aus der XML Datei geladen (dazu kommen wir später). Es wird sich das View Objekt für später als instanzvariable gespeichert da wir von außen auf dieses zugriff benötigen ( mit der dazugehörigen Getter Methode).

Die Zeilen 9 und 13 beinhalten die Events für die beiden Schaltflächen „OK“ und „Abbrechen“. Für die Verarbeitung der beiden Events benötigen wir folgendes Interface welches wir uns erstellen:

Dieses Interface stellt unsere beiden Methoden bereit welches wir unserem Konstruktor in der Klasse TagCloudDialog übergeben.

Das Layout „tagclouddialog.xml“

Die Datei „tagclouddialog.xml“ beinhaltet unsere UI Komponenten für den Dialog. In meinem Fall wird es eine Liste sein, in welcher man diverse Zeilen anwählen kann.

Somit wird das Layout wie folgt aussehen :

Nun benötigen wir noch den Aufbau unseres anwählbaren ListItems welches ich unter dem Dateinamen „tagclouddialoglistitem.xml“ im Ordner „layout“ speichere.

Befüllen der Liste mit Hilfe des ArrayAdapters

Für das befüllen der ListView benötigen wir eine Klasse welche die Klasse ArrayAdapter erweitert. Diese lege ich mir in mein Package „tagcloud“ ab. Es gibt diverse Tutorials wo dieses als innere Klasse umgesetzt wird jedoch finde ich dieses nicht für sinnvoll da so die Klasse unnötig lang wird.

Die Klasse „TagCloudListAdapter“

Wenn wir die Klasse ArrayAdapter mit extends hinzufügen müssen wir mindestens einen Kontruktor überladen.

Zuweisen der View für die Darstellung der CheckboxItems

Um der ListView unser benutzerdefiniertes Aussehen zu verpassen (tagclouddialog.xml) müssen wir folgende Methode implementieren.

In dieser Methode erstellen wir die View für die ListItems.

Nun müssen wir an der Checkbox ein Eventhandler registrieren damit wir die gewählten Tags später auslesen können.

Es ist darauf zu achten das in der Zeile 1 die Variable „tagItem“ final ist damit diese auf dem View.OnClickListener erreichbar ist. (Sollte dieses nicht sein gibt der Compiler eine aussagekräftige Fehlermeldung, bzw. die IDE wird vorher dieses durch eine Meldung anzeigen.)

Registrieren des Adapters an der ListView

Nachdem wir die Logik für die ListView implementiert haben, wird nun der Adapter an der ListView angemeldet / registriert.

Da ich den Adapter in einer eigenen Klasse geschrieben habe (quasi keine innere Klasse der Klasse TagCloudDialog) muss ich den Context übergeben.

Interaktion zwischen dem Dialog und der Activity

Nun noch die Schaltflächen für die Interaktion mit der übergeordneten Activity bestücken.
In der Zeile 6 & 11 werden die Methoden aus dem Interface „DialogListener“ aufgerufen.

Event für die Schaltfläche „OK“

Diese Methode

  • entfernt als erstes alle TagItemViews aus dem LinearLayout,
  • durchläuft die TagItems mit einer For Each Schleife und,
  • wenn das TagItem selektiert ist wird dieses dem LinearLayout hinzugefügt.

ausgewählte Tags aus dem TagCloudDialog

Event für die Schaltfläche „Abbrechen“

Das Event für die Schaltfläche „Abbrechen“ muss nicht extra programmiert werden denn dieses hat sein Verhalten von dem AlertDialog geerbt.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.