Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 3.i Graficzne zasoby aplikacji 41...

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 wykorzystanieani za związane z tym ewentualne naruszenie praw patentowych lub autorskich Autor oraz Wydawnictwo HELION nie ponoszą roacutewnież ż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 OlsztynObarek Pokoński Pazdrijowski Zaprucki

Fotografia na okładce została wykorzystana za zgodą Shutterstockcom

Wydawnictwo HELION ul Kościuszki 1c 44-100 GLIWICE tel 32 231 22 19 32 230 98 63 e-mail helionhelionpl WWW httphelionpl (księgarnia internetowa katalog książek)

Drogi Czytelniku Jeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropinieandrpaMożesz tam wpisać swoje uwagi spostrzeżenia recenzję

Kody źroacutedłowe wybranych przykładoacutew dostępne są pod adresemftpftphelionplprzykladyandrpazip

ISBN 978-83-246-7006-2

Copyright copy Helion 2013

Printed in Poland

bull Kup książkębull Poleć książkę bull Oceń książkę

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

Spis tre ciWst p 5

Rozdzia 1 Instalowanie rodowiska programistycznego 9Instalowanie Android SDK Javy i edytora Eclipse 9Konfiguracja rodowiska programistycznego Eclipse 11Pierwsza aplikacja 15

Rozdzia 2 Wygl d pierwszej aplikacji 19Katalog res mdash zasoby aplikacji 19Layouts czyli wygl dy aplikacji 22

LinearLayout mdash obiekty u o one obok siebie 24TableLayout mdash obiekty u o one w oczkach sieci 27AbsoluteLayout mdash roz o enie swobodne 32

Rozdzia 3 Graficzne zasoby aplikacji 39Struktura katalogoacutew drawable 39Emulatory o ekranach roacute nej jako ci 41Bitmap czyli mapa bitowa 43Mapa bitowa opakowana w atrybuty XML 48Wiele map bitowych w jednym opakowaniu XML 52

Rozdzia 4 Wi cej o wygl dzie aplikacji 57ScrollView mdash ekran z gumy 57Kolory 61Shapes mdash kszta ty 68

Rozdzia 5 Programowanie czas zacz 77Przycisk bdquoKoniecrdquo 77Zegarek dla ubogich 82Koacute ko i krzy yk a przy okazji definiowanie styloacutew 87

Rozdzia 6 Efekty specjalne 97Przygotowanie animacji 98Przygotowanie interfejsu u ytkownika 103Uruchomienie animacji 105Animacja innych komponentoacutew 108

czenie animacji 110Animacja poklatkowa map bitowych 113

Kup książkę Poleć książkę

4 Android Podstawy tworzenia aplikacji

Rozdzia 7 W asne komponenty graficzne 121Komponenty rozszerzaj bazowy superkomponent View 122Przegl d mo liwo ci graficznych 132

Rozdzia 8 Mapy bitowe 145Mapa bitowa zaczerpni ta z zasoboacutew aplikacji 145Rysowanie na mapie bitowej zaczerpni tej z zasoboacutew aplikacji 152Przekszta cenie mapy bitowej technik piksel po pikselu 154Uzyskanie nowej czystej mapy bitowej 156

Rozdzia 9 W tek w drugim planie 167Klasa AsyncTask i rysowanie w drugim planie 167

ci ganie danych z internetu 181

Rozdzia 10 Wi cej ekranoacutew dla aplikacji 191Okno g oacutewne 192Ta sama aplikacja napisana lepiej bo kroacutecej 205

S owniczek 211

Skorowidz 213


Rozdzia 3

Graficznezasoby aplikacji

W tym rozdziale omoacutewi dok adniej jakie zasoby mo na przechowywa w podfolderachresdrawable Materia y do tego projektu znajduj si w pliku o nazwie Rozdzial_3

Struktura katalogoacutew drawableJu wiesz e wygl du aplikacji w Androidzie raczej si nie programuje (chocia mo na)ale opisuje si go w specjalny sposoacuteb umieszczaj c odpowiednie informacje w odpo-wiednich folderach i plikach Folder o nazwie res (skroacutet od ang wyrazu resources mdashzasoby) jest tym miejscem w ktoacuterym umieszczasz swoje zasoby Folder ten ma dalszstruktur podfolderoacutew i teraz omoacutewi podfoldery o nazwach drawable co nale y prze-t umaczy jako bdquoelementy rysowalnerdquo Podfoldery drawable zawieraj elementy graficzneaplikacji 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 ProjectOkre l nazw aplikacji (nazwa ta b dzie widoczna w Twoim telefonie) nazw projektuw rodowisku Eclipse wymy l nazw dla pakietu Javy najlepiej stosuj c zasad od-wracania kolejno ci wyrazoacutew z nazwy domeny internetowej Je li zainstalowa e kilkaroacute nych wersji Androida wska jedn z nich jako zalecan dla Twojej aplikacji Okre lte minimalne parametry platformy rozwojowo najstarszej i najubo szej dla ktoacuterychTwoja aplikacja powinna dzia a

rodowisko Eclipse utworzy rodzin folderoacutew W tym rozdziale najwa niejsze b ddla Ciebie foldery drawable znajduj ce si w folderze res

Foldery drawable zawieraj elementy graficzne aplikacji przygotowane do wy wietla-nia na roacute nej klasy urz dzeniach Jeszcze niedawno by y trzy foldery drawable terazjest 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 bdquourz dzenie o ma ej



g sto ci pikselirdquo W folderze drawable-ldpi umie cisz wersje grafik dla kiepskichekranikoacutew Grafiki te powinny by mniejsze ale tak e mog zawiera mniej detali

Katalogi z postfiksami -mdpi -hdpi i -xhdpi zawieraj zasadniczo te same grafiki alecoraz wi ksze staranniejsze z wi ksz ilo ci detali

Widzisz wi c jak cie k poszli twoacutercy systemu Zamiast zastosowa algorytm do-pasowywania grafiki do rzeczywistego rozmiaru ekranu dali programi cie szans aby sam przygotowa kilka wersji rozwi za graficznych Takie posuni cie umo li-wia przygotowanie roacutewnie pi knych wersji aplikacji na malutki telefon i na olbrzymitablet

Rodzina folderoacutew drawable powinna zawiera zasoby o tych samych nazwach Systemprzeanalizuje dane o jako ci ekranu urz dzenia mobilnego i sam ustali do ktoacuteregofolderu drawable skierowa program po zasoacuteb o konkretnej nazwie (rysunek 31)

Rysunek 31Rodzina folderoacutewdrawable

Nie ma dok adnych wytycznych jak sporz dza i dzieli zasoby na poszczegoacutelne folderydrawable Przyjmuje si e je li dla urz dzenia typowego czyli redniego -mldpi przy-gotuje si map bitow o boku np 400 pikseli to dla urz dzenia ma ego -ldpi trzebab dzie j zmniejszy do 75 procent dla urz dzenia du ego -hdpi powi kszy do 150 pro-cent a dla ekstradu ego -xhdpi do 200 procent Oproacutecz samego zmieniania rozmiaroacutewmo esz bdquor cznierdquo zadba o wi cej albo mniej szczegoacute oacutew To jest ju praca artystyczna


Rozdzia 3 Graficzne zasoby aplikacji 41

Emulatory o ekranach roacute nej jako cieby moacutec testowa zachowanie si programu na urz dzeniach roacute nej klasy nale y zde-

finiowa kilka wirtualnych AVD (Android Virtual Device) roacute ni cych si klas ekra-noacutew Prawdopodobnie pierwsze urz dzenie zdefiniowa e jako default czyli domy l-ne teraz wi c postaraj si o wyra nie lepszy albo gorszy telefon (rysunek 32) W tymcelu kliknij ikonk mened era urz dze i stwoacuterz sobie wirtualne urz dzenie z ma ymi du ym ekranem

Podczas opisywania typu nowego urz dzenia zwroacute uwag na techniczne oznaczeniarodzajoacutew wy wietlaczy Oznaczenie najgorszego ekranu to QVGA lepszego to HVGAi wreszcie najlepszego WVGA (rysunek 33) Na rysunku 34 wida roacute nice mi dzynajgorszym a najlepszym ekranem

Rysunek 32 Tworzenie wirtualnego urz dzenia z ma ym i du ym ekranem



Rysunek 33Nadanie nazwy nowemuurz dzeniu wyboacuterplatformy i conajwa niejsze mdashokre lenie jej ekranu

Rysunek 34Urz dzenie QVGA na tleurz dzenia WVGA800



Bitmap czyli mapa bitowaPo tych czynno ciach technicznych sproacutebujesz wreszcie pracy z grafikami ktoacuterych ja-ko ci s dopasowane do mo liwo ci technicznych urz dzenia

Znajd jaki obrazek ktoacuterego wi kszy bok ma rozmiar ok 400 pikseli B dzie to pod-stawowa wersja grafiki ktoacuter umie cisz w katalogu z postfiksem -mdpi Za pomocedytora grafiki mdash np IrfanView mdash przygotuj wersj -ldpi tego obrazka o boku 300 pik-seli i wersj -hdpi o boku 500 pikseli Mo esz przygotowa jeszcze wersj ekstra -xhdpidla superurz dze ale zalecany tutaj troch przestarza y cho ci gle najpopularniejszyAndroid 22 nie obs u y takiego standardu

Wersje obrazka nale y jako oznaczy np nadrukowuj c na nie w programie graficz-nym napisy ldpi mdpi hdpi (rysunek 35) Dzi ki temu b dziesz moacuteg ledzi jak kon-kretne urz dzenie wybiera sobie grafik do wy wietlenia

Rysunek 35Obrazki o identycznychnazwach ale roacute ni cesi rozmiarem(w proporcjach mniejwi cej 075115)

Przygotowane obrazy nale y zapisa pod t sam nazw ale w roacute nych folderachdrawable koniecznie zwracaj c uwag aby obrazek o odpowiedniej jako ci znalazsi w odpowiednim folderze (rysunek 36) Po rozmieszczeniu plikoacutew w folderach ro-dowisko Eclipse mo e pocz tkowo ich nie dostrzec mdash wybierz z menu File opcj Refresh(od wie widok) Zapami taj bo jest to wa ne podczas przygotowywania zasoboacutewaplikacji

Gdy teraz program przywo a obrazek o nazwie np motor1jpg system Android spraw-dzi jakim ekranem dysponuje urz dzenie skieruje si do odpowiedniego folderudrawable i wyci gnie stamt d odpowiedni wersj pliku motor1 Sprawd to



Rysunek 36Rodzina folderoacutewdrawable zawiera plikio takich samych nazwachale roacute ni ce si jako cii przeznaczone na roacute netypy wy wietlaczyurz dze mobilnych

Zbuduj najprostsz aplikacj ktoacutera wy wietli jeden z obrazkoacutew Tak jak poprzednio za-sadniczym bdquopolem bitwyrdquo jest g oacutewny plik wygl du umieszczony w folderach reslayoutJe li nie zmienia e nazw w kreatorze nowego projektu plik ten powinien si nazywaactivity_mainxml Kliknij go dwukrotnie otwieraj c go do edycji Na dole edytora wy-bierz edycj wizualn (nie za zwyk tekstow )

Je li ju zaczyna Ci denerwowa napis bdquoHello Worldrdquo reprezentowany przez kompo-nent TextView kliknij go prawym klawiszem myszki i usu z aplikacji

W zak adce Images amp 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 (wyroacutewnaj w dost pnej przestrzeni mdash tutajw przestrzeni ca ego ekranu) Mo esz umie ci ImageView w inny sposoacuteb mdash wtedysystem zaproponuje w a ciwo ci center albo margin (rysunek 37)

Po umieszczeniu komponentu w polu ekranu prawdopodobnie automatycznie pojawisi Resource Chooser (wybieranie zasobu) Je li zaznaczono Project Resources (a nieSystem Resources mdash przebogate zasoby w asne Androida) okienko Choosera zajrzy doTwoich katalogoacutew drawable i zaproponuje wyboacuter ktoacuterego obrazka (rysunek 38)

Je li post powa e tak jak pokaza em to na kilku ostatnich rysunkach plik wygl du apli-kacji activity_mainxml powinien mie nast puj c Zapewne ju Ci znan tre (wi-doczn po wybraniu odpowiedniej zak adki pod edytorkiem wizualnym)



Rysunek 37Praca na zak adceImages amp Media

Rysunek 38Wybieranie zasobuz katalogoacutew drawable

ltRelativeLayout xmlnsandroid=httpschemasandroidcomapkresandroid xmlnstools=httpschemasandroidcomtools androidlayout_width=match_parent androidlayout_height=match_parent gt

ltImageView androidid=+idimageView1 androidlayout_width=wrap_content androidlayout_height=wrap_content androidlayout_alignParentLeft=true androidlayout_alignParentTop=true androidsrc=drawablemotor1 gtltRelativeLayoutgt



W tej aplikacji obowi zuje nieomawiany tutaj rozk ad RelativeLayout (okre laj po o e-nia kolejnych komponentoacutew przez odwo ania do innych wcze niej rozlokowanych)Rozk ad ten ma jedn szczegoacuteln cech mdash wszystkie komponenty powinny by na-zwane tak aby inne mog y si do nich odwo ywa np wskazuj c bdquochc by wyroacutew-nany do lewej strony tamtego buttonardquo W nast pnym kroku dodasz wi cej kompo-nentoacutew i zobaczysz jak pracuje przyjemny w edycji RelativeLayout

Nazwa naszego obrazka brzmi imageView1 i okre la j liniaandroidid=+idimageView1

Od tej pory b dziesz nazywa wszystkie komponenty czego w zasadzie wymaga rozk adRelativeLayout i czego bezwzgl dnie b d wymaga y techniki programowania w Javiedo ktoacuterych nieuchronnie si zbli asz Rozmiary komponentu w omawianym przypad-ku s zdefiniowane frazami wrap_content czyli bdquootaczaj swoj zawarto rdquo albo bdquob dtak du y jak twoja zawarto rdquo mdash w tym przypadku mapka bitowa z motocyklem

Z kolei po o enie komponentu definiuj linieandroidlayout_alignParentLeft=trueandroidlayout_alignParentTop=true

ktoacutere nale y czyta jako bdquob d w lewym goacuternym rogu swego rodzicardquo czyli kompo-nentu RelativeLayout ktoacutery wype nia ca y dost pny dla aplikacji ekran

Najwa niejsz lini jest po czenie komponentu o nazwie imageView1 z map bitowmotor1jpg znajduj c si w folderach drawable

androidsrc=drawablemotor1 gt

Zobacz jak wygl da omawiana aplikacja na ekraniku AVD czyli wirtualnej maszynyAndroida Pami taj jednak e jest kilka maszyn AVD Jak wybra konkretn W menuRun znajdziesz polecenie Run Configurations i tam wska maszyn na ktoacuterej uruchomiszprogram (rysunek 39) Na zak adce Target (na czym uruchomi ) powiniene znaleswoje urz dzenia AVD i zaznaczy jedno z nich

Teraz pozosta o sprawdzi dzia anie programu (rysunek 310) Wszystko gra Po uru-chomieniu programu na dwoacutech roacute nych urz dzeniach dostajesz t sam fotografimotocykla Czy na pewno t sam Napis w lewym goacuternym rogu odkrywa tajemnicmdash mapy bitowe zosta y pobrane z roacute nych folderoacutew drawable

By mo e zauwa y e e przy komponencie obrazka albo przy jego opisie w pliku XMLznajduje si malutki oacute ty troacutejk cik uwagi ktoacuter chce Ci podpowiedzie kompilatorbdquoMissing contentDescription attributeon imagerdquo (zapomnia e o parametrze contentDe-scription) mdash rysunek 311 Ka dy element wizualny powinien by opisany a opis tenjest przeznaczony do automatycznego odczytywania syntetycznym g osem dla kogo kto nie mo e zobaczy motocykla np dla osoby niewidomej W dalszej cz ci nieb dziesz dodawa atrybutu contentDescription



Rysunek 39 Menu Run i dalej Run Configurations pozwala opisa szczegoacute y uruchamiania aplikacji

Rysunek 310Dwa roacute ne urz dzeniai taka sama fotografiaNapis w lewym goacuternymrogu wskazuje e mapybitowe zosta y pobranez roacute nych folderoacutewdrawable



Rysunek 311Troacutejk cik uwagi ktoacuterpodpowiada kompilator

Mapa bitowa opakowanaw atrybuty XML

To co zrobi e do tej pory z map bitow mo na nazwa wy wietleniem surowegoobrazka By o to dobre i zazwyczaj jest wystarczaj ce Jednak mo na poacutej o krok dalejmianowicie w folderach drawable gdzie obok obrazkoacutew umie ci informacj w ro-dzaju bdquozroacuteb z tego kafelkirdquo bdquozastosuj antyaliasingrdquo czyli wyg adzanie bdquozawsze rozci -gaj gdy jest miejscerdquo albo bdquoprzycinaj gdy trzebardquo Jest to jakby wst pna obroacutebka surowejmapy bitowej za pomoc samych opisoacutew czyli jeszcze bez programowania w Javie

eby zapoznoa si t technologi sporz d bitmapowe t o ekranu Przygotuj najpierwodpowiedni bdquokafelekrdquo w wersjach -ldpi -mdpi i -hdpi (tak naprawd mo e to by do-wolny ma y obrazek) i poszczegoacutelne wersje umie w katalogach drawable

Potem przygotuj plik XML ktoacutery dodatkowo opisze nasz map bitow Plik taki po-winien znale si w jednym wspoacutelnym dla wszystkich maszyn folderze drawable Kre-ator tego pliku mdash opakowania na map bitow mdash automatycznie utworzy odpowiednifolder Jak doda zasoacuteb XML do folderoacutew drawable Kliknij prawym klawiszem ktoacutery-kolwiek folder drawable wybierz opcj New i dalej Android XML File (rysunek 312)

W kreatorze pliku XML dokonaj kilku zaznacze (albo mdash gdy zostanie ju utworzonymdash zmie w pliku kilka rzeczy r cznie) Wpisz nazw nowego zasobu ktoacuterym b dzieteraz plik XML Typem zasobu niech b dzie bitmap (rysunek 313)



Rysunek 312Dodawanie zasobu XMLdo folderoacutew drawable

Rysunek 313Tworzenie nazwyi wyboacuter typu nowegozasobu XML

Plik XML nie zosta wstawiony do znanej ju Ci rodziny folderoacutew drawable- ale donowego wspoacutelnego folderu o nazwie po prostu drawable Jak si pewnie domy laszfolder drawable zawiera zasoby graficzne wspoacutelne dla wszystkich maszyn niezale nieod kategorii ich wy wietlaczy

Nowy zasoacuteb b dzie wspoacutelny dla wszystkich maszyn ale nie do ko ca Oka e si (jakznoacutew nietrudno si domy li ) e ostateczna wersja obrazka nadal b dzie wyjmowanaz odpowiedniego folderu Wspoacutelne jest opakowanie XML ale prawdziwa fotografianadal ma wiele wersji



Przyjrzyj si wi c plikowi XML opakowuj cemu mapk bitow Najpierw po zako -czeniu pracy kreatora plik ten wygl da tak

ltxml version=10 encoding=utf-8gtltbitmap xmlnsandroid=httpschemasandroidcomapkresandroid gtltbitmapgt

Do wn trza tagu ltbitmapgt wpisz najwa niejszy i bezwzgl dnie konieczny atrybutktoacuterego warto ci jest nazwa opakowywanej mapki bitowej tutaj kafelki

ltxml version=10 encoding=utf-8gtltbitmap xmlnsandroid=httpschemasandroidcomapkresandroid androidsrc=drawablekafelkigtltbitmapgt

Zatem zdefiniowa e zasoacuteb nowego typu mdash jest to plik XML opakowuj cy prawdzi-wy zasoacuteb graficzny Teraz go wykorzystasz jako t o aplikacji (rysunek 314) Niechg oacutewny plik wygl du o nazwie prawdopodobnie activity_mainxml (tak nazw na-daje mu na samym pocz tku kreator nowej aplikacji) ma nast puj c tre napisanbdquor cznierdquo albo zbudowan w edytorze wizualnym

ltRelativeLayout xmlnsandroid=httpschemasandroidcomapkresandroid xmlnstools=httpschemasandroidcomtools androidlayout_width=match_parent androidlayout_height=match_parent androidbackground=drawablekafelki_xmlgt ltImageView androidid=+idimageView1 androidlayout_width=wrap_content androidlayout_height=wrap_content androidlayout_centerHorizontal=true androidlayout_centerVertical=true androidsrc=drawablemotor1 gtltRelativeLayoutgt

Jest to w zasadzie to samo co by o poprzednio zmieniono tylko sposoacuteb u o enia obraz-ka na ekranie mdash teraz nie znajduje si on w lewym goacuternym rogu ale na rodku I conajwa niejsze pojawi a si linia

androidbackground=drawablekafelki_xmlgt

Podobn fraz ju kiedy stosowa e nadaj c kolor pod o u aplikacjiandroidbackground=000080gt

Nie by oby sensu opakowywa w taki sposoacuteb plikoacutew graficznych gdyby po drodze niepojawi y si nowe mo liwo ci Uzupe nij plik XML o atrybut gravity (czyli o informacjw ktoacuter stron obrazek bdquoci yrdquo gdy ma na ekranie miejsce)

ltxml version=10 encoding=utf-8gtltbitmap xmlnsandroid=httpschemasandroidcomapkresandroid androidsrc=drawablekafelki androidgravity=fillgtltbitmapgt



Rysunek 314Mapa bitowa zosta aopakowana w plik XMLktoacutery z kolei zosta u ytydo budowy t a aplikacji

Atrybut gravity mo e przyjmowa do oczywiste warto ci top bottom left rightcenter_vertical fill_vertical center_horizontal fill_horizontal center fill (jestto warto domy lna ustawiana gdy nie u yjesz atrybutu gravity) clip_verticalclip_horizontal

Jeszcze ciekawszym atrybutem jest tileMode Atrybut ten nie mo e by u yty razemz poprzednim gravity mdash czyli stosujesz albo jeden albo drugi

ltxml version=10 encoding=utf-8gtltbitmap xmlnsandroid=httpschemasandroidcomapkresandroid androidsrc=drawablekafelki androidtileMode=repeatgtltbitmapgt

Atrybut tileMode oproacutecz warto ci repeat mo e przyjmowa stany clamp (nie kafelkujtylko rozci gaj kraw dzie) i mirror (kafelkuj ale lustrzanie obracaj c co drugie rz dyi wiersze kafelkoacutew)

Oproacutecz atrybutoacutew gravity (jak u o y obrazek na ekranie) oraz tileMode (jak zbudowakafelki z obrazka) masz do dyspozycji trzy atrybuty (rysunek 315) definiuj ce jakoobrazu i przyjmuj ce warto ci true albo false androidantialias (wyg adzanie)androiddither (poprawianie palety koloroacutew) i androidfilter (poprawianie obrazuprzy ciskaniu albo rozci ganiu mapy bitowej)



Rysunek 315Przy opakowywaniupliku graficznegomo nazastosowa roacute neatrybuty (gravitytileModeandroidantialiasandroidditherandroidfilter)

Wiele map bitowychw jednym opakowaniu XML

A je li chcia by mie przycisk na ktoacuterym znajduje si zmieniaj ca si mapa bitowainna gdy myszka wisi nad przyciskiem inna gdy go klika inna gdy go opuszcza Za-gadnienie to da si zrealizowa bez programowania za pomoc opisoacutew w odpowied-nich plikach XML Gdyby chcia poczyta o tym wi cej wpisz w Google frazy bdquoAndroidState Listrdquo (lista stanoacutew)

Zacznij od przygotowania prawdziwych zasoboacutew czyli teraz serii mapek bitowychprzedstawiaj cych np rybk w trzech roacute nych kolorach Potem przygotuj t seri ry-bek w roacute nych rozmiarach i by mo e roacute nych jako ciach przeznaczonych na urz -dzenia o roacute nej jako ci wy wietlaczy (rysunek 316) Te pliki mdash tak jak poprzedniomdash umie w folderach drawable-ldpi drawable-mdpi itd W zale no ci od stanu przy-cisku (zaraz odpowiedni przycisk zostanie wprowadzony do gry) system Android umie cina nim inn wersj mapki bitowej Powiniene te przygotowa pomniejszone i powi k-szone wersje obrazkoacutew i porozmieszcza je w folderach drawable-ldpi drawable-mdpii drawable-hdpi



Rysunek 316Przygotowanie obrazkao boku d ugo ci kilkusetpikseli i roacute nejkolorystyce alboroacute nicy dotycz cejjakiego innegoczytelnego szczegoacute u

Maj c w folderach drawable- seri rybek o roacute nych kolorach mo esz przyst pi doopisywania Listy stanoacutew Kliknij prawym przyciskiem myszki folder drawable i z po-jawiaj cego si menu wybierz New i dalej Android XML File czyli plik XML (rysu-nek 317) Przed chwil w takim pliku opisywa e jedn mapk bitow teraz opiszeszca y ich stos

Rysunek 317Nowy plik XMLopisuj cy ca y stosmapek bitowych

Wykorzystaj pojawiaj cy si kreator pliku XML cho moacuteg by przygotowa odpowiedniplik ca kowicie r cznie Podaj nazw pliku oznacz e g oacutewny element ma by typuSelector i zako cz przyciskiem Finish (rysunek 318) W folderze drawable powinienpojawi si nowy zasoacuteb mdash plik stos_rybek_xml



Rysunek 318Tworzenie nowegozasobu XML mdash plikstos_rybek_xml

Jak zwykle dwa razy kliknij nowy plik aby otworzy go do edycji Uzupe nij jegotre nast puj co

ltxml version=10 encoding=utf-8gtltselector xmlnsandroid=httpschemasandroidcomapkresandroid gt ltitem androidstate_pressed=true androiddrawable=drawableryba_r gt ltitem androidstate_focused=true androiddrawable=drawableryba_b gt ltitem androiddrawable=drawableryba gtltselectorgt

Do wn trza tagu ltselectorgt wpisz kilka tagoacutew ltitemgt odpowiadaj cych roacute nym sta-nom przycisku ktoacutery za chwil zaimplementujesz Gdy przycisk jest w stanie pressedczyli naci ni ty powinna si wy wietla mapka o nazwie ryba_r (rybka o czerwona-wym odcieniu) Gdy przycisk jest w stanie focused czyli gotowy do naci ni cia mdashryba_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 ktoacutery

opisuje si zawsze za pomoc ostatniego tagu ltitemgt w powy szym wyliczeniu stanoacutew

Nale y jeszcze zaimplementowa sam przycisk oraz podpi do niego ten oryginalnysposoacuteb kolorowania jego powierzchni G oacutewny plik wygl du z folderu layout powi-nien mie nast puj c zawarto



Rysunek 319Do poprzedniej aplikacjinale y doda przyciski opracowa jegow a ciwo background(t o) Niech t em b dzienowy zasoacuteb XML zwanyList stanoacutew

ltRelativeLayout xmlnsandroid=httpschemasandroidcomapkresandroid xmlnstools=httpschemasandroidcomtools androidlayout_width=match_parent androidlayout_height=match_parent androidbackground=drawablekafelki_xml gt ltImageView androidid=+idimageView1 androidlayout_width=wrap_content androidlayout_height=wrap_content androidlayout_alignParentLeft=true androidlayout_alignParentTop=true androidlayout_marginTop=50dp androidsrc=drawablemotor3 gt ltButton androidid=+idbutton1 androidlayout_width=wrap_content androidlayout_height=wrap_content androidlayout_below=+idimageView1 androidlayout_centerHorizontal=true androidbackground=drawablestos_rybek_xmlgtltRelativeLayoutgt

Du a cz tego pliku jest Ci znana Jest tu rozk ad relatywny czyli kolejne komponentys uk adane wzgl dem poprzednich u o onych wcze niej Rzeczywi cie komponentButton le y pod komponentem ImageView

androidlayout_below=+idimageView1

Natomiast stos obrazkoacutew mdash zagadnienie opisane na kilku ostatnich stronach mdash po-jawia si w linii opisuj cej t o przycisku

androidbackground=drawablestos_rybek_xmlgt

Jest to odwo anie do w a nie stworzonego zasobu XML umieszczonego w folderzedrawable



Pora na podsumowanie Znoacutew powtoacuterzy si nast puj cy schemat gdzie w pierwotnychfolderach drawable- znajduj si prawdziwe mapy bitowe roacute ni ce si rozmiaramimo e tak e jako ci grafiki Roacute nice mi dzy nimi konieczne s z tego wzgl du e na lep-sze urz dzenia przygotowuje si inn grafik (grafika ktoacutera ma wi cej detali i szcze-goacute oacutew) ni na gorsze

Jakby nad surowymi mapami bitowymi znajduj si pliki XML definiuj ce specjalnew a ciwo ci rysunku Pliki te znajduj si we wspoacutelnym dla wszystkich urz dze katalogudrawable Dopiero te pliki wywo ywane s w g oacutewnym pliku wygl du Tak pojawi ysi wcze niej kafelki a teraz aktywny przycisk zmieniaj cy swoacutej rysunek gdy kliknieszgo myszk (rysunek 320)

Rysunek 320T em przycisku jestzasoacuteb XML zwanyState List (lista stanoacutew)Ka dy stan to jaki innyobrazek mdash klikni cieczy zatrzymanie si naobrazku zmienia jegowygl d


SkorowidzA

AbsoluteLayout 32 34ADT Android Development

Tools 12akcja Patrz metodaaktywno ci ci gaj ce dane

206aktywno

poboczna 208wtoacuterna 207

algorytmklasy publicznej 81rysowania 135

Android SDK 9 211Android SDK Manager 13 211animacja 98

czenie efektoacutew 110poklatkowa 113przycisku 108

antyaliasing 130 135aparat graficzny 188aplikacja z ekranami 191atrybut

angle 68contentDescription 46gravity 50tileMode 51

atrybuty XML 48AVD Android Virtual Device

14 41 211

Bbitmapy prywatne 161blokowanie

komponentu 163przycisku 165 171

b d 188b d w logice interfejsu 164budowanie interfejsu 169

Cczas trwania animacji 102czyszczenie ekranu 162

DDalvik 9 211definiowanie

efektoacutew animacyjnych 101egzemplarza aparatu

graficznego 188klasy w klasie 176przycisku 79 84styloacutew 87t a 66

d ugotrwa y proces 168dodawanie

identyfikatora 148zasobu XML 49

dokumentacja online Androida119

dost pdo internetu 208do zmiennych 119

dp device independent pixel64 211

drzewo plikoacutew projektu 98dynamiczne tworzenie obrazoacutew

161dzia anie aktywno ci 147dziedziczenie 125

EEclipse 9Eclipse Plugin 211edytor Eclipse 9edytowanie pliku 30 67 201efekt 97

rozmycia obrazu 157zamiany sk adowej koloru

155zanikania 102

efektyanimacyjne 98specjalne 100

egzemplarz procesu 176ekran 191

HVGA 41QVGA 41WVGA 41

elementresource 92shape 89

elementy interfejsu 25emulator

aplikacji 18o ekranach roacute nej jako ci

41

Ffabryka map bitowych 150 187film 113 116folder Patrz katalogformat fotograficzny 188funkcja Patrz metodafunkcje prywatne 109



Gg bia koloru 151gra w koacute ko i krzy yk 87graficzne zasoby aplikacji 39

IIDE 11 212identyfikator 148implementacja klasy 82importowanie pakietu 81 130informacja o rozmiarach

komponentu 150inicjowanie

bitmapy 161zmiennej 120

instalator Android SDK 10instalowanie

Android SDK 9IDE Eclipse 9 12Javy 9

interfejsdo ogl dania filmu 116u ytkownika 103 146

JJava 9JDK 212jednostka dp 64

Kkatalog

bin 17drawable 39 49layout 22 63res 17ndash21 39src 17values 20 62

klasaActivity 106 147 171Animation 106AnimationDrawable 118AsyncTask 167 173BitmapFactory 150Bundle 208Calendar 85Canvas 127 152Figura 133ImageView 161Intent 200

MainActivity 81OdczytObrazka 186 205Paint 127Proces 172RectF 136View 106 122 134

klasybazowe 127 133implementacja

implements 82konstruktor 124kreator 122nazwa 124 198rozszerzanie extends 82

132 171 174tworzenie 122

klatki filmu 113klawisze Ctrl+Spacja 68 92

99 198kolejno

budowania interfejsu 169rozmieszczania elementoacutew

192kolor 61 65kolor piksela 156komponent

Button 59 145ImageView 35 103 145

194ProgressBar 177RelativeLayout 91TableRow 63TextView 71 145View 122

komponentyblokowanie 163graficzne 121informacja o rozmiarach 150nazywanie 71po o enie 137 Patrz tak e

rozk adtworzenie 121wizualne 121w asne 121wybieranie 31

konfigurowanie Eclipse 11ndash13konstruktor klasy 124

bazowej 125potomnej 125

koacute ka 129koacute ko i krzy yk 87kreator

klasy 122nowego projektu 78 194

nowej aplikacji 50zasobu XML 48 100 115

kszta ty 66

Llayout 22 58

AbsoluteLayout 32 34LinearLayout 24 26RelativeLayout 70 90

158TableLayout 27 58

LinearLayout 24 26linia 68lista stanoacutew 53lokalizacja

oprogramowania 12pliku graficznego 37

losowaniejednokrotne 142liczb 131pikseli 157

czenieanimacji 110klatek 115

Mmanifest 200mapy bitowe 43 48 145

inicjalizowanie 161operacje graficzne 154podgl d 145przekszta cenie 154rysowanie 152

maszynalosuj ca Random 131wirtualna Dalvik 9

metodadata_i_godzina() 84decodeResource() 150doInBackground() 180drawLine() 162drawRect() 163eraseColor() 163execute() 185findViewById() 86 106

148 161finish() 81getContentDescription() 141


Skorowidz 215

getInstance() 85getPixel() 156getString() 208kliknieto() 79 95kliknieto_kreuj() 161kliknieto_start() 169kliknij() 148losuj_dane() 143obracaj() 106onCreate() 120 171 199onDraw() 126 130 134onPostExecute() 188onPreExecute() 176 188onProgressUpdate() 179putExtra() 207rgb() 156rysuj() 152 155setARGB() 162setText() 86start() 118startAnimation() 107stop() 118stosuj_wszystko() 112super() 125

metodyabstrakcyjne 198finalne 132nadpisane 127prywatne 109

Nnadawanie

nazwy plikowi xml 92warto ci wspoacutelnej 64

nadpisywanie metody 125narz dzia Android SDK 10nawigacja mi dzy ekranami

202nazwa

klasy 124 198metody 124 198pliku 124

nazywaniekomponentoacutew 71pliku XML 99

Oobiekty u o one

obok siebie 24w oczkach sieci 27

obraz klasy fotograficznej 188

obrazek 145obroacutet 101 109obroacutet ekranu 96obs uga

klikni 105 147 192wyj tkoacutew 188zdarzenia onClick 95

oczyszczanie pami ci 171odczytywanie

obrazka 186pliku 185

od miecacz Javy 171od wie anie obrazka 171okno

emulatora aplikacji 18kreatora klasy 123

okr g y wska nik post pu 194okre lanie warto ci atrybutu 140opisywanie

efektoacutew specjalnych 100zasoboacutew 114

oprogramowanie ekranoacutew 202osadzanie elementoacutew 83

Ppakiet

Eclipse Classic 11Javy 10

piksel 155plik

activity_mainxml 58AndroidManifestxml 183

200Figurajava 133MainActivityjava 79 117

153 206stringsxml 20 25 34

plikiclass 17wygl du 28 79 91 104

117 138 146 159 182196

podgl d mapy bitowej 145podpowied 68 92 99 198pole tekstowe 69 86polecenie Refresh 114 145polimorfizm 96 148po o enie komponentu 137postfiks

hdpi 40 43ldpi 39mdpi 40xhdpi 40 43

pozyskiwanie mapy bitowej154

proces 167proces ci gania 182projekcja filmu 118prostok t 68prototyp metody 148 174przechwytywanie parametru

208przekszta canie mapy bitowej

154przesuni cie 102 110przesuwanie ekranu 58ndash61przezroczysto 101przycisk 64

bdquoKoniecrdquo 77Button 32 194Obroacutet 107

przyciskianimowanie 98blokowanie 165 171definiowanie 79 84rozmieszczanie 93wstawianie 59

przypisywanie koloroacutew 65

RRelativeLayout 70 90 158rozk ad

AbsoluteLayout 32 34LinearLayout 24 26RelativeLayout 70 90 158TableLayout 27 58

roz o enie swobodne 32rozmiar

komponentu 149obrazka 43

rozmieszczanieprzyciskoacutew 93elementoacutew 192

rozmycie obrazu 157rozszerzanie

funkcjonalno ci 82klasy 82 132 171 174

rysowaniena ekranie 134na mapie bitowej 152 153ramki 188w drugim planie 167w tle 178

rzutowanie 95



SScrollView 57SDK Location 12Shapes 66silnik animacji 119skalowanie 102sk adowe koloru 155s owo kluczowe

extends 82final 132implements 82super 125 127

stan urz dzenia 180struktura katalogoacutew drawable

39strumie danych 187sufler 68 92 99 198suwak przewijania 60 137

ci ganie danych z internetu181

rodowisko programistyczne 9

TTableLayout 27 58tag

animation-list 115bitmap 113LinearLayout 136ScrollView 58 136

t oaplikacji 66 89gradientowe 90

TrueColor 162tworzenie

AVD 15efektoacutew 97ekranoacutew 191ikony 17 36

klasy 122komponentoacutew 121mapy bitowej 157nazwy 49pierwszej aplikacji 15 19pliku 62 195pliku XML 99wirtualnego urz dzenia 41zasobu XML 54

typVoid 180nieokre lony 173

typy wy wietlaczy 41

Uuk adanie obiektoacutew 24 27uruchamianie

animacji 105aplikacji 47procesu w tle 176 178projekcji 118

urz dzenia AVD 46urz dzenie

QVGA 42WVGA800 42

ustalanie atrybutoacutew figur 130ustawienia kursora 67

Ww tek

g oacutewny 167poboczny 167

wersja systemu Android 14wiruj ce koacute ko 182wklejanie adresu internetowego

185w a ciwo

Background 65 66contentDescription 138Enabled 163src 103

Style 92Visibility 176

Workspace 19 212wska nik post pu 177 194wstawianie

fraz XML 67przycisku 59wierszy 63

wyboacuterkomponentu 31nazwy rysunku 36zasobu 45

wygl daplikacji 19 22 57ekranu g oacutewnego 194tabelaryczny 58

wyg adzanie grafiki 130 135wyj tek 80 188wy wietlacze 41wy wietlanie

daty 82grafiki 194 203obrazka 161zmian 153

Zzak adka Images amp Media 45zamiana sk adowej koloru 155zanikanie 102zarz dca systemoacutew Android 13zasoby

graficzne 39 113 145XML 55

zdarzenie onClick 95 147zegar 82zezwolenie na dost p do

internetu 208zmienne

prywatne 166typu Bitmap 150


Spis tre ciWst p 5

Rozdzia 1 Instalowanie rodowiska programistycznego 9Instalowanie Android SDK Javy i edytora Eclipse 9Konfiguracja rodowiska programistycznego Eclipse 11Pierwsza aplikacja 15

Rozdzia 2 Wygl d pierwszej aplikacji 19Katalog res mdash zasoby aplikacji 19Layouts czyli wygl dy aplikacji 22

LinearLayout mdash obiekty u o one obok siebie 24TableLayout mdash obiekty u o one w oczkach sieci 27AbsoluteLayout mdash roz o enie swobodne 32

Rozdzia 3 Graficzne zasoby aplikacji 39Struktura katalogoacutew drawable 39Emulatory o ekranach roacute nej jako ci 41Bitmap czyli mapa bitowa 43Mapa bitowa opakowana w atrybuty XML 48Wiele map bitowych w jednym opakowaniu XML 52

Rozdzia 4 Wi cej o wygl dzie aplikacji 57ScrollView mdash ekran z gumy 57Kolory 61Shapes mdash kszta ty 68

Rozdzia 5 Programowanie czas zacz 77Przycisk bdquoKoniecrdquo 77Zegarek dla ubogich 82Koacute ko i krzy yk a przy okazji definiowanie styloacutew 87

Rozdzia 6 Efekty specjalne 97Przygotowanie animacji 98Przygotowanie interfejsu u ytkownika 103Uruchomienie animacji 105Animacja innych komponentoacutew 108

czenie animacji 110Animacja poklatkowa map bitowych 113








S owniczek 211

Skorowidz 213


Rozdzia 3






































































































































SkorowidzA



206aktywno








14 41 211

















155zanikania 102







41












Kkatalog






132 171 174tworzenie 122


99 198kolejno












kszta ty 66

Llayout 22 58













Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo





















S owniczek 211

Skorowidz 213


Rozdzia 3






































































































































SkorowidzA



206aktywno








14 41 211

















155zanikania 102







41












Kkatalog






132 171 174tworzenie 122


99 198kolejno












kszta ty 66

Llayout 22 58













Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo















Rozdzia 3






































































































































SkorowidzA



206aktywno








14 41 211

















155zanikania 102







41












Kkatalog






132 171 174tworzenie 122


99 198kolejno












kszta ty 66

Llayout 22 58













Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo













































































































































SkorowidzA



206aktywno








14 41 211

















155zanikania 102







41












Kkatalog






132 171 174tworzenie 122


99 198kolejno












kszta ty 66

Llayout 22 58













Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo
























Kkatalog






132 171 174tworzenie 122


99 198kolejno












kszta ty 66

Llayout 22 58













Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo















Skorowidz 215



Nnadawanie



202nazwa



Oobiekty u o one












Ppakiet


piksel 155plik



153 206stringsxml 20 25 34


117 138 146 159 182196


















rzutowanie 95




















QVGA 42WVGA800 42


Ww tek



185w a ciwo

































QVGA 42WVGA800 42


Ww tek



185w a ciwo















Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 3.i Graficzne zasoby aplikacji 41...

Documents

Transcript of Wszelkie prawa zastrzeżone. Nieautoryzowane ... · Rozdziaä 3.i Graficzne zasoby aplikacji 41...