background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

Programowanie dla technologii bezprzewodowych 

Laboratorium 3 

Cele:  

 

Praca z listami 

Zadania 

Materiały do zadao znajdują się na dysku wspólnym w katalogu PCudek\ Programowanie dla technologii 
bezprzewodowych\Lab 3

Obraz wirtualnego systemu operacyjnego Win XP na którym należy wykonad zadania znajduje się w katalogu 
PCudek\ Programowanie dla technologii bezprzewodowych\ Win_XP_Android 

1.  Skopiuj i uruchom wirtualną maszynę.  

Po uruchomieniu zmieo nazwę komputera w sieci na wNUMER_INDEKSU  (Start->Mój komputer-
>Właściwości ->Nazwa komputera->Zmień) 

2.  Uruchom program Eclipse wpisując w adresie obszaru roboczego (workspace)  D:\@projekty\lab3 . 

Sprawdź czy środowisko programistyczne jest przygotowane do uruchomienia projektu wykonując 
następujące czynności: 

a)  Window ->Preferences->Android->SDK Location:  C:\PROGRA~1\Android\android-sdk 

UWAGA!!! Pamiętaj aby nazwę „Program Files” zamienid na PROGRA~1 lub w przypadku ” 
Program Files (86)” na PROGRA~2 

b)  Window ->Android SDK and AVD Manager:  sprawdź czy na liście wirtualnych urządzeo znajduje 

się urządzenie, które zamierzasz wykorzystad w projekcie 

Celem poniższego ćwiczenia jest stworzenie ekranu zawierającego listę elementów. 

3.  Wybierając  File->New->Other utwórz nowy „Android project” z następującymi ustawieniami: 

Project name: ListActivityDemo 
Build Target: Android 2.1 
Aplication name: ListActivityDemo 
Package name: pl.wsiz.list 
Craeate Activity: ListActivityDemoActivity 
Min SDK Version: 7 

4. 

W pliku 

ListActivityDemoActivity

.java stwórz listę dodając następujące linie kodu linie kodu: 

import

 android.app.ListActivity; 

//zmieo klasę z której dziedziczy activity 

extends

 ListActivity

  

dodaj zmienną zawierającą dane, które chcemy prezentowad na liście 

private

 String[] 

operatingSystems

 = { 

"Windows"

"Linux"

,

"Mac OSX"

"Ubuntu"

}; 

W metodzie onCreate zmieo kod 

// setContentView(R.layout.main); - wygląd nie będzie pobierany z liku main.xml

 

 

background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

ArrayAdapter<String> adapter = 

new

 ArrayAdapter<String>(

this

android.R.layout.

simple_list_item_1

operatingSystems

); 

 
Adapter jest elementem pozwalającym na uzyskanie dostępu do danych oraz odpowiedzialnym za 
tworzenie View dla każdego elementu listy. 
Listę możliwych adapterów znajdziesz na stronie 

http://developer.android.com/reference/android/widget/Adapter.html

 

 

 

Połącz nasze Activity z adapterem

 

this

.setListAdapter(adapter); 

 

W tej chwili twoje activity zawiera listę. 

5.  Przygotuj konfigurację uruchomieniową  oraz uruchom emulator. 

 

6. 

Dodaj kod który pozwoli nasłuchiwad kliknięcia w element listy 

@Override

 

      

protected

 

void

 onListItemClick(ListView l, View v, 

int

 position, 

long

 id) 

      { 
       

super

.onListItemClick(l, v, position, id); 

Toast.makeText(

this

"Wybrany element:"

 +

operatingSystems

[position], 

Toast.

LENGTH_LONG

).show(); 

}

 

 

Wykorzystanie spinnera 

 

 

7.  Wybierając  File->New->Other utwórz nowy „Android project” z następującymi ustawieniami: 

Project name: SpinerDemo 
Build Target: Android 2.1 
Aplication name: SpinerDemo 

background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

Package name: pl.wsiz.spiner 
Craeate Activity: SpinerDemo Activity 
Min SDK Version: 7 

8.  W pliku main.xml dodaj kod  

<

Spinner

 

android:id

=

"@+id/planetChooser"

  

 

android:layout_height

=

"wrap_content" 

 

android:layout_width

=

"fill_parent"

></

Spinner

>

 

9. 

W pliku SpinerDemo Activity.java dodaj zmienną 

public

 

static

 String 

planteArray

[]={

"Ziemia"

,

"Mars"

"Jupiter"

}; 

 

 

10. 

W pliku SpinerDemo Activity.java dodaj do metody onCreate 

Spinner

 planetSpinner

 = (Spinner)findViewById(R.id.

planetChooser

); 

ArrayAdapter<String> adapter = 

new

 ArrayAdapter<String>(

this

android.R.layout.

simple_spinner_item

planteArray

); 

      adapter.setDropDownViewResource(android.R.layout.

simple_spinner_dropdown_item

); 

      

planetSpinner

.setAdapter(adapter); 

 
      Dodajemy obiekt, który będzie nasłuchiwał zdarzenia zaznaczenia elementu listy. 
      MyOnItemSelectedListener listener = 

new

 MyOnItemSelectedListener(); 

      planetSpinner

.setOnItemSelectedListener(listener); 

11. 

W pliku SpinerDemo Activity.java dodaj brakującą klasę 

 

    

class

 MyOnItemSelectedListener 

implements

 OnItemSelectedListener 

    { 
 

public

 

void

 onItemSelected(AdapterView<?> arg0, View arg1, 

int

 position, 

 

 

 

 

long

 arg3) { 

 

Toast.makeText(getApplicationContext(), 

planteArray

[position], 

Toast.

LENGTH_LONG

).show(); 

 

 

 

 

 

 

 
 

 

public

 

void

 onNothingSelected(AdapterView<?> arg0) { 

 

 

 

Toast.makeText(getApplicationContext(),

"Nic nie zaznaczono"

Toast.

LENGTH_LONG

).show(); 

 

 

 

 

 

 

       

 

12. Przygotuj konfigurację uruchomieniową  oraz uruchom emulator. 

Projektowanie wyglądu elementów listy  

Przygotujemy element listy na którym zaprezentujemy informacje o studentach.  

13. Wybierając  File->New->Other utwórz nowy „Android project” z następującymi ustawieniami: 

Project name: MyListDemo 
Build Target: Android 2.1 

background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

Aplication name: MyListDemo 
Package name: pl.wsiz.mylist 
Craeate Activity: MyListDemoActivity 
Min SDK Version: 7 

14. 

Wewnątrz klasy MyListDemoActivity.java utwórz klasę przechowującą dane o studentach 

    

private

 

class

 Student { 

         

 

public

 String 

mImieINazwisko

        

 

public

 

int

 

mWiek

          }

 

15. Dodaj zmienną w której będziemy przechowywad informacje o studentach 

private

 List<Student> 

mStudenci

 = 

new

 ArrayList<Student>(); 

Dla ułatwienia listę uzupełnimy tworząc obiekty „ręcznie”. Jednakże równie dobrze 
może zostać uzupełniona poprzez odczyt z różnych źródeł np. bazy danych. 
 
W metodzie onCreate dodaj 
Student nowyStudent1 = 

new

 Student(); 

nowyStudent1.

mImieINazwisko =

 "Jan Kowalski"; 

nowyStudent1.

mWiek 

= 23;

 

mStudenci

.add(nowyStudent1); 

 
Student nowyStudent2 = 

new

 Student(); 

nowyStudent2.

mImieINazwisko =

 "Adam Nowak"; 

nowyStudent2.

mWiek 

= 22;

 

mStudenci

.add(nowyStudent2); 

 
Student nowyStudent3 = 

new

 Student(); 

nowyStudent3.

mImieINazwisko =

 "Janina Nowak"; 

nowyStudent3.

mWiek 

= 20;

 

mStudenci

.add(nowyStudent3); 

 

16. W 

katalogu

 res/layout utwórz nowy plik student.xml 

Będzie on reprezentował pojedynczego studenta. Zakładamy, że będzie wyświetlał imię 
z nazwiskiem po lewej stronie oraz wiek po prawej. 
ID pola tekstu, który będzie reprezentował nazwę studenta to 

nazwa

 zaś tekstu 

reprezentującego wiek to 

wiek.

 

Przykładowy sposób realizacji tego zadania: 

<?

xml

 

version

=

"1.0"

 

encoding

=

"utf-8"

?>

 

<

LinearLayout

 

  

xmlns:android

=

"http://schemas.android.com/apk/res/android"

 

  

android:orientation

=

"horizontal"

 

  

android:layout_width

=

"fill_parent"

 

  

android:layout_height

=

"50dp"

 

  

android:background

=

"#ffffff"

>

 

 

<

RelativeLayout

 

        

android:id

=

"@+id/relativeLayout1"

 

        

android:layout_width

=

"fill_parent"

 

        

android:layout_height

=

"fill_parent"

>

 

        

<

TextView

 

android:id

=

"@+id/nazwa"

 

            

android:layout_height

=

"wrap_content"

 

            

android:text

=

"Test Kowalski"

 

            

android:layout_width

=

"wrap_content"

 

            

android:layout_centerVertical

=

"true"

 

            

android:layout_alignParentLeft

=

"true"

 

            

android:layout_marginLeft

=

"10dp"

 

            

android:textSize

=

"25dp"

 

            

></

TextView

>

 

    

<

TextView

 

android:id

=

"@+id/wiek"

 

background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

            

android:layout_height

=

"wrap_content"

 

            

android:text

=

"0"

 

            

android:layout_width

=

"wrap_content"

 

            

android:layout_centerVertical

=

"true"

 

            

android:layout_alignParentRight

=

"true"

 

            

android:layout_marginRight

=

"10dp"

 

            

android:textSize

=

"25dp"

 

            

></

TextView

>

 

</

RelativeLayout

>

 

</

LinearLayout

 

17. W pliku main.xml przygotujemy teraz listę, w której będziemy wyświetlad dane o studentach 

 

<?

xml

 

version

=

"1.0"

 

encoding

=

"utf-8"

?>

 

<

LinearLayout

 

xmlns:android

=

"http://schemas.android.com/apk/res/android"

 

    

android:orientation

=

"vertical"

 

    

android:layout_width

=

"fill_parent"

 

    

android:layout_height

=

"fill_parent"

 

    

>

 

 

<

ListView

  

 

 

android:layout_width

=

"fill_parent"

 

 

    

android:layout_height

=

"fill_parent"

 

 

    

android:id

=

"@+id/studenci"

 

 

    

></

ListView

>

 

</

LinearLayout

>

 

 

18. Wewnątrz klasy MyListDemoActivity  przygotujemy podklasę dziedziczącą z 

BaseAdapter

, która 

umożliwi nam połączenie danych z przygotowanym plikiem 

student.xml

 i stworzenie nowego layout-u 

z elementami naszej listy. 

Layout w systemie Android jest tworzony na 3 główne sposoby: 

 

Pisany w XML i ładowany za pomocą setContentView(R.layout.main) 

 

Tworzony czysto programowo używając metody addView() 

 

Pisany fragmentami w XML i składany w całośd programowo  
 

private

 

class

 StudentViewAdapter 

extends

 BaseAdapter { 

 
private

 LayoutInflater 

mInflater

 

public

 StudentViewAdapter () { 

 

      

mInflater

 = (LayoutInflater)getSystemService(Context.

LAYOUT_INFLATER_SERVICE

); 

 

        } 

 

   

@Override

 

 

   

public

 

int

 getCount() { 

 

            

return

 

mStudenci

.size(); 

 

   } 

 
 

   

@Override

 

 

   

public

 Student getItem(

int

 position) { 

 

          

return

 

mStudenci

.get(position); 

 

   } 

 
 

   

@Override

 

 

   

public

 

long

 getItemId(

int

 position) { 

 

         

return

 position; 

 

   } 

 
 

   

@Override

 

 

   

public

 View getView(

int

 position, View convertView, ViewGroup parent) { 

 

     

if

 (convertView == 

null

) { 

background image

Programowanie dla technologii bezprzewodowych 

mgr Paweł Cudek 

 

          convertView = 

mInflater

.inflate(R.layout.

friends_list_item

, parent, 

false

); 

 

      } 

//pobranie obiektu Student 
Student student = getItem(position); 

 

            

 

      //modyfikacja zawartości student.xml 

 

      TextView nazwa = (TextView) convertView.findViewById(R.id.

nazwa

); 

      TextView wiek = (TextView) convertView.findViewById(R.id.

wiek

); 

nazwa.setText(student.

mImieINazwisko

); 

 

wiek.setText(Integer.toString(student.

mWiek

));

   

     
return

 convertView; 

 

 

19. W kolejnym kroku będziemy chcieli pobrać listę z pliku main.xml, połączyć ją z 

adapterem. W tym celu: 
a) dodaj w zmienną  
StudentViewAdapter 

mStudentViewAdapter

 

b) w metodzie onCreate dodaj 
 

mStudentViewAdapter

 = 

new

 StudentViewAdapter (); 

   ListView 

mStudentListView

 =  (ListView) findViewById(R.id.

studenci

); 

   

mStudentListView

.setAdapter(

mStudentViewAdapter

); 

 

20. Dodamy teraz obsługę zdarzenia kliknięcia w element listy. W naszym przypadku 

będziemy chcieli wyświetlić imię i nazwisko studenta w okienku Toast 

mStudentListView

.setOnItemClickListener(

new

 OnItemClickListener() { 

           

@Override

 

           

public

 

void

 onItemClick(AdapterView<?> parent, View view, 

int

 position, 

long

 id)  

    { 

//TODO:akcja po kliknieciu w element listy na pozycji 

int

 position    

Toast.makeText(this, 

mStudenci

.get(position).

mImieINazwisko

Toast.LENGTH_LONG).show(); 

     
           } 
        });     
 

21. A teraz najważniejsze. Musimy poinformowad adater, że pojawiły się nowe dane w liście studentów i 

należy odświeżyd listę    

  

 
mStudentViewAdapter

.notifyDataSetChanged();  

 

Powyższą linię dodaj na koocu metody onCreate. 
Metoda ta wywołuje getView w adapterze. 
Używaj jej za każdym razem, gdy zmienią się dane które tworzą listę.

 

 

22. Przygotuj konfigurację uruchomieniową  oraz uruchom emulator.