Laboratorium 8 ( Android -pierwsza aplikacja)

Wielkość: px

Rozpocząć pokaz od strony:

Download "Laboratorium 8 ( Android -pierwsza aplikacja)"

Karolina Gajda
8 lat temu
Przeglądów:

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.

1 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 służy do zmiany wyświetlanego zdjęcia, drugi do zamknięcia aplikacji. Pracę rozpocznij od stworzenia szkieletu aplikacji z jedną aktywnością o nazwie Einstein ( jeżeli potrzebujesz wskazówek to znajdziesz je w Dodatku I). Poniższy rysunek pokazuje stan środowiska po wykonaniu tego pierwszego zadania. W katalogu layout znajduje się plik xml, który zawiera opis interfejsu użytkownika (GUI) aktywności Einstein. Klikając zakładkę activity_enstein.xml, która znajduje się tuż pod graficzną reprezentacją GUI, zobaczysz zawartość tego pliku. Powrót do graficznej reprezentacji następuje po naciśnięciu zakładki Graphical Layout.

Pracę rozpocznij od stworzenia szkieletu aplikacji z jedną aktywnością o nazwie Einstein ( jeżeli potrzebujesz wskazówek to znajdziesz je w Dodatku I).

Prawym przyciskiem myszy otwórz menu kontekstowe i wybierz opcję Change Layout.

2 Rozmieszczenie komponentów GUI, kontrolują menedżery układu. Domyślnym menedżerem jest Relative Layout. W oknie Layout, wskazanym na rysunku przez czerwoną strzałkę, kliknij na Relative Layout. Podświetlenie potwierdza zaznaczenie tego elementu. Prawym przyciskiem myszy otwórz menu kontekstowe i wybierz opcję Change Layout. Zmień menedżer układu na LinearLayout w wariancie Vertical dodawane komponenty będą wtedy dodawane jeden pod drugim. Po zmianie menedżera, pole tekstowe (TextView), które wyświetla łańcuch Hello world zostanie przesunięte w lewy górny róg okna aplikacji. Zmieńmy wyświetlany tekst. W tym celu klikamy to pole i prawym przyciskiem myszy otwieramy menu kontekstowe. Wybieramy opcję Edit Text.

W oknie, które się pojawi, zobaczysz łańcuchy zdefiniowane już na etapie tworzenia szkieletu aplikacji. Jest wśród nich hello_world. Utwórz nowy łańcuch klikając przycisk New String.

3 W oknie, które się pojawi, zobaczysz łańcuchy zdefiniowane już na etapie tworzenia szkieletu aplikacji. Jest wśród nich hello_world. Utwórz nowy łańcuch klikając przycisk New String. Pierwsze pole służy do wprowadzenia tekstu, drugie do zdefiniowania nazwy łańcucha. Po naciśnięciu przycisku OK w oknie zasobów aplikacji (Resource Chooser) zobaczysz nowo utworzony łańcuch infonazwisko. Łańcuch ten jest zaznaczony tak, że po kliknięciu OK zostanie

Pierwsze pole służy do wprowadzenia tekstu, drugie do zdefiniowania nazwy łańcucha.

4 on skojarzony z edytowanym polem tekstowym. Po zaznaczeniu pola tekstowego (na co wskazuje widoczna na rysunku niebieska ramka), wielkość czcionki wyświetlanego tekstu można zmienić edytując własność TextSize w oknie własności (Properties). W następnym kroku zmienimy szerokość pola tekstowego, które domyślnie równe jest szerokości wyświetlanego tekstu (widoczna na rysunku opcja Wrap Content). Po kliknięciu prawym przyciskiem myszy na pole tekstowe, wybierz opcję Layout Width, a następnie Match Parent. W ten sposób szerokość okna tekstowego będzie taka sama jak szerokość okna aplikacji.

własność TextSize w oknie własności (Properties).

5 W tle poprzedniego rysunku, w oknie własności (Properties) widoczna jest opcja Gravity, która jest zaznaczona ciemnoniebieskim paskiem. Po kliknięciu przycisku z trzema kropeczkami wybierz opcję center_horizontal w ten sposób wyśrodkujesz napis. Zapisz projekt! Rób to systematycznie, niektóre zmiany są w widoczne w Eclipse dopiero po zapisaniu projektu.

Po kliknięciu przycisku z trzema kropeczkami wybierz opcję center_horizontal w ten

6 Oto plik activity_enstein.xml po modyfikacjach interfejsu użytkownika: Najwyższy czas na uruchomienie aplikacji!

7 Po przetestowaniu aplikacji, skopiuj w Eksploratorze Windows plik young.png i wklej go do katalogu drawable-hdpi, tak jak pokazano to na poniższym rysunku. Powtórz tę czynność dla pliku old.png.

8 Jeżeli poprawnie skopiowałeś pliki to zobaczysz je w zasobach aplikacji. Na palecie komponentów otwórz katalog Images & Media i przeciągnij komponent ImageView na okno aplikacji. Środowisko poprosi cię o skojarzenie z komponentem dostępnego w zasobach pliku graficznego. Wybierz zdjęcie młodego Einsteina.

9 Wyśrodkowanie zdjęcia następuje po wybraniu opcji LayoutWidth->Match Parent z menu kontekstowego (prawy przycisk myszy) komponentu ImageView. Ponownie otwórz menu kontekstowe i za pomocą opcji Edit ID zmień nazwę komponentu na zdjecie.

Po zakończeniu edycji komponentu ImageView i zapisaniu zmian, plik powinien wyglądać w następujący sposób. activity_enstein.xml W kolejnym kroku dodamy dwa położone obok siebie przyciski.

10 Po zakończeniu edycji komponentu ImageView i zapisaniu zmian, plik powinien wyglądać w następujący sposób. activity_enstein.xml W kolejnym kroku dodamy dwa położone obok siebie przyciski. Jeden będzie służył do do zmiany wyświetlanego zdjęcia, drugi do zakończenia działania aplikacji. Zacznijmy od wstawienia nowego menedżera układu. W tym celu z katalogu Layouts okna Palette przeciągnij Linear Layout(Horizontal) do okna Outline i upuść go poniżej komponentu zdjęcie. Możliwość upuszczenia sygnalizuje pojawienie się poziomej czarnej linii.

Jeden będzie służył do do zmiany wyświetlanego zdjęcia, drugi do zakończenia działania aplikacji.

11 Dodany menedżer jest widoczny zarówno w oknie Graphical Layout jak i oknie Outline. Dwukrotnie przeciągnij komponent Button (znajduje się on katalogu Form Widgets okna Palette) do właśnie dodanego menedżera.

12 Widok środowiska po dodaniu przycisków ilustruje poniższy rysunek. Za pomocą menu kontekstowego dodanych przycisków (Edit ID) zmień ich nazwę na Zmien i Koniec. Następnie zdefiniuj łańcuchy infozmien i infokoniec i użyj ich jako etykiet dodanych przycisków, tak jak w przypadku pola tekstowego na początku projektu.

13 Upewnij się, że przycisk Koniec jest zaznaczony a następnie kliknij Distribute Weights Evenly. Zapisz zmiany! Interfejs użytkownika powinien wyglądać w następujący sposób

14 Rozwiń katalog src i wprowadź zmiany do pliku Einstein.java.

15 W celu obsługi przycisków musimy zaimplementować interfejs OnClickListener. W trakcie dodawania pakietów pamiętaj abyś dodał wskazany na poniższym rysunku pakiet.

16 Dodatek 1

Podobne dokumenty

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

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