Szkolenia programowania we Wrocławiu
Kurs Android

ListView - przykład widoku listowego

W bardzo dużej ilości programów wykorzystuje się komponent zwany ListView. Odpowiada on za wyświetlenie dowolnych elementów w postaci listy. Kiedy elementów jest więcej niż może pomieścić ekran, tworzy nam się pasek przewijania. W dzisiejszym przykładzie pokażę podstawową wersję tego komponentu.

1. Tworzenie nowego projektu

Na sam początek musimy stworzyć nowy projekt. W tym celu włączamy Eclipse, a następnie wybieramy po kolei File, New, Other, Android Application. Włącza nam się interfejs do konfiguracji. Ustawiamy preferowane przez siebie wartości. Nie będę się tu bardziej szczegółowo rozpisywał, to tylko takie przypomnienie.

2. Rozpoczynamy edycję projektu

Skoro projekt już mamy, na pierwszy ogień weźmiemy przygotowanie layoutu. W tym celu najprościej z zakładki Composite przeciągnąć na nasz layout komponent o nazwie ListView a następnie rozciągnąć go wedle własnego życzenia, u mnie to będzie 100% powierzchni operacyjnej. Poniżej kod naszego pliku XML zarządzającego układem komponentów.

<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=".List" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

    </ListView>

</RelativeLayout>

Zwróćmy tu uwagę na id naszego ListView, będzie nam potrzebne do przechwycenia referencji komponentu z poziomu kodu Javy.

3. Definiujemy kod XML naszego pojedyńczego elementu listy

W tym celu w folderze layout tworzymy nowy plik XML i definiujemy tam wygląd pojedyńczego wiersza listy. U mnie to będzie najprostszy TextView

<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
 android:id="@+id/Row"   
 android:layout_width="fill_parent"   
 android:layout_height="wrap_content"  
 android:textSize="15sp" >  
</TextView>

4. Zaprogramowanie całości - operacje na Activity

Przyszedł czas, aby połączyć wszystko w jedną działającą całość.

package pl.listviewexample;

import java.util.ArrayList;
import java.util.Arrays;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class List extends Activity {

	private ListView list ;  
	private ArrayAdapter<String> adapter ;  

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_list);

		list = (ListView) findViewById(R.id.listView1);

		String cars[] = {"Mercedes", "Fiat", "Ferrari", "Aston Martin", "Lamborghini", "Skoda", "Volkswagen", "Audi", "Citroen"};

		ArrayList<String> carL = new ArrayList<String>();  
	    carL.addAll( Arrays.asList(cars) );  

	    adapter = new ArrayAdapter<String>(this, R.layout.row, carL);

	    list.setAdapter(adapter);
	}
}

Teraz po krótce opiszę co ciekawsze linijki w powyższej klasie.

Linia 11 - Nasza klasa musi rozszerzać klasę Activity (W bardziej zaawansowanym przykładzie, byłaby to już ListActivity)

Linia 12,13 - Tworzymy obiekty  widoku listowego i adaptera. Adapter jest to taki byt, który łączy nasz ListView z danymi mającymi być prezentowane jako lista.

Linia 21 - Przechwytujemy referencję do naszego widoku listowego

Linia 23 - Tworzymy tablicę przechowującą stringi. Powinno się to zrobić troszkę inaczej, za pomocą strings.xml, ale przykład jest na tyle trywialny, że posługujemy się trywialnymi mechanizmami :-)

Linia 25,26 - Tworzymy obiekt listy tablicowej i przypisujemy mu naszą tablicę z samochodami

Linia 28 - Konfigurujemy stworzony w 13 linijce obiekt adaptera. Jako parametry podajemy mu Activity, adres pliku zawierającego definicję pojedyńczego elementu i nazwę naszego obiektu listy tablicowej.

Linia 30 - Łączymy nasz widok listowy z naszym adapterem

5. Efekt końcowy

Powyższy przykład powinien w skrócie wyjaśnić jak korzystać z komponentu ListView. W następnym artykule postaram się opisać tworzenie bardziej zaawansowanego widoku listowego, z własnym adapterem.

Komentarze

Komentarze zamknięte. Zapraszamy do grupy na Facebooku
rocaviador

Trochę z innej beczki... Będzie kontynuacja kursu? :)

Lukasz

Swietny kurs! czekamy na wiecej

Kamil

moze mi ktos wytlumaczyc punkt 4
jaki plik utworzyc bo mam swoj projekt i nie mam kompletnie pojecia jak to polaczyc w calosc
pozdrawiam

Kamil

albo chociaz mnie troche nakierowac

Pawel

Punkt czwarty dotyczy podstawowego pliku z kodem. U mnie nazywa się MainActivity.java i mieści się w NazwaProjektu/src/com.example.lista.
Ten sam, który jest edytowany prawie we wszystkich poprzednich lekcjach ;)