Android ListView für Einsteiger
Mit ListView können Sie bei der App-Entwicklung Daten als scrollbare Liste anzeigen. Und so funktioniert es.
- Cornelia Möhring
Listenansichten kennen Sie zum Beispiel von den Kontakten auf Smartphones. ListView erlaubt Ihnen nun eigene Listen mit Daten aus Datenbanken oder simplen Listen. Lesen Sie hier, wie Sie - auch ohne Vorkenntnisse in der Entwicklung - eine erste ListView-Ansicht erstellen.
Was ist ListView?
ListView ist in der Android-Entwicklung eine Ansicht, um Elemente in einer simplen, scrollbaren Liste anzuzeigen. Das könnte beispielsweise eine Liste mit Kontakten des Android-Geräts sein. Die Elemente der Liste können über eine Datenbankabfrage kommen, aus einer externen Datei gelesen werden oder schlicht aus einem Array entstammen, also direkt im Code als Text angegeben werden.
Das ListView-Element ist in der Android-Developer-Dokumentation sehr ausführlich beschrieben und auch umfangreiche Beispiele gibt es im Netz zu Hauf. Allerdings richten sich im Grunde alle Artikel an mehr oder weniger erfahrene Entwickler. Anders ausgedrückt: Sie müssen schon grundlegend Android-Apps entwickeln können und viele Basics verstehen, um eine solche Liste hinzubekommen.
Im Folgenden wollen wir den Weg etwas anders gehen und Ihnen die ListView als Einstieg in die Entwicklung vorstellen. Dabei soll es nicht um die vielen Möglichkeiten von Datenquellen oder möglichst umfangreiche, bebilderte Listeneinträge gehen, sondern lediglich um die absolute Grundvariante: Eine App, die eine Liste mit fixen Einträgen zeigt. Diese können Sie dann wunderbar als Sprungbrett nutzen, um sich weiter in die Entwicklungsarbeit zu stürzen.
Wir zeigen Ihnen das schnellst mögliche Aufsetzen einer funktionierenden Liste über zwei Wege: Android Studio und MIT App Inventor. Das Android Studio ist die große Entwicklungsumgebung für Android, mit der Sie professionelle Anwendungen entwickeln können. Ohne grundlegende Entwicklungsfähigkeiten und Wissen über die Struktur von Android-Apps kommen Sie hier allerdings nur schwer voran. Der MIT App Inventor hingegen verzichtet auf eine komplizierte Umgebung und sogar auf Code: Hier wird das Design über einen simplen WYSIWYG-Editor angelegt und die Programmlogik über Puzzle-Teile zusammengebastelt. Auch mit dem App Inventor können Sie echte Apps programmieren, allerdings sind die Möglichkeiten beschränkt. Dafür geht das wirklich ohne jedes Programmierwissen!
ListView in Android Studio
Installieren Sie also Android Studio, sofern noch nicht geschehen, und starten Sie ein neues Projekt. Dabei können Sie sich zum größten Teil einfach durchklicken.
ListView Android Studio (4 Bilder)
1. Schritt:
Die so erstellte Basis-App können Sie auch direkt testen: Klicken Sie oben rechts auf den grünen "Play-Button" (Run app). Sofern das das erste Mal ist, müssen Sie zunächst über den Button "Create New Virtual Device" ein Testgerät für den Emulator erstellen. Wählen Sie beispielsweise "Pixel 2", um ein virtuelles Pixel-2-Smartphone zum Testen zu bekommen. Dabei können Sie sich einfach durch den Assistenten klicken. Anschließend startet die App auf dem emulierten Gerät und zeigt - wie üblich - ein schlichtes "Hello world".
Verantwortlich dafür sind zwei Dateien, die Sie gleich verändern werden: "Java/com.example.NUTZERNAME.myapplication" und "res/layout/activity_main.xml". Öffnen Sie beide per Doppelklick. Bei der "acivity_main.xml" sehen Sie auch schon eine Vorschau.
In der "acivity_main.xml" legen Sie die ListView-Ansicht fest. Ersetzen Sie den kompletten Code durch den Folgenden:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${packageName}.${activityClass}">
<!-- Alternativ fixe Angaben statt Variablen:
tools:context="com.example.NUTZERNAME.myapplication.MainActivity"> -->
<ListView
android:id="@+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Achten Sie darauf, "NUTZERNAME" durch Ihren Namen zu ersetzen - so wie bei der Einrichtung im ersten Screenshot der Galerie unter "Company domain" festgelegt. Damit wird einfach ein schlichtes Layout mit der ListView gebaut - alles Standardangaben, die hier im Detail zu erklären den Rahmen sprengen würde. Interessant ist die Zeile, die mit "tools:context" beginnt. Hier werden "NUTZERNAME" und der Name der "MainActivity.java" als Variablen angegeben - dann funktioniert es auch, wenn Sie bei Ihnen anders heißen als hier. Für das Verständnis steht die ausgeschriebene Variante als Alternative direkt darunter. Den Kommentar zwischen "<"-- und "-->" können Sie natürlich löschen.
In der "MainActivity.java" ersetzen Sie abermals den kompletten Code:
package com.example.NUTZERNAME.myapplication;import android.app.ListActivity;import android.os.Bundle;import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
String[] eintrag = {
"Eintrag 1",
"Eintrag 2",
"Eintrag 3",
"Eintrag 4",
"Eintrag 5",
"Eintrag 6",
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Listview adapter
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,eintrag));
}
public void onListItemClick(ListView parent, View v,
int position, long id) {
Toast.makeText(this, "Ihre Auswahl : " + eintrag[position],
Toast.LENGTH_LONG).show();
}
}
Auch hier ersetzen Sie in der ersten Zeilen wieder "NUTZERNAME". Anschließend werden benötigte Komponenten importiert. Dann folgt die eigentliche Liste. Auch hier ist das Meiste wieder Standard, den Sie zum Testen einfach belassen können. Der Inhalt folgt dann im "String"-Bereich: "Eintrag" ist der Name des Arrays, in dem die Daten gespeichert werden, "Eintrag 1" und so weiter sind die Werte - und die können Sie nach belieben ändern.
Unter "Override" folgen dann wieder einige Standards zum Setzen der Ansicht. Bei "Listview adapter" finden Sie noch ein Element, das nicht (halbwegs ...) selbsterklärend ist: "simple_list_item_1" ist ein fix integriertes Layout. Dieses könnten Sie alternativ auch selbst in einer eigenen Datei festlegen (wie es auch in der Dokumentation und umfangreichen Tutorials der Fall ist). Zu guter Letzt wird über "onListItemClick" festgelegt was passiert, wenn Sie auf einen Listeneintrag klicken/tappen. Hier wird "Ihre Auswahl : Eintrag 1" oder entsprechend ausgegeben. Auch das können Sie wieder anpassen.
Nun starten Sie die App wieder über den "Play-Button" und schon sehen Sie Ihre fertige Liste. Das war jetzt natürlich ein Schnelldurchlauf, aber Sie haben eine funktionierende ListView-List, kennen die relevanten Dateien und können sich nun wunderbar in das Thema vertiefen.
ListView in MIT App Inventor
Auch beim App Inventor versuchen wir es mit einem Schnelldurchlauf, aber kurz zum Konzept: Sie erstellen im Browser zunächst ein Design, indem Sie Buttons oder hier eben eine Listenansicht auf einem Screen platzieren. Dann setzen Sie ein paar Puzzle-Teile, "Blocks" genannt, zusammen, um die Listenansicht mit Inhalt zu füllen. Und dann kommt der Clou: Sie können live auf Ihrem echten Android-Gerät testen. Installieren Sie dazu zunächst den MIT AI2 Companion unter Android. Später werden Sie über einen QR-Code eine Verbindung zwischen App Inventor und Companion aufbauen und Ihre Entwicklung aus dem Browser live auf dem Android-Screen sehen.
Melden Sie sich bei App Inventor an und starten Sie ein neues Projekt. Sie landen direkt im "Designer" und sehen in der Mitte einen Android-Screen. Auf diesen ziehen Sie nun aus der linken Navigation aus dem Bereich "User Interface" einen "Button". Unten rechts im Fenster, unter "Properties/Button 1/Text" benennen Sie den Knopf nun "Liste laden". Anschließend fügen Sie das Element "ListView" ebenfalls per Drag&Drop in die App ein.
Wechseln Sie nun über den Button oben rechts zu "Blocks". Auch hier wird wieder mit Drag&Drop gearbeitet. Klicken Sie in der Navigation "Button 1" an und ziehen Sie das Element "when Button1.Click" in die Mitte. Dieses legt fest was passiert, wenn der eben angelegte Button gedrückt wird.
Klicken Sie auf "ListView1" und ziehen Sie das Element "set ListView1.Elements to" in das vorhandene Button-Element - es dockt direkt unter dem "when" in dem Block an. Das ist die erwähnte Puzzle-Arbeit. Dieser Block sagt, dass nach dem Klick auf den Button die Elemente der Liste gesetzt werden sollen, was über zwei weitere Elemente geschieht.
Zunächst docken Sie "Lists/make a list" an. Anschließend klicken Sie auf das kleine Zahnrad, um der Liste weitere "items" (Listeneinträge) hinzuzufügen - abermals per Drag&Drop. Legen Sie zum Beispiel vier Listeneinträge fest. An jeden dieser Einträge docken Sie nun noch das Element "Text/" "" an. Nun können Sie in diese leeren Text-Blöcke klicken, um die eigentlichen Texte für die Einträge zu schreiben.
Aber in diesem Fall sagt ein Bild mehr als Tausend Worte, so soll das fertige Puzzle aussehen:
Sie haben beim Puzzlen also festgelegt: Wenn auf den Button gedrückt wird, soll die Liste gefüllt werden und zwar mit einer Liste, die die nachfolgenden Texte enthält.
Zeit zum Testen: Klicken Sie oben auf "Connect/AI Companion" (ein QR-Code zeigt sich), öffnen Sie den AI Companion unter Android, klicken Sie auf "scan QR code" und scannen Sie den Code. Wenn das nicht funktioniert, setzen Sie die Verbindung im Browser über "Connect/Reset connection" zurück und versuchen es nochmal. Dieses Mal setzen Sie im AI Companion aber ein Häkchen bei "Use Legacy Connection" - hier hat's geholfen.
Fortan sehen Sie jede Änderung aus dem App Inventor ohne weiteres Zutun auf dem Android-Gerät. So macht Testen Spaß!
Das waren nun zwei sehr schnelle Wege zur ListView-Ansicht. In der Praxis werden Sie noch viele, viele Bauteile für eine echte App nachschlagen müssen. Und genau das wird Ihnen deutlich einfacher fallen, wenn Sie einmal eine funktionierende Minimal-App haben.
(como)
