Laboratorium 9 (Więcej Aktywności, w Androidzie)

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Laboratorium 9 (Więcej Aktywności, w Androidzie)"

Adrian Szymański
9 lat temu
Przeglądów:

Dr Mirosław Łątka Informatyka dla medycyny Jesień 2012 Laboratorium 9 (Więcej Aktywności, w Androidzie) Aplikacje systemu Android składają się z luźnego zbioru aktywności (ang.

1 Dr Mirosław Łątka Informatyka dla medycyny Jesień 2012 Laboratorium 9 (Więcej Aktywności, w Androidzie) Aplikacje systemu Android składają się z luźnego zbioru aktywności (ang. activities), z których każda definiuje ekran interfejsu użytkownika. W momencie tworzenia projektu wtyczka Androida tworzy jedną aktywność, z którą związany jest plik xml opisujący rozmieszczenie elementów GUI. Naszym celem jest stworzenie aplikacji z dwiema aktywnościami i zaprezentowanie możliwości tworzenia w Androidzie grafiki dwuwymiarowej. Innymi słowy, jedną z aktywności wykorzystamy do rysowania prostych figur geometrycznych i bitmap. 1) Utwórz szkielet aplikacji i nazwij jej aktywność ADemo.

W momencie tworzenia projektu wtyczka Androida tworzy jedną aktywność, z którą związany jest plik xml opisujący rozmieszczenie elementów GUI.

2 W katalogu layout zaznacz plik activity_ademo.xml i klikając prawym przyciskiem myszy skopiuj go Zaznacz katalog layout i wklej do niego skopiowany plik

3 Oczywiście istnieje już plik o takiej nazwie dlatego pojawi się następujące ostrzeżenie: Zmień nazwę pliku na activity_rysuj.xml. Podwójnie kliknij nowo stworzony plik i dokonaj następujących zmian: Zapisz zmiany!

4 Otwórz plik activity_ademo.xml i po zmianie menedżera układu na LinearLayout (vertical) dodaj dwa przyciski. Zmień nazwę przycisków (ID) na Rysuj i Koniec, utwórz w zasobach łańcuchy będące ich etykietami, a następnie zaznacz menedżera układu i zmień sumę wag na 1 (Weight sum).

5 Kliknij na zakładkę activity_ademo.xml i wprowadź następujące zmiany: Po zapisaniu zmian główne okno aplikacji będzie wyglądało tak: Dla przycisków wybraliśmy wcześniej opcję LayoutWidth->MatchParent

Spójrzmy na plik ADemo.java wygenerowany automatycznie w trakcie tworzenia projektu. Klasa ADemo jest ściśle związana z plikiem activity_ademo.xml.

6 Spójrzmy na plik ADemo.java wygenerowany automatycznie w trakcie tworzenia projektu. Klasa ADemo jest ściśle związana z plikiem activity_ademo.xml. Po użyciu metody setcontentview(), w sposób pokazany na powyższym wydruku, interfejs użytkownika głównego okna aplikacji będzie stworzony w oparciu o opis zawarty w tym właśnie pliku xml. Tak więc, nie trudno odgadnąć, że dodanie drugiej aktywności będzie związane ze stworzeniem nowej klasy, powiedzmy Rysuj.java, którą za pomocą metody setcontentview() skojarzymy z plikiem activity_rysuj.xml. Dodanie nowej klasy do projektu nie jest wielkim wyzwaniem, ale będzie okazją do zademonstrowania możliwości Eclipse. Kliknij na pakiet com.example.ademo i prawym przyciskiem myszy przywołaj menu kontekstowe. Wybierz New->Class, tak jak na poniższym rysunku.

Tak więc, nie trudno odgadnąć, że dodanie drugiej aktywności będzie związane ze stworzeniem nowej klasy, powiedzmy Rysuj.

W polu Name okna dialogowego wpisz Rysuj i naciśnij przycisk Browse. Nasza klasa rozszerza klasę Activity, po wpisaniu paru liter odnajdziesz ją na liście klas bazowych.

7 W polu Name okna dialogowego wpisz Rysuj i naciśnij przycisk Browse. Nasza klasa rozszerza klasę Activity, po wpisaniu paru liter odnajdziesz ją na liście klas bazowych. Klasa Activity jest powszechnie stosowana więc jej nazwę nie trudno zapamiętać. Biorąc pod uwagę liczbę klas bazowych korzystanie z takiego systemu podpowiedzi jest bardzo użyteczne. Kliknij OK i zamknij poprzednie okno dialogowe (Finish).

Klasa Activity jest powszechnie stosowana więc jej nazwę nie trudno zapamiętać.

W nowo utworzonym pliku Rysuj.java znajdzie się następujący kod. Rzecz jasna chcemy dodać metodę oncreate(). Można oczywiście skopiować ją z ADemo.

8 W nowo utworzonym pliku Rysuj.java znajdzie się następujący kod. Rzecz jasna chcemy dodać metodę oncreate(). Można oczywiście skopiować ją z ADemo.java, ale pokaże Wam inteligentniejszy sposób. Kliknij na puste miejsce gdzieś w klasie Rysuj i prawym przyciski myszy otwórz menu kontekstowe. Wybierz Source Override/Implement Methods.

java, ale pokaże Wam inteligentniejszy sposób.

9 W oknie, które zobaczysz znajdują się wszystkie metody klasy Activity, które możesz przesłonić lub zaimplementować. Jest wśród nich metoda OnCreate(). Zaznacz ją kliknij przycisk OK.

10 Spowoduje to wygenerowanie kodu tej metody: Pozostaje nam dodanie jednej linii kodu:

11 Użycie aktywności Rysuj jest możliwe dopiero po zarejestrowaniu jej w pliku AndroidManifest.xml. To bardzo ważny plik! Oto jego wyjściowa postać:

12 My dodamy do tego pliku tylko 4 linie kodu. Pozostaje nam tylko zaimplementowanie obsługi przycisków. Po naciśnięciu przycisku Rysuj powinna zostać uruchomiona aktywność Rysuj (czyli wyświetlone zostaje okno z powitaniem Hello IB). Przycisk Koniec służy do zamknięcia aplikacji. Dokonajmy zmian w pliku ADemo.java.

Po naciśnięciu przycisku Rysuj powinna zostać uruchomiona aktywność Rysuj

13 W poniższym kodzie jedynie dwie linie są godne uwagi. Przejście do nowego okna po naciśnięciu przycisku Rysuj związane jest z utworzeniem nowej intencji. Zapisz zmiany i przetestuj działanie programu. Nie wpadaj w samouwielbienie, najtrudniejsza rzecz przed nami.

Spróbujmy teraz po naciśnięciu przycisku Rysuj narysować kółko. W tym celu wykomentujmy metodę setcontentview w pliku Rysuj.java. Następnie tworzymy nową klasę Grafika.

14 Spróbujmy teraz po naciśnięciu przycisku Rysuj narysować kółko. W tym celu wykomentujmy metodę setcontentview w pliku Rysuj.java. Następnie tworzymy nową klasę Grafika.java, która rozszerza klasę View. Postępuj analogicznie jak w przypadku klasy Rysuj. Po utworzeniu szkieletu pojawi się ostrzeżenie o konieczności dodania konstruktora. Wybierz pierwszą podpowiedź.

Następnie tworzymy nową klasę Grafika.java, która rozszerza klasę View.

15 Rysowanie będzie możliwe po zaimplementowaniu metody ondraw(). Oto treść klasy Grafika:

Na zakończenie modyfikujemy klasę Rysuj Jak widzisz za tworzenie GUI odpowiedzialny jest obiekt klasy Grafika. Uruchom Twoje dzieło. Jeżeli działa to jest to bez wątpienia powód do dumy.

16 Na zakończenie modyfikujemy klasę Rysuj Jak widzisz za tworzenie GUI odpowiedzialny jest obiekt klasy Grafika. Uruchom Twoje dzieło. Jeżeli działa to jest to bez wątpienia powód do dumy. A teraz zadania dla Ciebie 1) Zmodyfikuj klasę Grafika tak aby koło było rysowane w punkcie ekranu dotkniętym przez użytkownika (na ocenę dobrą). Związane jest to z implementacją metody ontouch() interfejsu OnTouchListener. Wskazówki: oto jak powinien wyglądać konstruktor:

A teraz zadania dla Ciebie 1) Zmodyfikuj klasę Grafika tak aby koło było rysowane w punkcie ekranu dotkniętym

17 i obsługa dotyku: 2) Napisz aplikację, która po dotknięciu ekranu będzie dodawała kolejne koła o losowo wybranym kolorze. Na ekranie będzie więc kilkanaście kół (na ocenę bardzo dobrą).

Podobne dokumenty

Laboratorium 8 ( Android -pierwsza aplikacja)

Dr Mirosław Łątka Informatyka dla medycyny Jesień 2012 Laboratorium 8 ( Android -pierwsza aplikacja) Naszym celem jest stworzenie aplikacji, która wyświetla zdjęcie Alberta Einsteina. Jeden z przycisków