Android Tutorial ListView Tutorial

klaus

Expert
Licensed User
Longtime User
Das ListView Control ist ein leistungsfähiges Control. Es erlaubt kurze oder auch lange Listen in einer 'blendenden' Art anzuzeigen.


Um das Beste aus diesem Tutorial zu machen ist es vorteilhaft den kompletten Code des Beispielprogrammes herunter zu laden. Er befindet sich am Ende.
Das Englische Originaltutorial.


Es ist sehr leicht eine einfache Liste zu erstellen:
B4X:
Sub Globals
    Dim ListView1 As ListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ListView1.Initialize("ListView1")
    For i = 1 To 300
        ListView1.AddSingleLine("Item #" & i)
    Next
    Activity.AddView(ListView1, 0, 0, 100%x, 100%y)
End Sub
Sub ListView1_ItemClick (Position As Int, Value As Object)
    Activity.Title = Value
End Sub
lv_single.png


Ein ListView kann man entweder im Code oder im Designer einfügen. Vorläufig muß man die Einträge für die Liste im Code einfügen.


Erklärungen über den Code:
-
[FONT=&quot] ListView1.Initialize("ListView1")[/FONT] – Hier wird die Liste initialisiert und der Eventname für das ListView definiert. Das heißt, um Events vom ListView abfangen zu können müssen die Subroutinen mit Eventname_... (ListView1_...) anfangen wie: ListView1_ItemClick.
-
[FONT=&quot] ListView1.AddSingleLine("Item #" & i)[/FONT]– Fügt eine Eintrag mit einer Zeile an.
-
Activity.AddView(ListView1, 0, 0, 100%x, 100%y)– Fügt die ListView1 ins Activity Layout ein. Zu beachten ist die Verwendung von Prozenteinheiten. Wir setzen die Breite und die Höhe des ListViews auf Werte die prozentual zu den Activitymaßen sind (100% Activitybreite, 100% Activityhöhe).

Vorläufig gibt es drei Eintragsarten:

- Eine Textzeile
- Zwei Textzeilen
- Zwei Textzeilen plus ein Bitmap.

Jede Eintragsart kann man 'customisieren'. Der Standardlook ist:

lv_1.png


Dies ist der Code zum Anfügen der drei Arten:

B4X:
    Dim Bitmap1 As Bitmap
    Bitmap1.Initialize(File.DirAssets, "button.gif")
    For i = 1 To 300
        ListView1.AddSingleLine("Item #" & i)
        ListView1.AddTwoLines("Item #" & i, "This is the second line.")
        ListView1.AddTwoLinesAndBitmap("Item #" & i, "This is the second line.", Bitmap1)     
    Next
Man kann verschiedene Bitmaps in verschiede Einträge einfügen. Der Beispielcode lädt eine Bilddatei 'button.gif' die im Files Tab hinzugeladen werden muß (unten rechts im IDE). Das komplette Projekt findet man am Ende des Englischen Originaltutorials.

'Customising' der verschiedenen Eintragsarten
Jede von den drei Eintragsarten kann 'customisiert' werden. Änderungen gelten für ALLE Einträge gleicher Art.
Das ListView hat drei "Modelle" die in folgenden 'properties' (Eigenschaften) gespeichert sind:
- SingleLineLayout
- TwoLinesLayout
- TwoLinesAndBitmap

Jedes dieser Modelle hat eine ItemHeight 'property' (Eigenschaft), eine Background 'property' und eine oder mehrere Views 'properties'. Und nochmals, eine Änderung gilt für ALLE Einträge gleicher Art.
Beispiel für das einzeilige Modell (SingleLineLayout):

B4X:
   ListView1.SingleLineLayout.ItemHeight = 100dip
    ListView1.SingleLineLayout.Label.TextSize = 20
    ListView1.SingleLineLayout.Label.TextColor = Colors.Blue
    ListView1.SingleLineLayout.Label.Gravity = Gravity.CENTER
    For i = 1 To 300
        ListView1.AddSingleLine("Item #" & i)
        ListView1.AddTwoLines("Item #" & i, "This is the second line.")
        ListView1.AddTwoLinesAndBitmap("Item #" & i, "This is the second line.", Bitmap1)     
    Next
Resultat:

lv_3.png


Zu beachten ist daß ItemHeight auf 100dip gesetzt ist. Die 'dip' Einheit verursacht eine automatische Skalierung der Höhe gemä
ß der Geräteskala. 'dip' steht für density independant pixel. Für TextSize (Textgröße) darf man keine dip Einheiten verwenden denn Textgrößen sind von Grund auf skalierte Maße.

Der obige Code ist dem unteren gleichwertig (aber übersichtlicher):

B4X:
    ListView1.SingleLineLayout.ItemHeight = 100dip
    Dim label1 As Label
    label1 = ListView1.SingleLineLayout.Label 'set the label to the model label.
    label1.TextSize = 20
    label1.TextColor = Colors.Blue
    label1.Gravity = Gravity.CENTER
In ähnlicher Weise kann man den Look der anderen Modelle ändern.
Die andern Modelle haben zusätzliche Views: SecondLabel and ImageView.

Rückgabewert
Zu bemerken ist daß es kein 'selected item' (gewählter Eintrag) gibt. Der Grund dafür ist daß die Kombination von verschieben der Liste mit dem Finger und von verschieben mit dem Rad oder der Tastatur macht es irrelevant.
Man muß das 'ItemClick' Event abfangen und den gewählten Eintrag im Programm behandeln.
Der Wert des gewählten Eintrages wird in der ItemClick Routine als Parameter übergeben.
Welcher Wert von einem gewählten Eintrag wird übergeben?
Standardmäßig ist es der Text der in der ersten Zeile des Eintrages gespeichert ist.
Man kann ihn jedoch zu einem beliebigen Objekt ändern, zum Beispiel mit den AddSingleLine2, AddTwoLines2 and AddTwoLinesAndBitmap2 Methoden. Diese Methoden haben einen zusätzlichen 'Return' Wert (Rückgabewert). Der erlaubt, wenn nötig, mehr Informationen an das Programm zu übergeben.

Hintergrund Optimisierung
Es ist standardmäßig angenommen daß der Hintergrund hinter dem Listview schwarz ist. Wenn man den Hintergrund hinter dem Listview ändert, zum Beispiel mit einem 'Gradient' oder einem Bild dann merkt man aber daß während dem 'scrollen' (verschieben) der Hintergrund verschwindet.
Man kann die 'Scrollinghintergrundfarbe' mit der ScrollingBackgroundColor Eigenschaft ändern. Falls die Hintergrundfarbe nicht 'voll' (solid) ist, muß man die Farbe auf Colors.Transparent setzen.

Beispiel (der Activityhintergrund ist 'gradient'):

B4X:
    Dim GD As GradientDrawable
    GD.Initialize("TR_BL", Array As Int(Colors.Gray, Colors.LightGray))
    Activity.Background = GD
    ListView1.ScrollingBackgroundColor = Colors.Transparent
Tipps
Wenn man einen Eintrag mit einer Zeile und einem Bitmap möchte und keine zweite Zeile braucht nimmt man trotzdem einen Zweizeiligen Eintrag mit Bitmap und die Visible Eigenschaft (property) des Label der zweiten Zeile setzt man auf False.

Wenn man viele Einträge hat sollte man die FastScrollEnabled property (schnelles scrollen Eigenschaft) auf True setzen:
B4X:
[COLOR=black]ListView1.FastScrollEnabled = true[/COLOR]

lv_2.png


Der komplette Sourecode des Beispielprogrammes:
http://www.b4x.com/android/fil...s/ListView.zip
 
Last edited:

TAK

Member
Licensed User
Longtime User
Hallo,
folgendes Problem: ich will 2 ListViews nebeneinander darstellen und von einer ListView in die andere Zeilen übertragen oder Zeilen löschen lassen. Diese Aufgabe sollten zwei Buttons übernehmen.
Ist so etwas möglich? Wenn ja, wie kann ich die Buttons erstellen?
Um dies zu verdeutlichen habe ich eine kleine Skizze gezeichnet.
 

Attachments

  • Screenshot_2014-12-21-16-23-40.png
    Screenshot_2014-12-21-16-23-40.png
    172.2 KB · Views: 731

TAK

Member
Licensed User
Longtime User
Die Skizze habe ich nachträglich hochgeladen.
Ich lade jetzt ein ScreenShot hoch und versuche es damit zu erklären.
Auf dem Bild sieht man 3 ListViews. Diese "Items" will ich von einer Liste in die andere verschieben können oder sie einfach löschen. Dazu will ich in jede Spalte der ListViews 3 Buttons einbauen. Nur weiß ich nicht, wie ich Buttons in eine ListView hinzufügen kann.
 

Attachments

  • Screenshot_2014-12-21-17-17-47.png
    Screenshot_2014-12-21-17-17-47.png
    81.8 KB · Views: 730
Top