Die Anleitung zu Android ListView
View more Tutorials:
ListView ist ein view group, das die Elemente (elements) nach einer Liste anzeigen, und vertikal gerollt werden kann. ListView ist ein wichtiges View, das viel in der Applikationen Android benutzt wird. Ein einfaches Beispiel vom ListView ist Ihre Kontaktsliste, wo Ihre Liste der Kontakte in einer ListView angezeigt wird.

Außer ListView bietet Android Ihnen ein ähnliches View. das ist ExpandableListView.

Ein ListView wird aus einer Liste vom ListItem erstellt. ListItem ist eine einzelne Zeile in ListView, wo die Daten angezeigt werden. Alle Daten in ListView werden durch ListItem nur angezeigt. ListView gilt als eine gerollte Gruppe vom ListItem .

Ein ListItem ist ein Stück der Interface, die durch einige View gemacht werden

Android baut bereit einige verschiedenen Muster vom ListItem. Sie werden die verfügt definierten Layout. Sie werden in den Beispiele des Dokument erwähnt
Android Adapter ist eine Brücke zwischen View (zum Beispiel ListView) und die Basic Daten für dieses View. Ein Adapter verwaltet die Daten und verbindet die eingenen Zeile (ListItem) vom view
Wir verbinden Adapter mit Android ListView durch die Methode setAdapter. Jetzt sehen wir mit der Hilfe von dem folgenden Foto, wie Adapter arbeitet


AdapterView
Viele View braucht Android Adapter zur Verwaltung der anzeigenden Daten. Diese View sind die Kinder von der Klasse AdapterView, Sie können das folgende Beispiel lesen

Android Adapter

Um ListView besser anzuzeigen, sollen Sie die Effekte anpassen. Zum Beispiel wenn der Mauszeiger auf ListItem bewegt oder wenn ListItem gewählt wird, wird die Hintergrundfarbe vom ListItem ändern. Sie können das Beispiel über die Anpassung vom ListView Selector am Ende des Dokument sehen.

ArrayAdapter ist benutzt zur Anzeige von ListView mit den einfachen ListItem. ListItem kann nur einzig aus einem TextView, CheckedTextView, EditText,...gemacht werden
Falls Sie ein ListView mit den mehr komplizierten ListItem erstellen möchten, können Sie ein anpassende Adapter erstellen
Falls Sie ein ListView mit den mehr komplizierten ListItem erstellen möchten, können Sie ein anpassende Adapter erstellen

Erstellen Sie ein Projekt mit dem Name vom SimpleListView.


Die Interface der Anwendung


activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ListView android:id="@+id/listView" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
UserAccount.java
package org.o7planning.simplelistview; import java.io.Serializable; public class UserAccount implements Serializable { private String userName; private String userType; private boolean active; public UserAccount(String userName, String userType) { this.userName= userName; this.userType = userType; this.active= true; } public UserAccount(String userName, String userType, boolean active) { this.userName= userName; this.userType = userType; this.active= active; } public String getUserType() { return userType; } public void setUserType(String userType) { this.userType = userType; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public boolean isActive() { return active; } public void setActive(boolean active) { this.active = active; } @Override public String toString() { return this.userName +" ("+ this.userType+")"; } }
MainActivity.java
package org.o7planning.simplelistview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ListView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView listView = (ListView)findViewById(R.id.listView); // UserAccount tom = new UserAccount("Tom","admin"); UserAccount jerry = new UserAccount("Jerry","user"); UserAccount donald = new UserAccount("Donald","guest", false); UserAccount[] users = new UserAccount[]{tom,jerry, donald}; // android.R.layout.simple_list_item_1 is a constant predefined layout of Android. // used to create a ListView with simple ListItem (Only one TextView). ArrayAdapter<UserAccount> arrayAdapter = new ArrayAdapter<UserAccount>(this, android.R.layout.simple_list_item_1 , users); listView.setAdapter(arrayAdapter); } }
Das Beispiel durchführen

Android baut einige Layout bereit (für ListItem), die mit ArrayAdapter umgehen können.
android.R.layout.simple_list_item_1
- Das ist das einfache Layout vom ListItem, das durch ein TextView einzig erstellt wird .(Sie können das oben Beispiel lesen).
android.R.layout.simple_list_item_checked & android.R.layout.simple_list_item_multiple_choice
- 2 Layout oben sind die einfache Layout um ein ListView mit ListItem, das ein checkbox hat zu erstellen.

Sie können das Beispiel hier sehen
Sie können ein ListViewer anpassend bauen. Ihr Adapter sollen aus der Klasse BaseAdapter erweitert werden.
Erstellen Sie ein "Empty Activity" Projekt mit dem Name vom CustomListView.


Das ist das Foto, das die Applikation machen wird

Zuerst sollen Sie einige Fotofile vorbereiten
Die Fotofile in dem Ordner mipmap kopieren und aufkleben:
vn.png | us.png | ru.png |



Sie sollen ListItem Layouts erstellen. Auf Android Studio klicken Sie auf res/layout und wählen:
- New/Layout resource file

Geben Sie ein
- File name: list_item_layout.xml
- Root element: androidx.constraintlayout.widget.ConstraintLayout

Die Interface vom ListItem design (entwerfen)

Die Interface entwerfen


Legen Sie ID, Text für die Komponenten in die Interface fest.
ImageView
TextView 1:
TextView 2:
- ID: imageView_flag
TextView 1:
- ID: textView_countryName
- Text: Country Name
TextView 2:
- ID: textView_population
- Text: Population ....

list_item_layout.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView_flag" android:layout_width="110sp" android:layout_height="90sp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/ic_launcher_foreground" tools:ignore="VectorDrawableCompat" /> <TextView android:id="@+id/textView_countryName" android:layout_width="0dp" android:layout_height="50dp" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:text="Country Name" android:textSize="22sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/imageView_flag" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView_population" android:layout_width="0dp" android:layout_height="30dp" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:text="Population" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/imageView_flag" app:layout_constraintTop_toBottomOf="@+id/textView_countryName" /> </androidx.constraintlayout.widget.ConstraintLayout>
Country.java
package org.o7planning.customlistview; public class Country { private String countryName; // Image name (Without extension) private String flagName; private int population; public Country(String countryName, String flagName, int population) { this.countryName= countryName; this.flagName= flagName; this.population= population; } public int getPopulation() { return population; } public void setPopulation(int population) { this.population = population; } public String getCountryName() { return countryName; } public void setCountryName(String countryName) { this.countryName = countryName; } public String getFlagName() { return flagName; } public void setFlagName(String flagName) { this.flagName = flagName; } @Override public String toString() { return this.countryName+" (Population: "+ this.population+")"; } }
- activity_main.xml

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ListView android:id="@+id/listView" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
CustomListAdapter ist eine Klasse erweitert aus BaseAdapter. Es hat die Aufgabe zur Anzeige der Database auf List Item.

CustomListAdapter.java
package org.o7planning.customlistview; import android.content.Context; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.List; public class CustomListAdapter extends BaseAdapter { private List<Country> listData; private LayoutInflater layoutInflater; private Context context; public CustomListAdapter(Context aContext, List<Country> listData) { this.context = aContext; this.listData = listData; layoutInflater = LayoutInflater.from(aContext); } @Override public int getCount() { return listData.size(); } @Override public Object getItem(int position) { return listData.get(position); } @Override public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = layoutInflater.inflate(R.layout.list_item_layout, null); holder = new ViewHolder(); holder.flagView = (ImageView) convertView.findViewById(R.id.imageView_flag); holder.countryNameView = (TextView) convertView.findViewById(R.id.textView_countryName); holder.populationView = (TextView) convertView.findViewById(R.id.textView_population); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } Country country = this.listData.get(position); holder.countryNameView.setText(country.getCountryName()); holder.populationView.setText("Population: " + country.getPopulation()); int imageId = this.getMipmapResIdByName(country.getFlagName()); holder.flagView.setImageResource(imageId); return convertView; } // Find Image ID corresponding to the name of the image (in the directory mipmap). public int getMipmapResIdByName(String resName) { String pkgName = context.getPackageName(); // Return 0 if not found. int resID = context.getResources().getIdentifier(resName , "mipmap", pkgName); Log.i("CustomListView", "Res Name: "+ resName+"==> Res ID = "+ resID); return resID; } static class ViewHolder { ImageView flagView; TextView countryNameView; TextView populationView; } }
ActivityMain.java
package org.o7planning.customlistview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ListView; import android.widget.Toast; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); List<Country> image_details = getListData(); final ListView listView = (ListView) findViewById(R.id.listView); listView.setAdapter(new CustomListAdapter(this, image_details)); // When the user clicks on the ListItem listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> a, View v, int position, long id) { Object o = listView.getItemAtPosition(position); Country country = (Country) o; Toast.makeText(MainActivity.this, "Selected :" + " " + country, Toast.LENGTH_LONG).show(); } }); } private List<Country> getListData() { List<Country> list = new ArrayList<Country>(); Country vietnam = new Country("Vietnam", "vn", 98000000); Country usa = new Country("United States", "us", 320000000); Country russia = new Country("Russia", "ru", 142000000); list.add(vietnam); list.add(usa); list.add(russia); return list; } }
Die Applikation laufen

Um ListView besser anzuzeigen, sollen Sie die Effekte anpassen, zum Beispiel die Hintergrundsfarbe von ListItem ändern wenn der Mauszeiger auf es bewegt oder wenn ListItem gewählt wird. Wir machen weiter mit dem oben Beispiel
Die Konfigurationsfile erstellen

- File name: item_state_normal.xml
- Directory: drawable

item_state_normal.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#f1f1f2" android:centerColor="#e7e7e8" android:endColor="#cfcfcf" android:angle="270" /> </shape>
Wenn List Item im normalen Zustand liegt, werden die im item_state_normal.xml gesetzten Stile für ListItem angewendet

Ähnlich erstellen Sie 3 andere File
- item_state_pressed.xml
- item_state_selected.xml
- list_selector.xml

Wenn List Item geklickt wird, werden die im item_state_pressed.xml gesetzten Stile für ListItem angewendet
item_state_pressed.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#18d7e5" android:centerColor="#16cedb" android:endColor="#09adb9" android:angle="270" /> </shape>

Wenn List Item gewählt wird, werden die in item_state_selected.xml gesetzten Stile für ListItem angewendet
item_state_selected.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#18d7e5" android:centerColor="#16cedb" android:endColor="#09adb9" android:angle="270" /> </shape>
Die bestimmte Zustände vom List Item mit der File xml zuweisen
list_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/item_state_normal" /> <item android:state_pressed="true" android:drawable="@drawable/item_state_pressed" /> <item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/item_state_selected" /> </selector>
ListSelector für ListView setzen
<ListView ... android:listSelector="@drawable/list_selector"/>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ListView android:id="@+id/listView" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:listSelector="@drawable/list_selector"/> </androidx.constraintlayout.widget.ConstraintLayout>
Ihre Applikation wieder laufen
