Elegant Einträge aus SwipeListView löschen

Ich bin schon länger auf der Suche, nach einer für mich intuitiven Art, Einträge aus einer Liste zu löschen. Meiner Meinung nach ist es ein kraus, auf einen Eintrag „länger drauf zu klicken“ bis sich ein Kontextmenü öffnet, um dann diesen Eintrag löschen zu können. iOS hat das „Problem“ besser gelöst, man wischt nach links und man kann den Eintrag löschen.

Da ich mir ziemlich sicher war, dass ich nicht der einzige bin, der dieser Ansicht ist, habe ich im Netz recherchiert. Dabei bin ich auf eine recht interessante Lösung von 47deg gestoßen. Diese haben, weil sie es auch benötigten, eine kleine Bibliothek geschrieben, die genau das oben genannte Problem beseitigt.

Klar, man hätte sich so etwas auch selber schreiben können, nur bin ich ein Freund von etablierten und vor allem getesteten Lösungen. Einen ersten Überblick von der Funktionsweise kann man sich mittels, der von 47deg bereit gestellten App SwipeList-Demo machen.

Bibliothek einbinden

Zunächst erstellen wir unser Test-Projekt, dort öffnen wir die build.gradle die unter dem Verzeichnis app liegt und binden die Bibliothek folgendermaßen ein:

Layout und Styles

Im nächsten Schritt erstellen wir das Layout für einen einzelnen Listeneintrag. Wir geben dem Layout den Namen „news_row“, als Parent-Layout wählen wir das Framelayout.

Dort tragen wir nachfolgenden Code ein:

Um das ganze etwas abzurunden erstellen wir im Ordner drawable eine weitere xml Datei. Die bekommt den Namen bottom_gray_border, diese xml dient dazu, dass die Listeneinträge einen unteren grauen Rand bekommen.

Nun modifizieren wir unsere main_activity.xml, in dieser binden wir nun die 47deg SwipeListView ein.

  • swipeFrontView/ swipeBackView: referenziert zu unseren Views die wir in news_row definiert haben.
  • swipeCloseAllItemsWhenMoveList: Wenn diese Eigenschaft nicht auf true gesetzt ist, zeigt der darauffolgende Eintrag automatisch die „BackView“
  • swipeMode: Um die „BackView“ anzuzeigen kann der Benutzer sowohl nach links als auch nach rechts wischen, mit dieser Eigenschaft kann das Verhalten eingeschränkt werden.

Klassen

Jetzt brauchen wir noch eine einfache Pojo-Klasse NewsEntry und einen passenden Adapter NewsEntryListAdapter. Die Klasse NewsEntry hält die Attribute einer News.

Der NewsEntryListAdapter ist ein wenig anspruchsvoller als der eigentliche Entry ;-). Unser ListAdapter erbt von der Klasse BaseAdapter. Hier müssen vom BaseAdapter einige Methoden implementiert werden, 90% davon ist straight forward. Nur die getView() Methode ist etwas anspruchsvoller.

Abschließend müssen wir alle diese Komponenten in unsere Activity zusammenführen. Zunächst deklarieren wir folgende Attribute:

Diese werden in der onCreate() Methode definiert.

Die SwipeList Bibliothek bietet mehrere Listener-Methoden, in unserem Beispiel nutzen wir lediglich die onClickFrontView(int position). Auf der GitHub-Seite findet man die anderen Methoden.

Damit wir auch Daten in unsere Liste haben müssen wir den Adapter in der onCreate() initialisiert, dazu nutzen wir die Methoden initializeArrayAdapter(), diese sieht wie folgt aus:

Nun brauchen wir noch eine Methode um die Einträge aus der Liste entfernen zu können.

Neben der onCreate() Methode sollte man der onResume() Methode auch Beachtung schenken. Es soll ja vorkommen das der Benutzer die App pausiert oder verlässt 🙂

Nach getaner Arbeit ist gut ruhen, so oder so ähnlich. Wir starten unsere App nun im Emulator oder Smartphone und bewundern unsere neue SwipeList.

Vorschau SwipeListView

Vorschau der SwipeListView

Den kompletten Source-Code kann man auf meiner GitHub-Seite finden.

ManuZiD

/ Software Developer
Mein Name ist Emanuel, ich bin Web & App Entwickler/Designer. Leidenschaftlicher Entwickler, offen für neue coole Frameworks, Neuerungen und Techniken. Neben der Programmierung beschäftige ich mich gern mit Musik. Für die nötigen kreativen Anregungen sorgt das Fahrrad fahren (Mountainbike).

RSS-FeedRSS Feed abbonnieren


Schreibe einen Kommentar

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