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

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

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

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"

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

) {

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.