Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Transkrypt

1

2 Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Michał Mrowiec Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Fotografia na okładce została wykorzystana za zgodą Shutterstock.com Wydawnictwo HELION ul. Kościuszki 1c, GLIWICE tel , helion@helion.pl WWW: (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Kody źródłowe wybranych przykładów dostępne są pod adresem: ftp://ftp.helion.pl/przyklady/andrpa.zip ISBN: Copyright Helion 2013 Printed in Poland. Oceń książkę Księgarnia internetowa Lubię to!» Nasza społeczność

3 Spis tre ci Wst p... 5 Rozdzia 1. Instalowanie rodowiska programistycznego... 9 Instalowanie Android SDK, Javy i edytora Eclipse... 9 Konfiguracja rodowiska programistycznego Eclipse Pierwsza aplikacja Rozdzia 2. Wygl d pierwszej aplikacji Katalog res zasoby aplikacji Layouts, czyli wygl dy aplikacji LinearLayout obiekty u o one obok siebie TableLayout obiekty u o one w oczkach sieci AbsoluteLayout roz o enie swobodne Rozdzia 3. Graficzne zasoby aplikacji Struktura katalogów drawable Emulatory o ekranach ró nej jako ci Bitmap, czyli mapa bitowa Mapa bitowa opakowana w atrybuty XML Wiele map bitowych w jednym opakowaniu XML Rozdzia 4. Wi cej o wygl dzie aplikacji ScrollView ekran z gumy Kolory Shapes kszta ty Rozdzia 5. Programowanie czas zacz! Przycisk Koniec Zegarek dla ubogich Kó ko i krzy yk, a przy okazji definiowanie stylów Rozdzia 6. Efekty specjalne Przygotowanie animacji Przygotowanie interfejsu u ytkownika Uruchomienie animacji Animacja innych komponentów czenie animacji Animacja poklatkowa map bitowych

4 4 Android. Podstawy tworzenia aplikacji Rozdzia 7. W asne komponenty graficzne Komponenty rozszerzaj bazowy superkomponent View Przegl d mo liwo ci graficznych Rozdzia 8. Mapy bitowe Mapa bitowa zaczerpni ta z zasobów aplikacji Rysowanie na mapie bitowej zaczerpni tej z zasobów aplikacji Przekszta cenie mapy bitowej technik piksel po pikselu Uzyskanie nowej, czystej mapy bitowej Rozdzia 9. W tek w drugim planie Klasa AsyncTask i rysowanie w drugim planie ci ganie danych z internetu Rozdzia 10. Wi cej ekranów dla aplikacji Okno g ówne Ta sama aplikacja napisana lepiej, bo krócej S owniczek Skorowidz

5 Rozdzia 3. Graficzne zasoby aplikacji W tym rozdziale omówi dok adniej, jakie zasoby mo na przechowywa w podfolderach res/drawable. Materia y do tego projektu znajduj si w pliku o nazwie Rozdzial_3. Struktura katalogów drawable Ju wiesz, e wygl du aplikacji w Androidzie raczej si nie programuje (chocia mo na), ale opisuje si go w specjalny sposób, umieszczaj c odpowiednie informacje w odpowiednich folderach i plikach. Folder o nazwie res (skrót od ang. wyrazu resources zasoby) jest tym miejscem, w którym umieszczasz swoje zasoby. Folder ten ma dalsz struktur podfolderów i teraz omówi podfoldery o nazwach drawable, co nale y przet umaczy jako elementy rysowalne. Podfoldery drawable zawieraj elementy graficzne aplikacji, a tak e pewne ich opisy, jakby opakowania, przygotowane w j zyku XML. Rozpocznij nowy projekt. Wybierz opcj File, a dalej New i Android Application Project. Okre l nazw aplikacji (nazwa ta b dzie widoczna w Twoim telefonie), nazw projektu w rodowisku Eclipse, wymy l nazw dla pakietu Javy, najlepiej stosuj c zasad odwracania kolejno ci wyrazów z nazwy domeny internetowej. Je li zainstalowa e kilka ró nych wersji Androida, wska jedn z nich jako zalecan dla Twojej aplikacji. Okre l te minimalne parametry platformy, rozwojowo najstarszej i najubo szej, dla których Twoja aplikacja powinna dzia a. rodowisko Eclipse utworzy rodzin folderów. W tym rozdziale najwa niejsze b d dla Ciebie foldery drawable, znajduj ce si w folderze res. Foldery drawable zawieraj elementy graficzne aplikacji, przygotowane do wy wietlania na ró nej klasy urz dzeniach. Jeszcze niedawno by y trzy foldery drawable, teraz jest ich wi cej, bo pojawiaj si coraz lepsze urz dzenia mobilne. Postfiks -ldpi nale- y rozwin jako low dot per inch, co w tym wypadku oznacza urz dzenie o ma ej

6 40 Android. Podstawy tworzenia aplikacji g sto ci pikseli. W folderze drawable-ldpi umie cisz wersje grafik dla kiepskich ekraników. Grafiki te powinny by mniejsze, ale tak e mog zawiera mniej detali. Katalogi z postfiksami -mdpi, -hdpi i -xhdpi zawieraj zasadniczo te same grafiki, ale coraz wi ksze, staranniejsze, z wi ksz ilo ci detali. Widzisz wi c, jak cie k poszli twórcy systemu. Zamiast zastosowa algorytm dopasowywania grafiki do rzeczywistego rozmiaru ekranu, dali programi cie szans, aby sam przygotowa kilka wersji rozwi za graficznych. Takie posuni cie umo liwia przygotowanie równie pi knych wersji aplikacji na malutki telefon i na olbrzymi tablet. Rodzina folderów drawable powinna zawiera zasoby o tych samych nazwach. System przeanalizuje dane o jako ci ekranu urz dzenia mobilnego i sam ustali, do którego folderu drawable skierowa program po zasób o konkretnej nazwie (rysunek 3.1). Rysunek 3.1. Rodzina folderów drawable Nie ma dok adnych wytycznych, jak sporz dza i dzieli zasoby na poszczególne foldery drawable. Przyjmuje si, e je li dla urz dzenia typowego, czyli redniego -mldpi, przygotuje si map bitow o boku np. 400 pikseli, to dla urz dzenia ma ego -ldpi trzeba b dzie j zmniejszy do 75 procent, dla urz dzenia du ego -hdpi powi kszy do 150 procent, a dla ekstradu ego -xhdpi do 200 procent. Oprócz samego zmieniania rozmiarów mo esz r cznie zadba o wi cej albo mniej szczegó ów. To jest ju praca artystyczna.

7 Rozdzia 3. Graficzne zasoby aplikacji 41 Emulatory o ekranach ró nej jako ci eby móc testowa zachowanie si programu na urz dzeniach ró nej klasy, nale y zdefiniowa kilka wirtualnych AVD (Android Virtual Device), ró ni cych si klas ekranów. Prawdopodobnie pierwsze urz dzenie zdefiniowa e jako default, czyli domy lne, teraz wi c postaraj si o wyra nie lepszy albo gorszy telefon (rysunek 3.2). W tym celu kliknij ikonk mened era urz dze i stwórz sobie wirtualne urz dzenie z ma ym i du ym ekranem. Podczas opisywania typu nowego urz dzenia zwró uwag na techniczne oznaczenia rodzajów wy wietlaczy. Oznaczenie najgorszego ekranu to QVGA, lepszego to HVGA i wreszcie najlepszego WVGA (rysunek 3.3). Na rysunku 3.4 wida ró nice mi dzy najgorszym a najlepszym ekranem. Rysunek 3.2. Tworzenie wirtualnego urz dzenia z ma ym i du ym ekranem

8 42 Android. Podstawy tworzenia aplikacji Rysunek 3.3. Nadanie nazwy nowemu urz dzeniu, wybór platformy i co najwa niejsze okre lenie jej ekranu Rysunek 3.4. Urz dzenie QVGA na tle urz dzenia WVGA800

9 Rozdzia 3. Graficzne zasoby aplikacji 43 Bitmap, czyli mapa bitowa Po tych czynno ciach technicznych spróbujesz wreszcie pracy z grafikami, których jako ci s dopasowane do mo liwo ci technicznych urz dzenia. Znajd jaki obrazek, którego wi kszy bok ma rozmiar ok. 400 pikseli. B dzie to podstawowa wersja grafiki, któr umie cisz w katalogu z postfiksem -mdpi. Za pomoc edytora grafiki np. IrfanView przygotuj wersj -ldpi tego obrazka o boku 300 pikseli i wersj -hdpi o boku 500 pikseli. Mo esz przygotowa jeszcze wersj ekstra -xhdpi dla superurz dze, ale zalecany tutaj, troch przestarza y, cho ci gle najpopularniejszy Android 2.2 nie obs u y takiego standardu. Wersje obrazka nale y jako oznaczy, np. nadrukowuj c na nie w programie graficznym napisy ldpi, mdpi, hdpi (rysunek 3.5). Dzi ki temu b dziesz móg ledzi, jak konkretne urz dzenie wybiera sobie grafik do wy wietlenia. Rysunek 3.5. Obrazki o identycznych nazwach, ale ró ni ce si rozmiarem (w proporcjach mniej wi cej 0,75:1:1,5) Przygotowane obrazy nale y zapisa pod t sam nazw, ale w ró nych folderach drawable, koniecznie zwracaj c uwag, aby obrazek o odpowiedniej jako ci znalaz si w odpowiednim folderze (rysunek 3.6). Po rozmieszczeniu plików w folderach rodowisko Eclipse mo e pocz tkowo ich nie dostrzec wybierz z menu File opcj Refresh (od wie widok). Zapami taj, bo jest to wa ne podczas przygotowywania zasobów aplikacji. Gdy teraz program przywo a obrazek o nazwie np. motor1.jpg, system Android sprawdzi, jakim ekranem dysponuje urz dzenie, skieruje si do odpowiedniego folderu drawable i wyci gnie stamt d odpowiedni wersj pliku motor.1. Sprawd to.

10 44 Android. Podstawy tworzenia aplikacji Rysunek 3.6. Rodzina folderów drawable zawiera pliki o takich samych nazwach, ale ró ni ce si jako ci i przeznaczone na ró ne typy wy wietlaczy urz dze mobilnych Zbuduj najprostsz aplikacj, która wy wietli jeden z obrazków. Tak jak poprzednio, zasadniczym polem bitwy jest g ówny plik wygl du, umieszczony w folderach res/layout. Je li nie zmienia e nazw w kreatorze nowego projektu, plik ten powinien si nazywa activity_main.xml. Kliknij go dwukrotnie, otwieraj c go do edycji. Na dole edytora wybierz edycj wizualn (nie za zwyk, tekstow ). Je li ju zaczyna Ci denerwowa napis Hello World, reprezentowany przez komponent TextView, kliknij go prawym klawiszem myszki i usu z aplikacji. W zak adce Images & Media znajd komponent ImageView i przeci gnij go w pole wy- wietlacza urz dzenia mobilnego. Je li umie cisz go dok adnie w rogu pola, system od razu ustawi w a ciwo ci alignparent... (wyrównaj w dost pnej przestrzeni tutaj: w przestrzeni ca ego ekranu). Mo esz umie ci ImageView w inny sposób wtedy system zaproponuje w a ciwo ci center... albo margin... (rysunek 3.7). Po umieszczeniu komponentu w polu ekranu prawdopodobnie automatycznie pojawi si Resource Chooser (wybieranie zasobu). Je li zaznaczono Project Resources (a nie System Resources przebogate zasoby w asne Androida), okienko Choosera zajrzy do Twoich katalogów drawable i zaproponuje wybór którego obrazka (rysunek 3.8). Je li post powa e tak, jak pokaza em to na kilku ostatnich rysunkach, plik wygl du aplikacji activity_main.xml powinien mie nast puj c, Zapewne ju Ci znan tre (widoczn po wybraniu odpowiedniej zak adki pod edytorkiem wizualnym):

11 Rozdzia 3. Graficzne zasoby aplikacji 45 Rysunek 3.7. Praca na zak adce Images & Media Rysunek 3.8. Wybieranie zasobu z katalogów drawable <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:src="@drawable/motor1" /> </RelativeLayout>

12 46 Android. Podstawy tworzenia aplikacji W tej aplikacji obowi zuje nieomawiany tutaj rozk ad RelativeLayout (okre laj po o enia kolejnych komponentów przez odwo ania do innych, wcze niej rozlokowanych). Rozk ad ten ma jedn szczególn cech wszystkie komponenty powinny by nazwane, tak aby inne mog y si do nich odwo ywa, np. wskazuj c chc by wyrównany do lewej strony tamtego buttona. W nast pnym kroku dodasz wi cej komponentów i zobaczysz, jak pracuje przyjemny w edycji RelativeLayout. Nazwa naszego obrazka brzmi imageview1 i okre la j linia: android:id="@+id/imageview1" Od tej pory b dziesz nazywa wszystkie komponenty, czego w zasadzie wymaga rozk ad RelativeLayout i czego bezwzgl dnie b d wymaga y techniki programowania w Javie, do których nieuchronnie si zbli asz. Rozmiary komponentu w omawianym przypadku s zdefiniowane frazami wrap_content, czyli otaczaj swoj zawarto albo b d tak du y, jak twoja zawarto w tym przypadku mapka bitowa z motocyklem. Z kolei po o enie komponentu definiuj linie: android:layout_alignparentleft="true" android:layout_alignparenttop="true" które nale y czyta jako: b d w lewym górnym rogu swego rodzica, czyli komponentu RelativeLayout, który wype nia ca y dost pny dla aplikacji ekran. Najwa niejsz lini jest po czenie komponentu o nazwie imageview1 z map bitow motor1.jpg znajduj c si w folderach drawable: android:src="@drawable/motor1" /> Zobacz, jak wygl da omawiana aplikacja na ekraniku AVD, czyli wirtualnej maszyny Androida. Pami taj jednak, e jest kilka maszyn AVD. Jak wybra konkretn? W menu Run znajdziesz polecenie Run Configurations i tam wska maszyn, na której uruchomisz program (rysunek 3.9). Na zak adce Target (na czym uruchomi ) powiniene znale swoje urz dzenia AVD i zaznaczy jedno z nich. Teraz pozosta o sprawdzi dzia anie programu (rysunek 3.10). Wszystko gra! Po uruchomieniu programu na dwóch ró nych urz dzeniach dostajesz t sam fotografi motocykla. Czy na pewno t sam? Napis w lewym górnym rogu odkrywa tajemnic mapy bitowe zosta y pobrane z ró nych folderów drawable! By mo e zauwa y e, e przy komponencie obrazka albo przy jego opisie w pliku XML znajduje si malutki ó ty trójk cik uwagi, któr chce Ci podpowiedzie kompilator: Missing contentdescription attribute.on image (zapomnia e o parametrze contentdescription) rysunek Ka dy element wizualny powinien by opisany, a opis ten jest przeznaczony do automatycznego odczytywania syntetycznym g osem dla kogo, kto nie mo e zobaczy motocykla, np. dla osoby niewidomej. W dalszej cz ci nie b dziesz dodawa atrybutu contentdescription.

13 Rozdzia 3. Graficzne zasoby aplikacji 47 Rysunek 3.9. Menu Run i dalej Run Configurations pozwala opisa szczegó y uruchamiania aplikacji Rysunek Dwa ró ne urz dzenia i taka sama fotografia? Napis w lewym górnym rogu wskazuje, e mapy bitowe zosta y pobrane z ró nych folderów drawable

14 48 Android. Podstawy tworzenia aplikacji Rysunek Trójk cik uwagi, któr podpowiada kompilator Mapa bitowa opakowana w atrybuty XML To, co zrobi e do tej pory z map bitow, mo na nazwa wy wietleniem surowego obrazka. By o to dobre i zazwyczaj jest wystarczaj ce. Jednak mo na pój o krok dalej, mianowicie: w folderach drawable, gdzie obok obrazków, umie ci informacj w rodzaju: zrób z tego kafelki, zastosuj antyaliasing, czyli wyg adzanie, zawsze rozci gaj, gdy jest miejsce albo przycinaj, gdy trzeba. Jest to jakby wst pna obróbka surowej mapy bitowej za pomoc samych opisów, czyli jeszcze bez programowania w Javie. eby zapoznoa si t technologi, sporz d bitmapowe t o ekranu. Przygotuj najpierw odpowiedni kafelek w wersjach -ldpi, -mdpi i -hdpi (tak naprawd mo e to by dowolny, ma y obrazek) i poszczególne wersje umie w katalogach drawable. Potem przygotuj plik XML, który dodatkowo opisze nasz map bitow. Plik taki powinien znale si w jednym, wspólnym dla wszystkich maszyn folderze drawable. Kreator tego pliku opakowania na map bitow automatycznie utworzy odpowiedni folder. Jak doda zasób XML do folderów drawable? Kliknij prawym klawiszem którykolwiek folder drawable, wybierz opcj New i dalej Android XML File (rysunek 3.12). W kreatorze pliku XML dokonaj kilku zaznacze (albo gdy zostanie ju utworzony zmie w pliku kilka rzeczy r cznie). Wpisz nazw nowego zasobu, którym b dzie teraz plik XML. Typem zasobu niech b dzie bitmap (rysunek 3.13).

15 Rozdzia 3. Graficzne zasoby aplikacji 49 Rysunek Dodawanie zasobu XML do folderów drawable Rysunek Tworzenie nazwy i wybór typu nowego zasobu XML Plik XML nie zosta wstawiony do znanej ju Ci rodziny folderów drawable-..., ale do nowego, wspólnego folderu o nazwie po prostu drawable. Jak si pewnie domy lasz, folder drawable zawiera zasoby graficzne wspólne dla wszystkich maszyn, niezale nie od kategorii ich wy wietlaczy. Nowy zasób b dzie wspólny dla wszystkich maszyn, ale nie do ko ca. Oka e si (jak znów nietrudno si domy li ), e ostateczna wersja obrazka nadal b dzie wyjmowana z odpowiedniego folderu. Wspólne jest opakowanie XML, ale prawdziwa fotografia nadal ma wiele wersji.

16 50 Android. Podstawy tworzenia aplikacji Przyjrzyj si wi c plikowi XML opakowuj cemu mapk bitow. Najpierw, po zako czeniu pracy kreatora, plik ten wygl da tak: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android=" > </bitmap> Do wn trza tagu <bitmap> wpisz najwa niejszy i bezwzgl dnie konieczny atrybut, którego warto ci jest nazwa opakowywanej mapki bitowej, tutaj kafelki: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android=" android:src="@drawable/kafelki"> </bitmap> Zatem zdefiniowa e zasób nowego typu jest to plik XML opakowuj cy prawdziwy zasób graficzny. Teraz go wykorzystasz jako t o aplikacji (rysunek 3.14). Niech g ówny plik wygl du, o nazwie prawdopodobnie activity_main.xml (tak nazw nadaje mu na samym pocz tku kreator nowej aplikacji), ma nast puj c tre, napisan r cznie albo zbudowan w edytorze wizualnym: <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/kafelki_xml"> <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:src="@drawable/motor1" /> </RelativeLayout> Jest to w zasadzie to samo, co by o poprzednio, zmieniono tylko sposób u o enia obrazka na ekranie teraz nie znajduje si on w lewym górnym rogu, ale na rodku. I co najwa niejsze, pojawi a si linia: android:background="@drawable/kafelki_xml"> Podobn fraz ju kiedy stosowa e, nadaj c kolor pod o u aplikacji: android:background="#000080"> Nie by oby sensu opakowywa w taki sposób plików graficznych, gdyby po drodze nie pojawi y si nowe mo liwo ci. Uzupe nij plik XML o atrybut gravity (czyli o informacj w któr stron obrazek ci y, gdy ma na ekranie miejsce): <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android=" android:src="@drawable/kafelki" android:gravity="fill"> </bitmap>

17 Rozdzia 3. Graficzne zasoby aplikacji 51 Rysunek Mapa bitowa zosta a opakowana w plik XML, który z kolei zosta u yty do budowy t a aplikacji Atrybut gravity mo e przyjmowa do oczywiste warto ci: top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill (jest to warto domy lna, ustawiana, gdy nie u yjesz atrybutu gravity), clip_vertical, clip_horizontal. Jeszcze ciekawszym atrybutem jest tilemode. Atrybut ten nie mo e by u yty razem z poprzednim gravity czyli stosujesz albo jeden, albo drugi: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android=" android:src="@drawable/kafelki" android:tilemode="repeat"> </bitmap> Atrybut tilemode oprócz warto ci repeat mo e przyjmowa stany clamp (nie kafelkuj, tylko rozci gaj kraw dzie) i mirror (kafelkuj, ale lustrzanie obracaj c co drugie rz dy i wiersze kafelków). Oprócz atrybutów gravity (jak u o y obrazek na ekranie) oraz tilemode (jak zbudowa kafelki z obrazka) masz do dyspozycji trzy atrybuty (rysunek 3.15) definiuj ce jako obrazu i przyjmuj ce warto ci true albo false: android:antialias (wyg adzanie), android:dither (poprawianie palety kolorów) i android:filter (poprawianie obrazu przy ciskaniu albo rozci ganiu mapy bitowej).

18 52 Android. Podstawy tworzenia aplikacji Rysunek Przy opakowywaniu pliku graficznegomo na zastosowa ró ne atrybuty (gravity, tilemode, android:antialias, android:dither, android:filter) Wiele map bitowych w jednym opakowaniu XML A je li chcia by mie przycisk, na którym znajduje si zmieniaj ca si mapa bitowa: inna, gdy myszka wisi nad przyciskiem, inna, gdy go klika, inna, gdy go opuszcza? Zagadnienie to da si zrealizowa bez programowania, za pomoc opisów w odpowiednich plikach XML. Gdyby chcia poczyta o tym wi cej, wpisz w Google frazy Android State List (lista stanów). Zacznij od przygotowania prawdziwych zasobów, czyli teraz serii mapek bitowych, przedstawiaj cych np. rybk w trzech ró nych kolorach. Potem przygotuj t seri rybek w ró nych rozmiarach i, by mo e, ró nych jako ciach, przeznaczonych na urz dzenia o ró nej jako ci wy wietlaczy (rysunek 3.16). Te pliki tak jak poprzednio umie w folderach drawable-ldpi, drawable-mdpi itd. W zale no ci od stanu przycisku (zaraz odpowiedni przycisk zostanie wprowadzony do gry) system Android umie ci na nim inn wersj mapki bitowej. Powiniene te przygotowa pomniejszone i powi kszone wersje obrazków i porozmieszcza je w folderach drawable-ldpi, drawable-mdpi i drawable-hdpi.

19 Rozdzia 3. Graficzne zasoby aplikacji 53 Rysunek Przygotowanie obrazka o boku d ugo ci kilkuset pikseli i ró nej kolorystyce albo ró nicy dotycz cej jakiego innego czytelnego szczegó u Maj c w folderach drawable-... seri rybek o ró nych kolorach, mo esz przyst pi do opisywania Listy stanów. Kliknij prawym przyciskiem myszki folder drawable i z pojawiaj cego si menu wybierz New i dalej Android XML File, czyli plik XML (rysunek 3.17). Przed chwil w takim pliku opisywa e jedn mapk bitow, teraz opiszesz ca y ich stos. Rysunek Nowy plik XML, opisuj cy ca y stos mapek bitowych Wykorzystaj pojawiaj cy si kreator pliku XML, cho móg by przygotowa odpowiedni plik ca kowicie r cznie. Podaj nazw pliku, oznacz, e g ówny element ma by typu Selector i zako cz przyciskiem Finish (rysunek 3.18). W folderze drawable powinien pojawi si nowy zasób plik stos_rybek_xml.

20 54 Android. Podstawy tworzenia aplikacji Rysunek Tworzenie nowego zasobu XML plik stos_rybek_xml Jak zwykle dwa razy kliknij nowy plik, aby otworzy go do edycji. Uzupe nij jego tre nast puj co: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" > <item android:state_pressed="true" /> <item android:state_focused="true" /> <item /> </selector> Do wn trza tagu <selector> wpisz kilka tagów <item>, odpowiadaj cych ró nym stanom przycisku, który za chwil zaimplementujesz. Gdy przycisk jest w stanie pressed, czyli naci ni ty, powinna si wy wietla mapka o nazwie ryba_r (rybka o czerwonawym odcieniu). Gdy przycisk jest w stanie focused, czyli gotowy do naci ni cia ryba_b. Gdy z przyciskiem nic si nie dzieje albo co si dzieje, ale tego tutaj nie opisa- em, wy wietli si wersja zapisana jako ryba. Jest to tzw. normalny stan przycisku, który opisuje si zawsze za pomoc ostatniego tagu <item> w powy szym wyliczeniu stanów. Nale y jeszcze zaimplementowa sam przycisk oraz podpi do niego ten oryginalny sposób kolorowania jego powierzchni. G ówny plik wygl du z folderu layout powinien mie nast puj c zawarto :

21 Rozdzia 3. Graficzne zasoby aplikacji 55 Rysunek Do poprzedniej aplikacji nale y doda przycisk i opracowa jego w a ciwo background (t o). Niech t em b dzie nowy zasób XML zwany List stanów <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/kafelki_xml" > <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:layout_margintop="50dp" android:src="@drawable/motor3" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageview1" android:layout_centerhorizontal="true" android:background="@drawable/stos_rybek_xml"/> </RelativeLayout> Du a cz tego pliku jest Ci znana. Jest tu rozk ad relatywny, czyli kolejne komponenty s uk adane wzgl dem poprzednich, u o onych wcze niej. Rzeczywi cie, komponent Button le y pod komponentem ImageView: android:layout_below="@+id/imageview1" Natomiast stos obrazków zagadnienie opisane na kilku ostatnich stronach pojawia si w linii opisuj cej t o przycisku: android:background="@drawable/stos_rybek_xml"/> Jest to odwo anie do w a nie stworzonego zasobu XML, umieszczonego w folderze drawable.

22 56 Android. Podstawy tworzenia aplikacji Pora na podsumowanie. Znów powtórzy si nast puj cy schemat: gdzie w pierwotnych folderach drawable-... znajduj si prawdziwe mapy bitowe, ró ni ce si rozmiarami, mo e tak e jako ci grafiki. Ró nice mi dzy nimi konieczne s z tego wzgl du, e na lepsze urz dzenia przygotowuje si inn grafik (grafika, która ma wi cej detali i szczegó ów) ni na gorsze. Jakby nad surowymi mapami bitowymi znajduj si pliki XML definiuj ce specjalne w a ciwo ci rysunku. Pliki te znajduj si we wspólnym dla wszystkich urz dze katalogu drawable. Dopiero te pliki wywo ywane s w g ównym pliku wygl du. Tak pojawi y si wcze niej kafelki, a teraz aktywny przycisk zmieniaj cy swój rysunek, gdy klikniesz go myszk (rysunek 3.20). Rysunek T em przycisku jest zasób XML, zwany State List (lista stanów). Ka dy stan to jaki inny obrazek klikni cie czy zatrzymanie si na obrazku zmienia jego wygl d

23 Skorowidz A AbsoluteLayout, 32, 34 ADT, Android Development Tools, 12 akcja, Patrz metoda aktywno ci ci gaj ce dane, 206 aktywno poboczna, 208 wtórna, 207 algorytm klasy publicznej, 81 rysowania, 135 Android SDK, 9, 211 Android SDK Manager, 13, 211 animacja, 98 czenie efektów, 110 poklatkowa, 113 przycisku, 108 antyaliasing, 130, 135 aparat graficzny, 188 aplikacja z ekranami, 191 atrybut angle, 68 contentdescription, 46 gravity, 50 tilemode, 51 atrybuty XML, 48 AVD, Android Virtual Device, 14, 41, 211 B bitmapy prywatne, 161 blokowanie komponentu, 163 przycisku, 165, 171 b d, 188 b d w logice interfejsu, 164 budowanie interfejsu, 169 C czas trwania animacji, 102 czyszczenie ekranu, 162 D Dalvik, 9, 211 definiowanie efektów animacyjnych, 101 egzemplarza aparatu graficznego, 188 klasy w klasie, 176 przycisku, 79, 84 stylów, 87 t a, 66 d ugotrwa y proces, 168 dodawanie identyfikatora, 148 zasobu XML, 49 dokumentacja online Androida, 119 dost p do internetu, 208 do zmiennych, 119 dp, device independent pixel, 64, 211 drzewo plików projektu, 98 dynamiczne tworzenie obrazów, 161 dzia anie aktywno ci, 147 dziedziczenie, 125 E Eclipse, 9 Eclipse Plugin, 211 edytor Eclipse, 9 edytowanie pliku, 30, 67, 201 efekt, 97 rozmycia obrazu, 157 zamiany sk adowej koloru, 155 zanikania, 102 efekty animacyjne, 98 specjalne, 100 egzemplarz procesu, 176 ekran, 191 HVGA, 41 QVGA, 41 WVGA, 41 element resource, 92 shape, 89 elementy interfejsu, 25 emulator aplikacji, 18 o ekranach ró nej jako ci, 41 F fabryka map bitowych, 150, 187 film, 113, 116 folder, Patrz katalog format fotograficzny, 188 funkcja, Patrz metoda funkcje prywatne, 109

24 214 Android. Podstawy tworzenia aplikacji G g bia koloru, 151 gra w kó ko i krzy yk, 87 graficzne zasoby aplikacji, 39 IDE, 11, 212 identyfikator, 148 implementacja klasy, 82 importowanie pakietu, 81, 130 informacja o rozmiarach komponentu, 150 inicjowanie bitmapy, 161 zmiennej, 120 instalator Android SDK, 10 instalowanie Android SDK, 9 IDE Eclipse, 9, 12 Javy, 9 interfejs do ogl dania filmu, 116 u ytkownika, 103, 146 I J Java, 9 JDK, 212 jednostka dp, 64 K katalog bin, 17 drawable, 39, 49 layout, 22, 63 res, 17 21, 39 src, 17 values, 20, 62 klasa Activity, 106, 147, 171 Animation, 106 AnimationDrawable, 118 AsyncTask, 167, 173 BitmapFactory, 150 Bundle, 208 Calendar, 85 Canvas, 127, 152 Figura, 133 ImageView, 161 Intent, 200 MainActivity, 81 OdczytObrazka, 186, 205 Paint, 127 Proces, 172 RectF, 136 View, 106, 122, 134 klasy bazowe, 127, 133 implementacja, implements, 82 konstruktor, 124 kreator, 122 nazwa, 124, 198 rozszerzanie, extends, 82, 132, 171, 174 tworzenie, 122 klatki filmu, 113 klawisze Ctrl+Spacja, 68, 92, 99, 198 kolejno budowania interfejsu, 169 rozmieszczania elementów, 192 kolor, 61, 65 kolor piksela, 156 komponent Button, 59, 145 ImageView, 35, 103, 145, 194 ProgressBar, 177 RelativeLayout, 91 TableRow, 63 TextView, 71, 145 View, 122 komponenty blokowanie, 163 graficzne, 121 informacja o rozmiarach, 150 nazywanie, 71 po o enie, 137, Patrz tak e rozk ad tworzenie, 121 wizualne, 121 w asne, 121 wybieranie, 31 konfigurowanie Eclipse, konstruktor klasy, 124 bazowej, 125 potomnej, 125 kó ka, 129 kó ko i krzy yk, 87 kreator klasy, 122 nowego projektu, 78, 194 nowej aplikacji, 50 zasobu XML, 48, 100, 115 kszta ty, 66 L layout, 22, 58 AbsoluteLayout, 32, 34 LinearLayout, 24, 26 RelativeLayout, 70, 90, 158 TableLayout, 27, 58 LinearLayout, 24, 26 linia, 68 lista stanów, 53 lokalizacja oprogramowania, 12 pliku graficznego, 37 losowanie jednokrotne, 142 liczb, 131 pikseli, 157 czenie animacji, 110 klatek, 115 M manifest, 200 mapy bitowe, 43, 48, 145 inicjalizowanie, 161 operacje graficzne, 154 podgl d, 145 przekszta cenie, 154 rysowanie, 152 maszyna losuj ca Random, 131 wirtualna Dalvik, 9 metoda data_i_godzina(), 84 decoderesource(), 150 doinbackground(), 180 drawline(), 162 drawrect(), 163 erasecolor(), 163 execute(), 185 findviewbyid(), 86, 106, 148, 161 finish(), 81 getcontentdescription(), 141

25 Skorowidz 215 getinstance(), 85 getpixel(), 156 getstring(), 208 kliknieto(), 79, 95 kliknieto_kreuj(), 161 kliknieto_start(), 169 kliknij(), 148 losuj_dane(), 143 obracaj(), 106 oncreate(), 120, 171, 199 ondraw(), 126, 130, 134 onpostexecute(), 188 onpreexecute(), 176, 188 onprogressupdate(), 179 putextra(), 207 rgb(), 156 rysuj(), 152, 155 setargb(), 162 settext(), 86 start(), 118 startanimation(), 107 stop(), 118 stosuj_wszystko(), 112 super(), 125 metody abstrakcyjne, 198 finalne, 132 nadpisane, 127 prywatne, 109 N nadawanie nazwy plikowi.xml, 92 warto ci wspólnej, 64 nadpisywanie metody, 125 narz dzia Android SDK, 10 nawigacja mi dzy ekranami, 202 nazwa klasy, 124, 198 metody, 124, 198 pliku, 124 nazywanie komponentów, 71 pliku XML, 99 O obiekty u o one obok siebie, 24 w oczkach sieci, 27 obraz klasy fotograficznej, 188 obrazek, 145 obrót, 101, 109 obrót ekranu, 96 obs uga klikni, 105, 147, 192 wyj tków, 188 zdarzenia onclick, 95 oczyszczanie pami ci, 171 odczytywanie obrazka, 186 pliku, 185 od miecacz Javy, 171 od wie anie obrazka, 171 okno emulatora aplikacji, 18 kreatora klasy, 123 okr g y wska nik post pu, 194 okre lanie warto ci atrybutu, 140 opisywanie efektów specjalnych, 100 zasobów, 114 oprogramowanie ekranów, 202 osadzanie elementów, 83 P pakiet Eclipse Classic, 11 Javy, 10 piksel, 155 plik activity_main.xml, 58 AndroidManifest.xml, 183, 200 Figura.java, 133 MainActivity.java, 79, 117, 153, 206 strings.xml, 20, 25, 34 pliki class, 17 wygl du, 28, 79, 91, 104, 117, 138, 146, 159, 182, 196 podgl d mapy bitowej, 145 podpowied, 68, 92, 99, 198 pole tekstowe, 69, 86 polecenie Refresh, 114, 145 polimorfizm, 96, 148 po o enie komponentu, 137 postfiks hdpi, 40, 43 ldpi, 39 mdpi, 40 xhdpi, 40, 43 pozyskiwanie mapy bitowej, 154 proces, 167 proces ci gania, 182 projekcja filmu, 118 prostok t, 68 prototyp metody, 148, 174 przechwytywanie parametru, 208 przekszta canie mapy bitowej, 154 przesuni cie, 102, 110 przesuwanie ekranu, przezroczysto, 101 przycisk, 64 Koniec, 77 Button, 32, 194 Obrót, 107 przyciski animowanie, 98 blokowanie, 165, 171 definiowanie, 79, 84 rozmieszczanie, 93 wstawianie, 59 przypisywanie kolorów, 65 R RelativeLayout, 70, 90, 158 rozk ad AbsoluteLayout, 32, 34 LinearLayout, 24, 26 RelativeLayout, 70, 90, 158 TableLayout, 27, 58 roz o enie swobodne, 32 rozmiar komponentu, 149 obrazka, 43 rozmieszczanie przycisków, 93 elementów, 192 rozmycie obrazu, 157 rozszerzanie funkcjonalno ci, 82 klasy, 82, 132, 171, 174 rysowanie na ekranie, 134 na mapie bitowej, 152, 153 ramki, 188 w drugim planie, 167 w tle, 178 rzutowanie, 95

26 216 Android. Podstawy tworzenia aplikacji S ScrollView, 57 SDK Location, 12 Shapes, 66 silnik animacji, 119 skalowanie, 102 sk adowe koloru, 155 s owo kluczowe extends, 82 final, 132 implements, 82 super, 125, 127 stan urz dzenia, 180 struktura katalogów drawable, 39 strumie danych, 187 sufler, 68, 92, 99, 198 suwak przewijania, 60, 137 ci ganie danych z internetu, 181 rodowisko programistyczne, 9 T TableLayout, 27, 58 tag animation-list, 115 bitmap, 113 LinearLayout, 136 ScrollView, 58, 136 t o aplikacji, 66, 89 gradientowe, 90 TrueColor, 162 tworzenie AVD, 15 efektów, 97 ekranów, 191 ikony, 17, 36 klasy, 122 komponentów, 121 mapy bitowej, 157 nazwy, 49 pierwszej aplikacji, 15, 19 pliku, 62, 195 pliku XML, 99 wirtualnego urz dzenia, 41 zasobu XML, 54 typ Void, 180 nieokre lony, 173 typy wy wietlaczy, 41 U uk adanie obiektów, 24, 27 uruchamianie animacji, 105 aplikacji, 47 procesu w tle, 176, 178 projekcji, 118 urz dzenia AVD, 46 urz dzenie QVGA, 42 WVGA800, 42 ustalanie atrybutów figur, 130 ustawienia kursora, 67 W w tek g ówny, 167 poboczny, 167 wersja systemu Android, 14 wiruj ce kó ko, 182 wklejanie adresu internetowego, 185 w a ciwo Background, 65, 66 contentdescription, 138 Enabled, 163 src, 103 Style, 92 Visibility, 176 Workspace, 19, 212 wska nik post pu, 177, 194 wstawianie fraz XML, 67 przycisku, 59 wierszy, 63 wybór komponentu, 31 nazwy rysunku, 36 zasobu, 45 wygl d aplikacji, 19, 22, 57 ekranu g ównego, 194 tabelaryczny, 58 wyg adzanie grafiki, 130, 135 wyj tek, 80, 188 wy wietlacze, 41 wy wietlanie daty, 82 grafiki, 194, 203 obrazka, 161 zmian, 153 Z zak adka Images & Media, 45 zamiana sk adowej koloru, 155 zanikanie, 102 zarz dca systemów Android, 13 zasoby graficzne, 39, 113, 145 XML, 55 zdarzenie onclick, 95, 147 zegar, 82 zezwolenie na dost p do internetu, 208 zmienne prywatne, 166 typu Bitmap, 150

27

28