Die Anleitung zu Android ListView

View more categories:

1- Was ist ListView ?

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.

1.1- ListItem

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

1.2- Adapter 

Android Adapter ist eine Brücke zwischen   View (zum Beispiel L istView) 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

1.3- ListView Selector

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.

2- Grundlegendes ListView benutzt ArrayAdapter

2.1- ArrayAdapter

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 

2.2- Zum Beispiel ListView mit ArrayAdapter

Erstellen Sie ein Projekt mit dem Name  vom SimpleListView.
  • activity_main.xml
activity_main.xml
<?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"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.simplelistview.MainActivity">

   <ListView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/listView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />
   
</RelativeLayout>
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 android.support.v7.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

2.3- Die verfügbare Layout zur Arbeit mit ArrayAdapter

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
  • TODO Link!

3- ListView durch die Benutzung vom BaseAdapter anpassen

Sie können ein ListViewer anpassend bauen. Ihr  Adapter sollen aus der Klasse   BaseAdapter erweitert werden.

3.1- Zum Beispiel: das anpassende ListView

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:
  1. vi.png 
  2. us.png
  3. 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: RelativeLayout
Die Interface vom ListItem design (entwerfen)
Slider für die Schritte der Interface-Design vom   List Item machen
  • SLIDER
ImageView
  • 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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:id="@+id/imageView_flag"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Country Name"
        android:id="@+id/textView_countryName"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView_flag"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/textView_population"
        android:layout_margin="5dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Population: ..."
        android:id="@+id/textView_population"
        android:layout_alignBottom="@+id/imageView_flag"
        android:layout_alignLeft="@+id/textView_countryName"
        android:layout_alignStart="@+id/textView_countryName"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="5dp" />

</RelativeLayout>
Country.java
package org.o7planning.countrieslistview;

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"?>
<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"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.customlistview.MainActivity">

   <ListView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/listView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />
   
</RelativeLayout>
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 android.support.v7.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

3.2- Zum Beispiel: Der anpassende Selector

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: list_item_normal.xml
  • Directory: drawable
Ähnlich erstellen Sie 3 andere File
  • item_state_pressed.xml
  • item_state_selected.xml
  • list_selector.xml
Wenn List Item im normalen Zustand liegt, werden die im item_state_normal.xml gesetzten Stile für ListItem angewendet
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 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
activity_main.xml
<?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"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.customlistview.MainActivity">

   <ListView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/listView"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true"
       android:listSelector="@drawable/list_selector" />

</RelativeLayout>
Ihre Applikation wieder laufen

View more categories: