Skripta - Dizajn i Programiranje Mobilnih Aplikacija

Razvoj mobilnih aplikacijaPriručnik za edukaciju

Osijek, 2013

Ovaj projekt financira Europska unija

Elektrotehnički fakultet Osijek

Poduzetnički inkubator Bios d.o.o.

IPA komponenta IV

Operativni program Razvoj ljudskih potencijala

Projekt

U korak s globalnim trendovima za usklađenost s aktivnom politikom tržišta rada

http://edumobi.etfos.hr/

Izdavač:

Elektrotehnički fakultet Osijek

Za izdavača

Prof. dr. sc. Radoslav Galić, dekan

Suradnici:

Poslovanje 2 d.o.o.

Centar za poduzetništvo Osijek

Lektura:

Ivana Vrban, prof.

Dizajn i prijelom:

Biroprint d.o.o.

Tisak:

Biroprint d.o.o.

Projekt U korak s globalnim trendovima za usklađenost s aktivnom politikom tržišta rada provo-di Elektrotehnički fakultet Osijek u partnerstvu s Poduzetničkim inkubatorom BIOS d.o.o.

Ova je publikacija izrađena uz pomoć Europske unije. Sadržaj je ove publikacije isključiva odgo-vornost Elektrotehničkog fakulteta Osijek i Poduzetničkog inkubatora BIOS i ni na koji način ne odražava gledišta Europske unije.

Europsku uniju čini 27 zemalja članica koje nastoje povezivati svoja znanja, resurse i sudbine. Tijekom svog su pedesetogodišnjeg razdoblja proširenja izgradile zonu stabilnosti, demokracije i održivog razvoja, zadržavajući pri tome kulturalnu raznolikost, toleranciju i osobne slobode. Europska unija dijeli svoja postignuća i vrijednosti sa zemljama i narodima izvan svojih granica. Europska komisija izvršno je tijelo Europske unije.

Obrazovanje je odraslih osoba definirano kao cjelina procesa učenja koji su namijenjeni ostvari-vanju prava na slobodan razvoj osobnosti, osposobljavanju za zapošljivanje i osposobljavanju za aktivno građanstvo. Ljudski je kapital jedan od najvažnijih resursa Hrvatske koja nastoji postati najkonkurentnije društvo temeljem znanja u regiji. Cjeloživotno obrazovanje ima važnu ulogu u ovom procesu. Obzirom na ubrzan rast nezaposlenosti posljednjih nekoliko godina i prognoza da će ona i dalje rasti, potrebno je reagirati i osigurati dodatno obrazovanje kako bi se unaprije-dile kompetencije nezaposlenih osoba.

Elektrotehnički fakultet Osijek je javno – znanstvena nastavna ustanova koja s projektnim par-tnerom Poduzetničkim inkubatorom BIOS provodi projekt U korak s globalnim trendovima za usklađenost s aktivnom politikom tržišta rada kroz IPA komponentu IV, Operativni program Ra-zvoj ljudskih potencijala.

Projekt je namijenjen visokoobrazovanim osobama koje su završile stručni studij na nekom od tehničkih fakulteta u Slavoniji i Baranji. Cilj je projekta povećanje broja zaposlenih visokoobra-zovanih osoba u Osječko-baranjskoj županiji kroz edukaciju koja je zasnovana na poticanju sa-mozapošljavanja. Uz pomoć edukacije Razvoj mobilnih aplikacija polaznici će steći nova znanja i vještine, predstaviti svoje aplikacije javnosti, podići svoj poduzetnički duh i saznati sve moguć-nosti samozapošljavanja.

Cilj je priručnika polaznicima edukacije olakšati praćenje nastave i pomoći im u usvajanju novih znanja i vještina. Priručnik se sastoji iz tri dijela:

1. Dizajn mobilnih aplikacija2. Programiranje mobilnih aplikacija3. Poduzetništvo

Kroz navedene će nastavne cjeline polaznici edukacije naučiti samostalno dizajnirati i programi-rati mobilne aplikacije, razvijati osnovne poduzetničke vještine i bit će potaknuti na pokretanje vlastitog posla.

Elektrotehnički fakultet Osijek zahvaljuje tvrtki Poslovanje2 te Centru za poduzetništvo Osijek koji su pomogli u izradi ovog priručnika.

Polaznicima edukacije i svim ostalim korisnicima ove knjige želimo uspjeh u radu!

Projektni tim:

Doc.dr.sc. Nenadić Krešimir, dipl.ing.

Bošnjak Sonja, dipl.iur.

Pekanov Tihana, mag.ing.comp. , Poduzetnički inkubator BIOS d.o.o.

Balen Josip, dipl.ing.

Doc.dr.sc. Baumgartner Alfonzo, dipl.ing.

Zorić Bruno, mag.ing.comp.

Hanzer Mirta, dipl.oec.

Dekan Elektrotehničkog fakulteta Osijek

Prof.dr.sc. Radoslav Galić

SADRŽAJ

1. UVOD U DIZAJN ......................................................................................................... 2

1.1. Teorija boja .......................................................................................................................... 21.2. Teorija dizajna ...................................................................................................................... 31.3. Dizajn logotipa i identiteta................................................................................................... 41.4. Dizajn grafičkih elemenata .................................................................................................. 5

2. DIZAJN KORISNIČKOG SUČELJA .................................................................................7

2.1. Uvod u korisnička sučelja .................................................................................................... 7

2.2. Odnos između DP i PX ......................................................................................................... 72.3. Osnovna struktura sučelja aplikacije ................................................................................... 82.4. Osnove uspješnog dizajna ................................................................................................... 92.5. Korisnički unos za mobilne uređaje i ekrane osjetljive na dodir .......................................... 92.6. Dizajn prilagođen korisniku ............................................................................................... 102.7. Trajnost dizajna .................................................................................................................. 112.8. Prototipi, koncepti, proof of concept ................................................................................. 112.9. Utjecaj ograničenja mobilnih uređaja ............................................................................... 132.10. Postupak dizajniranja aplikacije za mobilne uređaje ....................................................... 142.11. Službene platformske smjernice ...................................................................................... 142.11.1. Službene teme .............................................................................................................. 142.11.2. Efekti koji se pojavljuju kod interakcije korisnika s nekim elementom ......................... 152.11.3. Minimalna veličina tipki i ostalih elemenata ............................................................... 152.11.4. Veličine ekrana ............................................................................................................. 162.11.5. Fontovi ......................................................................................................................... 162.11.6. Boje .............................................................................................................................. 172.11.7. Ikone ............................................................................................................................ 172.12. Informacijske poruke ....................................................................................................... 222.13. Uzorci ............................................................................................................................... 232.14. Reusable UI ...................................................................................................................... 252.15. Building blocks ................................................................................................................. 252.15.1. Kartice (engl. Tabs) ....................................................................................................... 252.15.2. Liste ............................................................................................................................. 262.15.3. Rešetke (engl. Grid List) ................................................................................................ 272.15.4. Prelistavanje (engl. Scrolling) ........................................................................................ 282.15.5. Spinners ........................................................................................................................ 28

2.15.6. Gumb (engl. Button) ..................................................................................................... 282.15.7. Polje za unos teksta (engl. Text fields) .......................................................................... 292.15.8. Traka za pretragu (engl. Seek bar) i klizači (engl. Sliders) .............................................. 302.15.9. Napredak i aktivnost (engl. Progress and Activity) ....................................................... 302.15.10. Prekidači (engl. Switches) ........................................................................................... 322.15.11. Dijalozi ........................................................................................................................ 332.15.12. Pickers ......................................................................................................................... 342.16. Navigacija i widgeti .......................................................................................................... 352.17. Geste i animacija ............................................................................................................. 362.17.1. Geste ............................................................................................................................ 362.17.2. Animacija ...................................................................................................................... 382.18. Skalabilni dizajn ............................................................................................................... 382.19. Layout aplikacije .............................................................................................................. 40

3. OSNOVE PROGRAMIRANJA ..................................................................................... 46

3.1. Uvod u programski jezik Java ............................................................................................. 463.2. Varijable, operatori [6] ...................................................................................................... 463.3. Kontrola toka programa [8] ............................................................................................... 483.3.1. Grananja ......................................................................................................................... 483.3.2. Petlje ............................................................................................................................... 503.4. Polja ................................................................................................................................... 513.5. Metode [8]......................................................................................................................... 523.6. Razine pristupa .................................................................................................................. 56

4. OBJEKTNO ORIJENTIRANO PROGRAMIRANJE ........................................................ 58

4.1. Klase, objekti i enkapsulacija ............................................................................................. 584.2. Konstruktori ....................................................................................................................... 594.3. Nasljeđivanje ..................................................................................................................... 614.4. Apstraktne klase [10] ......................................................................................................... 624.5. Polimorfizam ..................................................................................................................... 63

5. RAZVOJ APLIKACIJA ZA ANDROID PLATFORMU ...................................................66

5.1. Instalacija potrebnih alata ..................................................................................................66

5.2. Kreiranje Android projekta ................................................................................................ 685.3. XML kao osnova Android korisničkog sučelja (UI-a) .......................................................... 725.4. Android Activity i UI XML ................................................................................................... 745.5. Pokretanje aktivnosti (engl. Intent) ................................................................................... 78

Dizajn

5.6. Životni ciklus Android aktivnosti [14] ................................................................................ 815.7. Podržavanje različitih uređaja [11] .................................................................................... 855.8. Fragmenti .......................................................................................................................... 885.9. Asinkroni pozivi ................................................................................................................. 925.10. Preference Activity .......................................................................................................... 955.11. ListView i List Activity ...................................................................................................... 985.12. Action Bar ...................................................................................................................... 1095.13. Android SQLite baza podataka ...................................................................................... 1175.14. Korištenje senzora ......................................................................................................... 1255.15. Google mape ................................................................................................................. 1275.16. Multitasking ................................................................................................................... 136

6. IZRADA ANDROID APLIKACIJE ............................................................................... 138

7. PODUZETNIŠTVO ................................................................................................... 158

7.1. Što je to poduzetništvo? .................................................................................................. 1367.2. Procjena poduzetničkih sposobnosti ............................................................................... 1587.3. Poslovni plan ................................................................................................................... 1597.4. Marketing i marketing plan ............................................................................................. 1637.5. E-marketing ..................................................................................................................... 1657.6. Financiranje poslovnog poduhvata .................................................................................. 166

8. LITERATURA ........................................................................................................... 170

9. POPIS SLIKA ............................................................................................................ 171

10. POPIS TABLICA ..................................................................................................... 175

11. POPIS PRIMJERA .................................................................................................. 176

1

Dizajn

2

1. UVOD U DIZAJN

1.1. Teorija boja

Oko je čovjekov najsofisticiraniji alat. Razlikuje i do 7500000 boja i njihovih nijansi. Boje ne bi postojale bez svjetla jer se boja reflektira s određenog objekta u određenoj valnoj dužini u obliku svjetla. Tako je primjerice duga bijelo sunčevo svjetlo razlomljeno kroz kapljice vode u zraku i predstavlja vidljiv spektar boja. Svaka boja ima vlastitu valnu dužinu. Postoje tri primarne boje: crvena, žuta i plava. Iz tih se boja miješanjem mogu dobiti ostale, sekundarne boje kao što su zelena, narančasta i ljubičasta, ali i neograničen broj nijansi u raznim kombinacijama. Isaac Newton je 1666. godine razvio tzv. „kotač boja“ (engl. the color wheel), tj. prvi kružni dijagram boja (Slika 1.), a od tada brojni znanstvenici i umjetnici proučavaju i dizajniraju brojne varijacije tog koncepta.

Slika 1. Newtonov „kotač boja“

Iz ovih su osnova proizašla dva sustava boja u računalnom svijetu:

1. RGB (engl. Red, Green, Blue) je sustav boja kojemu su primarne boje crvena, zelena i plava. Primjenjuje se na računalnim zaslonima i temelji se na prikazu svjetlom. Pozadina je za-slona crna pa tamo gdje nema svjetla, nema ni boje. Na taj se način dobiva crna boja, a bijela se boja dobiva jednakim omjerom svih triju primarnih boja.

2. CMYK je sustav boja kojemu su svijetloplava (C - cyan), svijetlocrvena (M - magenta), žuta (Y - yellow) i crna (K – Key - oznaka crne boje) primarne boje. CMYK sustav boja najviše se koristi u tisku i pripremi za tisak.

Priprema se za tisak uvijek radi s CMYK setom boja kako bi ono što je prikazano na zaslonu bilo najsličnije onomu što se dobije u ispisu. Kako bi se lakše odabrala paleta boja za dizajn (ukoliko nije definirana vizualnim identitetom klijenta), koriste se brojni alati koji su besplatno dostu-pni na Internetu kao što su Color Scheme Designer (http://colorschemedesigner.com/) i Color Wizard (http://www.colorsontheweb.com/colorwizard.asp) (Slika 2.).

UVOD U DIZAJN

3

UVOD U DIZAJN

Slika 2. Alati za izbor boja

1.2. Teorija dizajna

U današnjem je modernom dobu dizajn sve ono što je vidljivo i opipljivo. Dizajn se bavi obliko-vanjem svih predmeta koji se koriste. Nastao je pojavom industrijske revolucije kojom se serijski i automatizirano proizvodila roba za nepoznate potrošače. Dizajn nastoji odrediti ukus različitih profila kupaca. Reklame i marketing određuju modu i privlačnost nekog proizvoda pa potražnja za nekim proizvodom postaje sve veća. Dobar dizajn treba ponuditi proizvod koji će se razliko-vati od uobičajenih standarda i stereotipa, a da pri tome bude u granicama kako bi ga kupac shvatio i kupio. Ako se dizajn previše odmakne od standarda, kupac neće kupiti proizvod jer nije shvatio što je umjetnik htio reći. Dizajn nikako ne smije biti težak za uporabu i korištenje. Treba biti ekonomski isplativ za proizvodnju.

Dizajn se dijeli na:

a) grafički dizajn (naljepnice, plakati, logotipi)

b) industrijski dizajn (engl. product design) (strojevi, automobili, kućanski aparati)

c) tekstilni dizajn (materijali i krojevi)

Dizajn koji se koristi u izradi mobilnih aplikacija jest digitalni dizajn. Digitalni je dizajn najrašire-niji i najtraženiji dizajn. Temelji se na dizajnu korisničkih sučelja, a popularno se još naziva i UI dizajn (engl. User Interface design). Trendovi i standardi digitalnog dizajna mijenjaju se iz dana u dan. Današnji se trend dizajna temelji na izgledu proizvoda iz davnih tridesetih godina prošloga stoljeća pa se zbog toga naziva vintage dizajn (Slika 3.).

Slika 3. Primjeri vintage dizajna kod izrade UI-a i logotipa [1]

4

Alati koji se najviše koriste za dizajn i obradu fotografija su:

a) Adobe Photoshop®

Jedan je od najkvalitetnijih alata na tržištu koji koristi svaki profesionalni i ozbiljni dizajner. Ado-be Photoshop primarno je alat za obradu i retuširanje fotografija, no njegovi mu alati i funkcije daju status jednog od najboljih alata za izradu UI-a za internetske ili mobilne aplikacije. Najno-vija inačica ovog alata donosi 3D funkcije kao i timeline.

b) CorelDraw alat

Vrlo je sličan Photoshopu, ali ima kvalitetnije funkcije za pripremu sadržaja za tisak. Jednosta-van je za korištenje i posjeduje najmoćnije alate za obradu vektorske grafike (grafike koja ne mijenja svoju kvalitetu promjenom veličine).

c) GIMP [5] (engl. GNU Image Manipulation Program)

Besplatan je, brz i malen alat koji posjeduje većinu Photoshopovih funkcija i odlična je alterna-tiva komercijalnim alatima.

1.3. Dizajn logotipa i identiteta

Logotip je unikatan, jednostavan i prepoznatljiv potpis neke tvrtke ili pojedinca. Trebao bi na jednostavan način u jednoj boji prikazati ono čime se tvrtka ili pojedinac bavi. Može se pojaviti samo u tekstualnom obliku ili u kombinaciji teksta i slikovnog prikaza. Pod utjecajem trendo-va, logotipi su sve rjeđe jednobojni, a češće praćeni slikovnim prikazom. Kao i u dizajnu UI i u logotipima se pojavljuje vintage dizajn. Tako se razvio oblik i dizajn logotipa koji pretežno ko-risti kaligrafiju (grčki κάλλοςγραφή, kaligraphia; kalos = lijepo, graphein = pisati) ili krasopis, tj. umjetnost lijepog pisanja rukom uz pomoć pera ili kista (Slika 4.).

Slika 4. Primjeri logotipa [1]

Slika 5. Primjer smjernica izvedenih iz imena tvrtke ili pojedinca

UVOD U DIZAJN

5

UVOD U DIZAJN

Prije samog dizajniranja i crtanja logotipa, zapisuju se svi pojmovi koji su povezani s područjem kojim se pojedinac ili tvrtka bavi ili proizvodom koji proizvodi. Na taj se način određuje smjer logotipa. Svrha je logotipa ponuditi vizualni identitet određenoj tvrtki. Izabrani se logotip ne mijenja duže vrijeme ili nikada. Ako je logotip kombinacija teksta i slike i ako se iz imena tvrtke ne može razaznati čime se tvrtka bavi, dobro bi bilo da to slika vizualno prikaže. Klijent će uvijek tražiti više primjera logotipa za svoje poslovanje. U većini se slučajeva klijenti ne odluče za jedan osmišljeni logotip, već kombiniraju elemente različitih prijedloga i na osnovu njih sastavljaju idealan logotip.

Slika 6. Nekoliko prijedloga logotipa za istu tvrtku [1]

Svaki bi logotip trebao biti napravljen u vektorskom obliku kako bi se lakše tiskao na plakate, posjetnice, zaglavlja dokumenata, majice, šalice, kalendare itd. Stoga je uz svaki logotip nužna izrada knjige standarda. Knjiga je standarda dokument u kojemu su definirane sve smjernice za provođenje vizualnog identiteta. Sadrži točne šifre boja i dimenzija logotipa, podatke o mini-malnoj i maksimalnoj dimenziji logotipa koji se tiska na određeni medij te podatke o odstupa-njima u bojama nakon tiska.

ZADATAK 1Dizajniraj vlastiti logotip (na papiru) na temelju navedenih principa izrade logotipa.

1.4. Dizajn grafičkih elemenata

Dizajn je grafičkih elemenata opsežan i složen zadatak koji ovisi isključivo o ukusu i zahtjevima klijenata. Svaki grafički element sučelja mora biti precizan i jasno prikazivati ono za što je nami-jenjen. Kada to nije moguće, uz svaki se grafički element dodaje i kratki tekstualni opis koji je vidljiv samo kod interakcije s pojedinim elementom (engl. tooltip, hint).

6

Slika 7. Veze između vizualnog identiteta i izgleda aplikacije [1]

Zbog raznolikosti se uređaja posebno mora paziti na skalabilnost grafičkih elemenata, a da pri tome ostanu nepromijenjene kvalitete. Taj se proces moderno naziva Responsive Design, tj. osjetljiv, brz dizajn koji osigurava optimalan doživljaj gledanja sadržaja. To su primjerice Facebo-ok, Pinterest, MySpace itd. Platforma kojom se najteže prikazuju grafički elementi jest Android platforma. Razlog tomu je veliki broj različitih modela mobilnih uređaja (u svibnju 2012. godine bilo ih je približno 3975) koji imaju različite veličine dijagonala svojih ekrana, tj. različite gustoće piksela - DP (engl. Density-independent Pixel) (Slika 8.). Određena se ikona treba jednako oštro i čisto prikazivati na svim uređajima i zbog toga ju je nužno izraditi u najmanje četiri veličine (Slika 9.).

Slika 8. Razne veličine Android uređaja [2]

Slika 9. Primjer veličine jedne ikone za različite gustoće piksela [2]

UVOD U DIZAJN

7

2. DIZAJN KORISNIČKOG SUČELJA

2.1. Uvod u korisnička sučelja

Kao što je već rečeno u prethodnom poglavlju, uređaji koji se temelje na Android platformi trenutno su najrašireniji, a postoji i veliki broj različitih veličina i izvedbi. Upravo je ta raširenost najveći problem svakog dizajnera korisničkih sučelja. Osnovna je podjela Android uređaja po-djela na mobilne telefone (manje od 600dp) i tablet računala (veće od 600dp) kao što je prika-zano na slici 10. DP se koristi jer pridonosi gustoći piksela na ekranu za svaki mobilni uređaj, a na taj način određuje i točne mjere svakog elementa sučelja kako bi se prikazivao što sličnije na različitim uređajima.

Slika 10. Odnosi veličine ekrana mobilnog telefona i tablet računala [2]

2.2. Odnos između DP i PX

Ekranu srednje gustoće, tj. 160dp jedan DP odgovara jednom pikselu, a ekranu iznimno velike gustoće, tj. 320dp jedan DP odgovara dvama pikselima itd. Radi lakšeg snalaženja i konverzije iz jednog oblika u drugi, dostupni su brojni alati poput Android DP/PX convertera koji je dostupan na http://labs.skinkers.com/content/android_dp_px_calculator/.

Gustoće se piksela u svijetu Androida dijele u 4 kategorije: LDPI 120 (engl. Low Dots Per Inch), MDPI 160 (Medium), HDPI 240 (High) i XHDPI 320 (Extra High), a veličina ekrana može biti: mala, normalna, velika i iznimno velika. Prilikom dizajniranja posebno se treba paziti na veliči-nu elemenata, tj. elementi ne smiju biti premaleni za dodir. Svaka osoba ima kažiprst različite veličine i stoga je nužno da element koji služi za tipkanje bude dovoljno velik jer će u protivnom izazvati nezadovoljstvo korisnika. Optimalna veličina, odnosno minimalna širina i veličina nekog „klikabilnog“ elementa je otprilike 7mm ili 48dp. Ako se prilikom dizajniranja sučelja u obzir uzme ovo pravilo, završna će aplikacija biti prikladna za korištenje.

Slika 11. Optimalna veličina nekog „klikabilnog“ elementa sučelja [2]

DIZAJN KORISNIČKOG SUČELJA

8

2.3. Osnovna struktura sučelja aplikacije

Svaka gotova aplikacija ima dva osnovna dijela, izbornik i sadržaj (Slika 12.). Izbornik korisniku omogućuje odabir podataka koje želi prikazati, poziv funkcija za unos novih podataka ili izlaz iz aplikacije.

Slika 12. Primjeri izbornika i sadržaja [1]

Cijeli se koncept aplikacija za mobilne uređaje temelji na izborniku. Mobilni je uređaj oduvijek bio uređaj za razmjenu poziva i SMS poruka i iz tog je razloga bio jednostavan za upotrebu. Danas su mobilni uređaji mnogo razvijeniji i nude mogućnosti koje su se nekada mogle samo zamišljati. Usprkos tome, i dalje stanu u džep, a služe za obavljanje zadataka u pokretu. Iz tog su razloga aplikacije za mobilne uređaje napravljene na način da osiguraju brz i jednostavan pri-stup informacijama u pokretu. Upravo je zbog toga izbornik mobilne aplikacije najvažnija stavka (Slika 13.). Izbornici se danas rade kao obične liste ili tablice sastavljene uglavnom od dva ili tri stupca s neograničenim brojem redova. Svako polje tablice ili liste može, ali i ne mora, imati sličicu i tekst kao opis funkcije, ali se u pravilu koriste oba opisa. Pritiskom na određeno polje izbornika aplikacija korisnika vodi do detaljnijih informacija koje su zatražene.

Slika 13. Primjeri dviju vrsta izbornika [1]


9

Slika 14. Od skice na papiru do gotovog sučelja [1]

2.4. Osnove uspješnog dizajna

Uspješnim se dizajnom smatra svaki dizajn koji sam za sebe govori i opisuje pojedine funkcije proizvoda, ne zbunjuje korisnika i olakšava upotrebu proizvoda. Izrada uspješnog dizajna zapo-činje skiciranjem. Skiciranje je osnova i skraćuje proizvodni tijek i do 50%. Sama je skica ujedno i koncept kompletne aplikacije, a pokazuje i detaljno razrađuje osnovne funkcije i ponašanje aplikacije kod interakcije korisnika. Kada je skica na papiru gotova, dizajner ju kopira u digitalni oblik (finalni koncept) koji se šalje klijentu na pregled i odobrenje za nastavak rada. Sljedeći je korak dodavanje dubine i boje u koncept što dizajn aplikacije privodi kraju. To su principi kojih se treba pridržavati jer olakšavaju proces dizajniranja.

Uspješan je dizajn onaj dizajn kod kojega aplikacija na 90% uređaja izgleda gotovo identično. Zbog toga je vrlo važno da elementi sučelja ne budu previše komplicirani i ne sadrže previše detalja. Međutim, Apple iPhone uređaji nisu rađeni na ovakav način i svako se sučelje radi po mjeri zbog postojanja dviju veličina ekrana i dviju vrsta DPI-a. Kod Androida se svaki element radi u minimalno četiri veličine jer dizajn mora biti fleksibilan i kvalitetan.

2.5. Korisnički unos za mobilne uređaje i ekrane osjetljive na dodir

Dva su osnovna elementa za unos podataka i interakciju korisnika s aplikacijom na mobilnim uređajima: prostor za unos teksta i jednostavni gumb. Ova su dva elementa gotovo uvijek pri-sutna zajedno, ali ih je moguće rabiti i odvojeno. Neizostavni su u svakoj aplikaciji i koliko god jednostavna aplikacija bila, barem jedan od ova dva elementa naći će svoje mjesto u njoj. Svaki gumb ima maksimalno pet stanja vlastitog prikaza ovisno o interakciji (Slika 15.): (i) normalno stanje, (ii) aktivno ili pritisnuto stanje, (iii) fokusirano stanje (nije aktivno ili pritisnuto), (iv) one-mogućeno stanje i (v) onemogućeno i fokusirano stanje. Svako navedeno stanje prikazuje gumb ili polje za unos teksta na drugačiji način kako bi korisnik znao da je „nešto napravio“.


10

Slika 15. Primjer stanja gumba

Postoje još mnogi elementi koji omogućuju korisniku unos informacija u aplikaciju, ali i ele-menti koji daju potvrdu da je uspješno, tj. neuspješno obavio neku operaciju. Takvi se elementi nazivaju dijalozi, a prikazuju da je neka funkcija obavljena, da je u obradi ili da traži potvrdu za obavljanje neke važnije operacije. Tzv. su „obavijesti“ (engl. Notifications) suprotne dijalozima, a daju kratku obavijest korisniku što se trenutno dogodilo. Koja je, dakle, razlika između dijaloga i obavijesti? Dijalozi obično obavještavaju korisnika kada nešto nije u redu ili kada se aplikacija iznenada zaustavi. Također su i najčešći oblik potvrde kod brisanja podataka, a obavještavaju kratko i jasno korisnika da je nešto izvršeno.

2.6. Dizajn prilagođen korisniku

Slika 16. Primjer dizajna koji je prilagođen korisniku [2]

Svaki je korisnik u isto vrijeme i kritičar jer svojim kritikama može pridonijeti, ali i odmoći uspje-hu aplikacije. Svaku kritiku, pozitivnu ili negativnu, treba cijeniti. Negativna kritika pridonosi unaprjeđenju proizvoda. Dobar je dizajner onaj dizajner koji svoj rad pokazuje i traži mišljenje ljudi koji i nisu toliko stručni u području kojim se bavi. Dakle, nakon svakog je većeg dizajniranog djela poželjno upitati ljude što misle. Ako većina ljudi shvati koja je funkcija svakog pojedinog dijela sučelja bez prevelikog dodatnog objašnjavanja, onda je dizajner napravio jako dobar po-


11

sao. Ako se proizvod dizajnira za velike mase, ne bi se trebao dizajnirati ukoliko se sviđa samo dizajneru. Ako se proizvod dizajnira za određenog klijenta, tvrtku ili korporaciju, sve se smjerni-ce dobivaju od klijenata i teži se slijediti vizualni identitet što je više moguće. Sučelje bi trebalo biti pregledno, jasnih boja, jasnog i logičnog rasporeda, a ipak svježe i novo. To nije nimalo lak zadatak.

2.7. Trajnost dizajna

Trajan ili bezvremenski dizajn je dizajn koji je uvijek moderan i nikada ne zastarijeva (Slika 17.). Ne oslanja se na moderne trendove, nego se uklapa u njih bez nekih većih ili gotovo nikakvih izmjena. Danas postoji veliki broj stilova i zadanih trendova koji će za određeno vrijeme biti zamijenjeni nekim novim. Da bi dizajn bio trajan i bezvremenski, najbolje je izraditi ga što jedno-stavnije i čišće. Poželjno je koristiti što više bijele, sive i crne boje kao i provjerene teksture koje se koriste već dugi niz godina (drvo, metal, crna koža, trava itd.). Kod izrade je bezvremenskog dizajna vizualni identitet od velike koristi jer je sam po sebi napravljen da traje.

Slika 17. Primjeri nekih bezvremenskih inačica dizajna [2]

2.8. Prototipi, koncepti, proof of concept

Svaka aplikacija prije izlaska na tržište mora proći veliki broj prototipa i testiranja. Prototipi-ma se provjerava mogućnost i funkcionalnost koncepta, tj. je li moguće napraviti ono što je zamišljeno. Koncept nastaje tako da se ideje prvo zapišu na papir, a tek onda u digitalni oblik i prvi prototip. Gruba skica na papiru znatno skraćuje vrijeme izrade digitalnog oblika (Slika 18.). Sljedeći je korak biranje alata za obradu slike i izrađivanje prvog digitalnog oblika koncepta. Na praznom se dokumentu, koji je prethodno postavljen na željene dimenzije i željenu gustoću piksela, skiciraju smjernice koje će olakšati crtanje grafičkih elemenata. To su iste one smjernice ili grube linije koje su povučene na papiru kako bi se predočio raspored grafičkih elemenata, no sada su postavljene točno na željene dimenzije (Slika 19.).

Nakon što su smjernice postavljenje, kreće se u postavljanje elemenata sučelja. Za ovaj se dio procesa koristi što manje boja jer se zapravo radi gruba skica, tj. wireframe. Nakon što su svi


12

elementi sučelja grubo nacrtani, tj. precrtani s papira, prvi je koncept gotov. Ovakav koncept klijent može mijenjati i u većini slučajeva se na njemu provode određene izmjene.

Slika 18: Primjeri digitalnog oblika koncepta, tj. wireframe

Slika 19: Primjer postavljanja smjernica

Slika 20. Koraci u izradi koncepta, tj. wireframea


13

ZADATAK 2Kreiraj wireframe, tj. koncept za aplikaciju. Dozvoljeno je korištenje najviše pet boja i pravilnih oblika.

2.9. Utjecaj ograničenja mobilnih uređaja

Različiti mobilni uređaji imaju različite komponente: ekrane, procesore, memoriju itd. Ekrani koji su osjetljivi na dodir postoje u mnogo dimenzija i oštrina zbog čega boje u prikazu mogu neprimjetno varirati. Najveća je prednost ekrana na dodir osjećaj koji korisnik ima kada ga ko-risti. Razni efekti i animacije stvaraju ugodno okruženje za rad. Efekti i animacije imaju svoja ograničenja. Ne treba koristiti napredne grafičke animacije ako se radi na primjer o aplikaciji koja služi za čitanje pošte.

Slika 21. Animacija od prve do zadnje sličice [1]

Za takve i slične aplikacije koriste se jednostavne animacije koje se najčešće sastoje od: poste-penog prikazivanja (engl. fade in), postepenog nestajanja (engl. fade out), pomaka sadržaja u lijevo, desno, gore, dolje itd. Takve animacije i efekti ne narušavaju rad uređaja i aplikacije jer su jednostavne, a ne koriste ni previše resursa mobilnog telefona. Prednost im je što se prikazuju na gotovo svim uređajima jednako. Za ovakav tip animacija nisu potrebni dodatni grafički ele-menti, već se animacija izvršava programski, kodom. Kompleksne animacije mogu koristiti niz grafičkih elemenata koji se izmjenjuju u odnosu na vrijeme, ali takve animacije nisu poželjne i mogu dovesti do velikog pada brzine u izvršavanju neke funkcije.


14

2.10. Postupak dizajniranja aplikacije za mobilne uređaje

Slika 22. Dizajn aplikacije

Aplikacije za mobilne uređaje moraju biti jednostavne, ali i ugodne za korištenje. Moraju pružati brz pristup informacijama i olakšavati svakodnevne zadatke. Postupak dizajna mobilne aplika-cije nije lak zadatak, a vođen je zahtjevima i željama klijenata. Nakon što je razvijen koncept i prvi prijedlog dizajna, potrebno je „isjeći“ ga na elemente, tj. izvaditi iz dizajna sve elemente koji tvore korisničko sučelje. Dakle, dizajn je samo jedna obična slika koja ne može tvoriti nešto funkcionalno.

ZADATAK 3Iz kreiranog wireframea iz prethodnog zadatka isjeci pojedine elemente i spremi ih kao zasebne uz prilagođeni naziv svakog elementa.

2.11. Službene platformske smjernice

Slika 23. Primjer ikona [2]

Platformske smjernice opisuju kako i na koji način pojedini element treba izgledati i kako se treba ponašati. Platformske smjernice postoje i zbog imidža platforme. UI Android sustav je jednostavan, pregledan i privlačan pa bi i aplikacije trebale biti takve kako ne bi previše vizualno odstupale od izgleda sustava ili izgledale kao neki drugi operacijski sustav.

2.11.1. Službene teme

Pomoću službenih tema aplikacija izgleda kao dio sustava (Slika 24.). Tema daje konzistentan izgled aplikaciji i njene elemente čini istima kao i u operacijskom sustavu. Ako ne postoji vlastiti dizajn za aplikaciju, neka će se od standardnih tema primijeniti automatski.


15

Slika 24. Primjer dviju standardnih tema Android sustava [2]

2.11.2. Efekti koji se pojavljuju kod interakcije korisnika s nekim elementom

Efekti korisniku daju do znanja da je napravio određenu interakciju s nekim dijelom korisničkog sučelja. Ovakvi su efekti uobičajeni u interakciji s gumbima, listama, prekidačima i ostalim ele-mentima. Ako se koristi službena tema Android sustava za aplikaciju, efekti će biti naslijeđeni od te teme, a ako se koristi vlastiti dizajn, efekte će morati kreirati pojedinac sam. Obično se za jednostavne efekte, npr. pritisak na neku tipku (Slika 25.), koriste .xml datoteke u kojima je opisana animacija, tj. efekt.

Slika 25. Primjer efekta nakon dodira prstom [2]

2.11.3. Minimalna veličina tipki i ostalih elemenata

Android operacijski sustav određuje preporučenu najmanju veličinu elemenata koji se klikaju, a koja je približno 7 mm ili 48dp-a. Minimalan je razmak između elemenata 8dp. Ovaj se razmak iz-među pojedinih elemenata dodjeljuje automatski. U vlastitom dizajnu treba osobito voditi računa o razmacima između elemenata jer će inače nastala sučelja biti nepregledna i nefunkcionalna.

Slika 26. Primjer dimenzionalnih odredbi i raspored elemenata[2]


16

2.11.4. Veličine ekrana

Veličine ekrana već su opisane prema različitim rezolucijama i gustoćama piksela. Standardne smjernice sustava za različite dimenzije zaslona su:

a) Budite fleksibilni

Sučelja se trebaju automatski prilagođavati bilo kojem zaslonu.

b) Optimizirajte sučelje

Korisnik će za dizajn za maleni zaslon morati uložiti više truda da dođe do različitih informacija jer sav sadržaj nije moguće smjestiti na zaslon malih dimenzija. Veliki zasloni (npr. tablet raču-nala) imaju puno mjesta za raspored elemenata i sadržaja. Dakle, ako aplikacija sadrži pregršt informacija, kod malih će zaslona imati jedno sučelje, a kod velikih drugo sučelje. Ovdje se ne misli na drugačiji izgled sučelja (boja, oblik itd.), nego na sučelje koje će prikazivati više infor-macija odjednom.

c) Elementi sučelja za sve

Potrebno je priložiti sve sličice/grafike, tj. elemente sučelja u svim ponuđenim razlučivostima (ldpi, mdpi, hdpi, xhdpi) kako bi svaki element sučelja izgledao lijepo, oštro i pravilne veličine na različitim dimenzijama zaslona.

2.11.5. Fontovi

Službeni je font Android operativnog sustava od verzije Ice Cream Roboto (Slika 27.). Posebno je kreiran za potrebe novog sustava i prilagođen je svim dimenzijama zaslona. Sav tekst koji postoji u aplikaciji koristi SP (engl. Scale-Independent Pixels) kao mjernu jedinicu dimenzije. SP mjerna jedinica osigurava jednako prikazan tekst na bilo kojem uređaju bilo kojih dimenzija zaslona, tj. neće biti niti manji niti veći na različitim rezolucijama zaslona.

Slika 27. Izgled Roboto službenog fonta [2]


17

Slika 28. Predefinirane veličine teksta [2]

2.11.6. Boje

Službena je boja Android platforme plava pa prema tome i većina elemenata sučelja koristi tu boju nakon korisnikove interakcije. Ne postoje određena pravila kod odabira boja, bitno je da boje odgovaraju vizualnom identitetu i da imaju dobar kontrast (Slika 29.). Ne smije se zaboravi-ti na osobe koje ne razlikuju boje, a posebno zelenu i crvenu. Alati poput ranije navedenog Color Scheme Designera nude i pregled sheme boja kroz oči osobe koja ne razlikuje boje.

Slika 29. Primjeri raspona boja

2.11.7. Ikone

Ikone su malene sličice koje uglavnom grafički opisuju neku funkciju (npr. simbol olovke govori korisniku da može promijeniti ili dodati neki tekst). Razlikujemo nekoliko vrsta ikona:

a) Pokretačka ikona (engl. Launcher Icon) je vizualna prezentacija aplikacije i nalazi se na početnom zaslonu i izborniku aplikacija. Ikone se trebaju dizajnirati s posebnom pažnjom, tre-baju izgledati lijepo i oštro na svim pozadinskim slikama početnog zaslona Android platforme. Dimenzija je ovih ikona propisana, a iznosi 48x48dp. Moraju biti lagane dubine ili 3D izgleda s gornje strane.

Slika 30. Primjer ikona, tj. dubine kod početnog zaslona [2]


18

b) Ikone na traci s alatima su vizualne prezentacije neke određene funkcije. Tako je na primjer u alatnima trakama moguće posjedovati ikone za brisanje, izmjenu podataka, snimanje podataka, novi izbornik, dodavanje korisnika itd. Dimenzija je ovakvih ikona strogo propisana i iznosi 32x32dp. Stil je također strogo propisan, tj. ikone ne bi trebale biti previše detaljne, nego ravnog (engl. flat) izgleda. Ako ikona sadrži tanku grafiku, potrebno je zakrenuti ju za 45 stup-njeva kako bi se ispunio prostor od 32x32dp.

Slika 31. Ikona za alatnu traku ima propisanu veličinu 32x32dp [2]

ZADATAK 4Dizajniraj vlastitu pokretačku ikonu pomoću GIMP alata za obradu fotografija.

RJEŠENJE ZADATKA

Za kreiranje se jednostavne pokretačke ikone koristi GIMP, besplatan alat za obradu fotografije. Najnovija je verziju GIMP-a dostupna na http://www.gimp.org. GIMP je malen i jednostavan alat za obradu fotografije, crtanje i kreiranje različitih elemenata. Vrlo je sličan Photoshopu. Iako nije napredan kao Photoshop, donosi vrlo zanimljive i napredne alate. (Slika 32.).

Slika 32. Korisničko sučelje GIMP-a: 1. Traka s alatima; 2. Radna površina; 3. Traka s bojama i slojevima


19

Nakon upoznavanja s GIMP-ovim sučeljem, kreće se u izradu pokretačke ikone. Prvi je korak kreiranje novog dokumenta tako da se u glavnoj alatnoj traci odabere File – New. Zatim se unosi veličina dokumenta, njegova rezolucija i boja pozadine (Slika 2.26.). Budući da postoje različiti Android uređaji s različitim zaslonima, mora se izraditi najmanje tri različite veličine pokretač-kih ikona. Postavlja se pitanje zašto izrađivati samo tri različite veličine elemenata ako postoje četiri gustoće piksela (XHDPI, HDPI, MDPI, LDPI)? Razlog tomu je činjenica što se danas više ne proizvode zasloni s najmanjom gustoćom piksela, odnosno zasloni LDPI rezolucije. Ako netko i posjeduje takav uređaj, Android platforma će mu automatski dodijeliti grafičke elemente MDPI gustoće piksela koji su najbliži LDPI rezoluciji.

Slika 33. Postavljanje novog dokumenta u GIMP-u

U prostor za unos širine i visine dokumenta unosi se 72px (piksela) (Slika 33.) jer dokument treba biti kvadratnog oblika. Visina i širina od 72px je standardna veličina ikone za HDPI rezolu-ciju. Ove granice dokumenta osiguravaju točnu veličinu ikone koja je jednaka ostalim ikonama na zaslonima s HDPI rezolucijom. Kada se kreira pokretačka ikona za XHDPI rezoluciju, veličina dokumenta bit će za 24px veća, odnosno 96x96px, a za MDPI rezoluciju 24px manja u odnosu na HDPI rezoluciju, tj. 48x48px. Kao rezolucija dokumenta navedena je rezolucija od 150dpi. Ova rezolucija može ostati i standardna 72dpi, no povećanjem se na 150dpi osigurava oštrina i veća količina detalja ikone. Postavlja se pozadina ikone koja je prozirna. Pozadina ne mora nuž-no biti prozirna jer će biti kreirana pokretačka ikona koja ima sjenu pa je ovaj korak od iznimne važnosti.

Nakon što je kreiran novi dokument, crta se osnovni oblik ikone koji je kvadratnog oblika sa za-obljenim rubovima. Na slici 34. prikazan je položaj alata koji su potrebni. Ranije kreirani kvadrat imat će zaobljen rub od 12px. Jednostavno se desnim klikom miša na radnu površinu, povlače-njem ocrtava osnovni oblik ikone.


20

Slika 34. Postavljanje alata u GIMP-u: 1. označava se „Rectangle selection tool“; 2. u postavkama „Rectangle selection tool“ označava se da kvadrat ima zaobljen rub, a nakon toga se zadaje polumjer

od 12px; 3. držanjem lijevog klika na mišu i povlačenjem miša preko radne površine ocrtava se osnovni oblik kvadrata sa zaobljenim rubom

Napravljeni se osnovni oblik mora obojiti. Na slici 35. prikazan je položaj alata za bojanje i njego-ve postavke. Kada se odabere boja u dijalogu za odabir boje, boja se objekt unutar okvira oblika (iscrtani okvir).

Slika 35. Postavljanje alata za bojenje u GIMP-u: 1. označava se „Bucket fill tool“ i otvara se dijalog za iz-mjenu boje ispune; 2. u otvorenom dijalogu odabire se boja za ispunu objekta; 3. klikom unutar granica

objekta (iscrtan dio) nanosi se boja ispune čime završava bojanje objekta

Nakon bojanja objekta dodaje se sjena na objekt tako da se napravi kopija postojećeg objekta (Slika 36.). Kopiju koja je kreirana sakriva se od pogleda, a original će se obojiti (istim postupkom kao i prvi puta) u crnu boju.


21

Slika 36. Kopiranje objekta u GIMP-u: 1. klikom na tipku za kopiranje „Layera“, odnosno sloja radi se kopija objekta; 2. klikom na tipku (simbol oka) pored kopiranog sloja skriva se kopija od pogleda

Kada je originalni objekt obojan, kreira se sjena pomoću Gaussian blur filtera. GIMP podržava mnoštvo filtara koji omogućuju različite efekte i manipulacije objekata i fotografija. Prije pri-mjenjivanja blur efekta potrebno je maknuti oznake s objekta. Ako objekt ostane obilježen, blur efekt će se primjenjivati unutar granica objekta (iscrtani dio) pa će se dobiti oštar rub unutar kojeg će objekt biti zamućen. Oznake se uklanjaju istovremenim pritiskom tipaka SHIFT+CTRL+A na tipkovnici.

Slika 37. Blur filter u GIMP-u: 1. u glavnom se izborniku bira Filters; 2. u padajućem se izborniku obilje-žava Blur i klika se na Gaussian Blur


22

Slika 38. Blur filter u GIMP-u: 1. u novootvorenom dijalogu postavljaju se vrijednosti blur po horizontal-noj i vertikalnoj osi; 2. pritiskom na tipku OK dodajemo efekt na naš objekt

Nakon primijenjenog blur filtra na objekt, kopija objekta koji je skriven od pogleda dobit će se ponovnim pritiskom na tipku pokraj sloja sa simbolom oka. Ovim se postupkom pravi osnovni oblik ikone. Daljnjim modificiranjem i dodavanjem sadržaja na osnovni oblik može se dobiti veliki broj varijanti ikone.

Kada se završi s kreiranjem ikone i kada se dođe do zadovoljavajućeg izgleda, ikonu se pohranju-je sa željenim imenom u *.png format. PNG (engl. Portable Network Graphics) format podržava prozirnost tako da će se sjena i zaobljeni rubovi vidjeti na Android uređaju. Postupak izrade ikone određene gustoće piksela uvijek je isti. Razlika je samo u veličini dokumenta kao što je već objašnjeno prije.

Slika 39. Izgled jedne gotove ikone sa zaobljenim rubovima i sjenom na Android uređaju s određenom pozadinskom slikom.

2.12. Informacijske poruke

Operacijski sustav Android temelji se na jednostavnosti i ugodnom korištenju. Postoje određene smjernice koje jednostavno i jasno obavještavaju korisnika da se nešto dogodilo ili da se izvrša-va:

a) Budite kratki. Obavijestite korisnika o nekoj radnji sa što manje riječi.

b) Budite jednostavni. Nije potrebno korisniku postavljati duge upite kao na primjer: „Je-ste li sigurni da želite obrisati ovu datoteku?“. Dovoljni su jednostavni upiti: „Obrisati?“.


23

c) Obraćajte se korisniku koristeći zamjenicu „Ti“. Tekst poruke ili upita koji se postavlja korisniku treba zvučati kao opušteni razgovor kojim se i inače služite u slobodno vrijeme.

d) Važne stvari stavljajte na prvo mjesto.

e) Opišite samo što je nužno.

f) Izbjegavajte ponavljanja.

2.13. Uzorci

Uzorci su na Android platformi elementi sučelja. Ako za takve elemente nije predviđen poseban dizajn, onda se koriste neke od službenih Android tema. Uzorci dolaze u velikom broju, a naj-važniji su:

a) Obavijesti

Obavijesti informiraju i obavještavaju korisnike. To su: nove dolazne poruke, elektronička pošta, propušteni telefonski pozivi itd.

Slika 40. Primjer obavijesti dolazne poruke

b) Traka alata

Traka alata služi za brz pristup pojedinim funkcijama aplikacija i ubrzava korisnikov rad s aplika-cijom (Slika 41.).

Slika 41. Primjer jedne alatne trake koja sadrži osnovne alate: pretraga, opcije itd. [2]

c) Swipe Views

Swipe Views predstavlja brzu navigaciju kroz sadržaj aplikacije lijevim i desnim pokretima prsta po zaslonu. Na taj se način postiže efekt listanja stranica.


24

Slika 42. Primjer Swipe View navigacije pokretom u lijevo [2]

d) Potvrđivanje i informiranje (Slika 43.)

Potvrđivanje (engl. Confirming) je maleni dijalog kojim se potvrđuju radnje, npr. brisanje i sl.

e) Informiranje (engl. Acknowledging)

Informiranje podrazumijeva informaciju koja je upućena korisniku da je nešto uspješno obav-ljeno.

Slika 43. Confirming & Acknowledging [2]

f) Widgets

Widgeti predstavljaju produženo sučelje neke aplikacije (Slika 44.). Nalaze se na početnom za-slonu i obavljaju svoje funkcije čak i kada je aplikacija ugašena. Obično widgeti nemaju sve funkcije normalne aplikacije i pritiskom se na njih otvara normalna aplikacija.

Slika 44. Najpopularniji primjeri widgeta [2]

Android aplikacija ima stroga pravila o tome kako elementi sučelja i ikone za pojedini dio sučelja trebaju izgledati. Ako se kreira multiplatformska aplikacija, ne bi se trebao koristiti isti stil, tj. isti skup ikona na svim platformama. Ta pravila ne vrijede ukoliko postoji kompletno dizajnirano sučelje koje ne koristi niti jednu službenu temu Android platforme.


25

2.14. Reusable UI

Reusable UI je korisničko sučelje čiji se elementi mogu iskoristiti za neke druge projekte (Slika 45.). Elementi korisničkog sučelja (ikone, izgled tipki, pozadinska tekstura) koji su rađeni za nekog klijenta mogu se ponovno iskoristiti u nekom drugom projektu. Zbog toga je potrebno napraviti skup ikona koje se mogu koristiti više puta, a da se ne primijeti da su preuzete iz neke druge aplikacije. Ikone na alatnoj traci jedne aplikacije ne razlikuju se mnogo u stilu i veličini od ikona neke druge aplikacije. Isto vrijedi i za pozadine i neke druge elemente UI-a. Ako se uče-stalo koriste isti elementi, korisno bi bilo organizirati ih po direktorijima kako bi se proces izrade sučelja još više ubrzao.

Slika 45. Primjeri Reusable UI elemenata [1]

ZADATAK 5Iz isječenih elemenata u prethodnom zadatku stiliziraj svaki element i spremi ga pod odgovarajućim nazivom.

2.15. Building blocks

Building blocks su gotovi grafički elementi koji se mogu koristiti odmah (engl. out of the box), a nalaze se u svakoj aplikaciji. Služe za prikaz i organizaciju podataka i omogućavaju interakciju korisnika s aplikacijom. Izgled im varira ovisno o osnovnoj temi određenog mobilnog uređaja na koji nije primijenjen niti jedan drugi grafički element.

2.15.1. Kartice (engl. Tabs)

Kartice služe za brzu navigaciju kroz aplikaciju. Obično se nalaze na vrhu aplikacije, a postoje u različitim izvedbama. Promjena sadržaja ovakvim načinom navigacije odvija se pritiskom na određenu karticu ili pomicanjem prsta preko ekrana u desno ili lijevo (engl. swipe).

a) Pomične kartice (engl. Scrollable tabs)

Najpoznatiji je primjer pomičnih kartica Google Play aplikacija (Slika 46.). Kartice se nalaze pri samom vrhu aplikacije i reagiraju na dodir i pokret. Ovaj način navigacije podržava Android operacijski sustav 3.0. Može sadržavati velik broj naslova (engl. Item), ali uvijek prikazuje samo tri tako da izmjenjuje naslove tijekom korisničkog kretanja kroz izbornik. Obične, fiksne kartice to ne mogu.


26

Slika 46. Google Play i Scrollable tabs

b) Fiksne kartice (engl. Fixed tabs)

Fiksne se kartice također najčešće nalaze na samom vrhu ekrana i služe za brzu navigaciju kroz sadržaj aplikacije. Za razliku od pomičnih kartica mogu sadržavati samo mali broj naslova. Navi-gacija se vrši dodirom na naslov ili pomicanjem prsta po ekranu. Svaki naslov je jednake širine, a širina je određena najvećom karticom, odnosno karticom koja ima najduži tekst. U slučaju da nema dovoljno mjesta, kartice postaju pomične. Iz tog se razloga preporučuje koristiti samo tri kartice sa što kraćim tekstom.

Slika 47. Primjer fiksnih kartica (Fixed tabs)

2.15.2. Liste

Liste prikazuju podatke koji su organizirani jedan ispod drugoga što omogućava njihov lakši pre-gled. Navigacija se kroz listu provodi pomicanjem prsta prema gore ili dolje. Svaki je podatak u listi odvojen od drugog tankom linijom zbog preglednosti, a takav se podatak naziva element liste. Liste podržavaju interakciju korisnika s pojedinim naslovim.

Liste se mogu pojaviti u više oblika:

a) Liste s naslovom koji ima samo jedan red podataka jesu primitivne liste. Korisne su kod „lakih“ sučelja i kratkih podataka.

b) Liste s naslovom koji ima dva reda podataka koriste se u reprodukciji glazbe, imenika itd. Jedan naslov ili polje liste sadrži više redova od kojih je jedan red naslov, a drugi opis.

c) Liste s više redova podataka mogu sadržavati tekst, slike, gumbe i ostale elemente za prikazivanje podataka.

Liste sadrže i razdjelnik sekcija koji olakšava organizaciju podataka i povećava preglednost.


27

Slika 48. Liste s jednim i više redova podataka

2.15.3. Rešetke (engl. Grid List)

Tablice su alternativa listama, a najčešće prikazuju neki podatak koji sam sebe opisuje slikom. Za razliku od običnih lista pomične su u svim smjerovima, a dolaze u dva oblika:

a) Generičke rešetke (engl. Generic grids)

Redoslijed sadržaja određuje smjer u kojem se pomiče prst (kod običnih lista sadržaj je jedan ispod drugoga) što može zbuniti korisnika jer su rešetke pomične u svim smjerovima. Kako ne bi došlo do zabune, ograničavaju se ili na vertikalan (Slika 49.) ili na horizontalan smjer. Kod horizontalnog se smjera pomicanja ne bi trebala koristi pomična kartica jer se kod horizontalne interakcije prstom mijenja sadržaj.

Slika 49. Primjer rešetke s vertikalnim pomakom

b) Rešetke s naslovima

Rešetke se s naslovima po svojoj funkcionalnosti ne razlikuju od generičkih rešetki. Jedina je razlika što uz sliku posjeduju i tekst koji opisuje pojedinu rešetku (Slika 50.).


28

Slika 50. Rešetke sa slikom i naslovima

2.15.4. Prelistavanje (engl. Scrolling)

Prelistavanje je funkcija koja se koristi kada postoji velika količina sadržaja koji se ne nalazi niti u listi niti u rešetci. Obično se nalazi u raznim prozorima opcija. Za pomak se koristi prst u smjeru gore, dolje, a ponekad i lijevo, desno. Brzina prelistavanja ovisi o brzini pomaka prsta. Aplikacija omogućuje ovu funkciju ako je sadržaj prevelik za ekran uređaja. Na lijevu stranu ekrana dodaje indikator (engl. scrollbar) da je pomak omogućen.

2.15.5. Spinners

Spinneri omogućuju brz odabir pojedinog podatka. U nefokusiranom stanju spinner prikazuje zadnju odabranu stavku. Dodirom na spinner otvara se padajuća lista s ponuđenim podatcima za odabir koji se nalaze u formama ili alatnim trakama (Slika 51.). Ako se nalaze u formama, pogodni su za odabir raznih informacija prilikom registracije korisnika na neki servis (spol, kuć-na adresa, adresa na poslu). Ako se nalaze u alatnim trakama, uglavnom služe za promjenu ili pregled podataka. Ako se promjena ili pregled podataka vrši često, preporučuje se korištenje kartica.

Slika 51. Primjer spinnera u formi ili alatnoj traci

2.15.6. Gumb (engl. Button)

Gumb je osnovni i najpoznatiji element svakog sučelja. Koristi se za potvrđivanje podataka, izvršavanje neke akcije itd. Može sadržavati i sliku i tekst. Android podržava dva tipa gumba: standardni gumb i gumb bez ruba.

a) Standardni gumb

Standardni je gumb osnova svakog sučelja. Pojavljuje se s obrubom i pozadinom, a može biti veliki i mali. Mali se koristi kako bi se uklopilo u sadržaj aplikacije, a veliki u dijalozima. Razlikuju se veličinom gumba i veličinom teksta u njima.


29

Slika 52. Primjer malog i velikog gumba

b) Gumb bez ruba

Gumb bez ruba sadrži sve funkcije standardnog gumba, ali nema pozadinu i rub zbog čega se lakše uklapa u moderan izgled novijih verzija Android sustava. Ovim svojstvom izgleda kao obič-na sličica koja je podložna interakciji korisnika

Slika 53. Primjer gumba bez ruba

ZADATAK 6Gotove stilizirane elemente sučelja iz prethodnog zadatka primjeni na jednom gumbu u Eclipse razvoj-nom okruženju.

2.15.7. Polje za unos teksta (engl. Text fields)

Polje za unos teksta omogućava korisniku unos teksta u aplikaciju. Kada korisnik dodirne polje za unos teksta, Android automatski prikazuje tipkovnicu i omogućuje korisniku unos. Polja za unos podržavaju odabir teksta, ali i kopiranje i lijepljenje u neko drugo polje za unos. Mogu biti jednoredna ili višeredna. Ako su polja jednoredna, tekst se pri unosu pomiče u lijevo i uvijek prikazuje zadnju riječ ili slovo koje je korisnik upisao, a višeredna polja tekst na kraju unosa prebacuju u sljedeći red. Polja za unos mogu biti i kategorijski opredijeljena. Postoje polja koja omogućuju unos lozinke, broja telefona, adrese elektroničke pošte i sl. Kategorija prilagođava tipkovnicu za lakši i brži unos teksta: ako postoji polje za unos broja telefona, tipkovnica je auto-matski postavljena na numeričku verziju, a ako postoji polje za unos lozinke, unos će prikazivati samo zvjezdice (*). Polja se za unos teksta mogu i sama završavati, tj. davati prijedloge na osnovi teksta koji upisujemo (engl. auto-complete). Ovakav je tip pogodan za unose adresa elektronič-ke pošte ili telefonskih brojeva jer se ponašaju kao jednostavna pretraga.


30

Slika 54. Primjer tekstualnog unosa

2.15.8. Traka za pretragu (engl. Seek bar) i klizači (engl. Sliders)

Klizači daju brz i jednostavan odabir neke razine ili vrijednosti. Sastoje se od trake i gumba koji klize po traci. Najmanja je vrijednost na lijevoj strani, a najveća na desnoj. Najčešće se koriste kod promjene glasnoće ili oštrine, kontrasta, intenziteta itd.

Slika 55. Primjer klizača u standardnim Android 4.0 temama

2.15.9. Napredak i aktivnost (engl. Progress and Activity)

Napredak i aktivnost ukazuju da se neki proces izvršava te obavještavaju korisnika da pričeka dok se aktivnost u potpunosti ne izvrši.

a) Traka napretka

Traka se napretka koristi za one aktivnosti za koje se zna koliko točno traju te obavještava korisni-ka koliko je vremena potrebno da se zadatak izvrši. Traka se napretka uvijek ispunjava od 0% do 100% i nikada se ne vraća na nižu vrijednost. Ako se u pozadini izvršava više od jedne aktivnosti, traka napretka prikazuje ukupno stanje izvršenosti svih aktivnosti. Kada dođe na 100% označava kraj svih aktivnosti. Na primjer, ako postoji samo jedan zadatak koji se trenutno izvršava, traka napretka pokazuje proces od 0% do 100% izvršenosti. Ako postoji više procesa u pozadini, oni se zbrajaju i njihov se zbroj dijeli sa 100 i tako se dobiva postotak izvršenja pojedinog procesa:

2.15.8.Traka za pretragu

Klizači daju brz i jednostavan odabir koji klize po traci. Najmanja je koriste kod promjene glasnoće

Slika 2.46.Primjer klizača u standardnim Android 4.0 temama

2.15.9.Napredak i aktivnost

Napredak i aktivnost ukazuju da se neki proces izvršava te obavještavaju korisnika da pričeka dok se aktivnost u potpunosti

Traka napretka

Traka se napretka koristi za one korisnika koliko je vremena potrebno da se zadatak izvrši. Traka od 0% do 100% i nikada se ne jedne aktivnosti, traka napretka prikazuje ukupno stanje izvršenosti svih aktivnostidođe na 100% označava kraj svih aktivnosti. Na primjerse trenutno izvršava, traka napretka pokazuje proces od 0% do 100% izvršenosti. Ako više procesa u pozadini, oni se zbrajajuizvršenja pojedinog procesa:

Kada je dobiven iznos u postotcima pojedinog procesajednu vrijednost postotka. Daklesvaki daje postotak od 25%. Pri izvršenju prvog procesa traka napretka izvršenju drugog procesa traka sedok se ne dođe do 100% napretka.

za pretragu (engl. Seek bar) i klizači (engl. Sliders)

brz i jednostavan odabir neke razine ili vrijednosti. Sastoje se od traje vrijednost na lijevoj strani, a najveća na desnoj. Najčešće se

glasnoće ili oštrine, kontrasta, intenziteta itd.

Primjer klizača u standardnim Android 4.0 temama

Napredak i aktivnost (engl. Progress and Activity)

ukazuju da se neki proces izvršava te obavještavaju korisnika da pričeka ne izvrši.

Traka se napretka koristi za one aktivnosti za koje se zna koliko točno trajupotrebno da se zadatak izvrši. Traka se napretka uvijek ispunjava

od 0% do 100% i nikada se ne vraća na nižu vrijednost. Ako se u pozadini traka napretka prikazuje ukupno stanje izvršenosti svih aktivnosti

dođe na 100% označava kraj svih aktivnosti. Na primjer, ako postoji samo traka napretka pokazuje proces od 0% do 100% izvršenosti. Ako

oni se zbrajaju i njihov se zbroj dijeli sa 100 i tako se

1 2 3

100

iznos u postotcima pojedinog procesa, povećava se iznos trake napretka za Dakle, ako postoje četiri procesa koji se izvršavaju u pozadini,

svaki daje postotak od 25%. Pri izvršenju prvog procesa traka napretka traka se napretka uvećava za još 25% , tj. ukupno

do 100% napretka.

ili vrijednosti. Sastoje se od trake i gumba vrijednost na lijevoj strani, a najveća na desnoj. Najčešće se

Primjer klizača u standardnim Android 4.0 temama

ukazuju da se neki proces izvršava te obavještavaju korisnika da pričeka

aktivnosti za koje se zna koliko točno traju te obavještava napretka uvijek ispunjava

vrijednost. Ako se u pozadini izvršava više od traka napretka prikazuje ukupno stanje izvršenosti svih aktivnosti. Kada

postoji samo jedan zadatak koji traka napretka pokazuje proces od 0% do 100% izvršenosti. Ako postoji

i tako se dobiva postotak

⋯

iznos trake napretka za procesa koji se izvršavaju u pozadini,

svaki daje postotak od 25%. Pri izvršenju prvog procesa traka napretka je na 25%, pri , tj. ukupno 50% i tako redom


31

Kada je dobiven iznos u postotcima pojedinog procesa, povećava se iznos trake napretka za jednu vrijednost postotka. Dakle, ako postoje četiri procesa koji se izvršavaju u pozadini, svaki daje postotak od 25%. Pri izvršenju prvog procesa traka napretka je na 25%, pri izvršenju drugog procesa traka se napretka uvećava za još 25% , tj. ukupno 50% i tako redom dok se ne dođe do 100% napretka.

Slika 56. Traka napretka sa standardnom temom Android 4.0 sustava

b) Aktivnost

Indikator aktivnosti obavještava korisnika da se proces izvršava, ali ne i kada će završiti. Obično se koristi za procese za koje se ne zna kada će završiti i kojima treba duže vrijeme da se izvrše. Može se pojaviti u dva standardna oblika: kao traka ili kao kružni indikator.

Slika 57. Traka aktivnosti sa standardnom temom Android 4.0 sustava

Kružni indikator ne dozvoljava pružanje dodatnih informacija korisniku i uvijek se prikazuje sam. Trake indikatora dopuštaju takve tekstualne informacije.

Slika 58. Lijevo je prikazan neispravan, a desno ispravan način prikazivanja kružnog indikatora

c) Unikatni indikatori napretka (engl. Custom progress indicators)

Elementi koji su opisani za prikaz napretka nekog procesa obično su dovoljni za svaku aplikaciju, no ponekad se mora posezati za vlastitim rješenjima. Unikatni indikatori mogu prikazivati tok pojedinog procesa na razne načine. Za to se koriste različite sličice i boje kako bi se korisniku dao uvid u ono što se trenutno događa, što se dogodilo, a što nije. Slika 59. prikazuje jedan unikatni indikator procesa koji koristi aplikacija Google Play. Plavi krug indicira stanje, tj. da se proces izvršava, a bijela pribadača informira korisnika što se dogodilo s datotekom koju je pokušao spremiti na svoj mobilni telefon.


32

Slika 59. Unikatni indikator napretka

Ako standardni indikatori korisniku ne pružaju dovoljno informacija, uvijek se može kreirati vla-stiti indikator koji će nastojati što bolje uklopiti se u temu ili UI koji se koristi.

2.15.10. Prekidači (engl. Switches)

Prekidači korisniku pružaju mogućnost izbora određene funkcionalnosti. Postoje tri vrste preki-dača: checkbox, radio button i on/off prekidači.

a) Checkbox

Checkbox se sastoji od okvira i „kvačice“, a korisniku pruža mogućnost izbora: hoće li omogućiti ili onemogućiti više opcija odjednom. Korištenje se checkboxa izbjegava ako je samo jedan iz-bor. Tada se prednost daje on/off prekidaču. Checkbox ima dva stanja: unchecked ili neoznačeno i checked ili označeno.

Slika 60 Prikaz checkboxa i izgled svih njegovih stanja

b) Radio button

Radio button ili kružni gumb vrlo je sličan checkboxu, a razlikuje se u radu s izbornikom. Kod checkboxa je moguće odabrati više ponuđenih izbora, a kod radio buttona samo jedan izbor iz ponuđene liste. Od korisnika traži da odabere samo jednu opciju iz liste, a pri tome može vidjeti sve ponuđene opcije. Ako nije bitno da korisnik vidi sve ponuđene opcije, preporuča se korište-nje spinera jer zauzima manje mjesta.

Slika 61. Prikaz radio buttona i izgled svih njegovih stanja


33

c) On/Off gumb

Ovaj gumb omogućuje promjenu stanja jedne funkcije. Stanja su: istinito (engl. True) ili neisti-nito (engl. False).

Slika 62. Prikaz on/off gumba i izgled svih njegovih stanja

ZADATAK 7Gotove stilizirane elemente sučelja iz zadatka 4 primijeni na jednom on/off gumbu u Eclipse razvojnom okruženju putem XML layouta.

2.15.11. Dijalozi

Dijalozi su maleni prozori koji od korisnika očekuju donošenje odluka kako bi proces mogao nastaviti s radom. Obično se sastoje od poruke s dva gumba, tj. da ili ne gumba, ali im sadržaj može biti i kompleksniji, na primjer unos teksta ili postavka neke opcije.

Slika 63. Primjer dijaloga

Dijalog se sastoji od tri glavna područja: naslova, sadržaja dijaloga i gumba.

a) Naslov

Naslov bi trebao u što kraćem obliku prenijeti korisniku ono što se od njega traži. Primjerice, ako je potrebno da korisnik promijeni kontrast zaslona, u naslovu će pisati „kontrast zaslona“. Treba biti kratak, jednostavan i govoriti sam za sebe.

b) Sadržaj dijaloga

U sadržaj se dijaloga postavljaju svi željeni elementi teksta, spinera, ili seek bara. Sadržaj dijalo-ga može biti i prazan ako korisnik treba samo potvrditi neku radnju. U tom slučaju je dovoljno napisati što se traži u naslovu.


34

c) Gumbi

Gumbi predstavljaju zadnji dio dijaloga. Obično su prisutni gumbi koji označavaju potvrdan i gumbi koji označavaju negativan odgovor i u skladu s njima se izvršava određena operacija.

Slika 64. Nekoliko različitih verzija dijaloga

2.15.12. Pickers

Picker pruža mogućnost izbora jedne vrijednosti iz cijelog kompleta. Odabir se vrši uz pomoć strelica u smjeru gore/dolje, dodira ili unosa pomoću tipkovnice. Picker je najbolje postaviti u dijalog zbog njegove veličine.

Slika 65. Prikaz standardnog Pickera koji je smješten u dijalogu

Android operacijski sustav pruža specijalne pickere kao što je picker za odabir datuma i vreme-na. Takvi se pickeri nalaze u samom dijalogu, a omogućuju jednostavan i točan odabir datuma ili vremena po postavkama vremenske zone telefona. Ovakvim je načinom pogreška kod unosa svedena na minimum.

Slika 66. Prikaz specijalnog pickera: vrijeme i datum


35

2.16. Navigacija i widgeti

Navigacija Android aplikacija mijenjala se iz verzije u verziju jer su se uklanjale postojeće po-greške. Prijašnje su se verzije sustava oslanjale na fizičku tipku Back (nazad) kojom se vraćala aplikacija na prethodni sadržaj. Pojavom novih tehnologija fizička se tipka rjeđe koristi za na-vigaciju. U alatnu se traku aplikacije sada dodaje tipka za povratak na prijašnji sadržaj. Ta tipka obično predstavlja ikonu aplikacije sa strjelicom prema nazad. Strjelica je vidljiva samo ako je korisnik napredovao naprijed kroz aplikaciju.

Slika 67. Back ili tipka za povratak na prijašnji sadržaj

Iako tipka za povratak, koja se nalazi u traci alata, služi za povratak na prijašnji sadržaj, prven-stveno je namijenjena za navigaciju unutar aplikacije. Fizička se tipka za povratak na uređaju koristi samo za povratak na prethodni sadržaj. Tipkom za povratak može se i izići iz aplikacije, a u nekim slučajevima može poslužiti kao navigacija na prijašnju aplikaciju ako je ostala u funkciji u pozadini sustava. Fizička tipka uređaja također sakriva ili odbacuje razne dijaloge i upozorenja koji se prikazuju korisniku, uklanja obilježeni tekst i skriva virtualnu tipkovnicu.

Slika 68. Primjer rada Back tipke kao dijela aplikacije i kao dijela uređaja

Ako aplikacija posjeduje widget, navigacija se na neki sadržaj aplikacije može izvršavati i pu-tem početnog zaslona. Widget je maleno korisničko sučelje koje se nalazi na početnom ekranu Android sustava, a korisniku omogućava brzi pregled pojedinog važnog sadržaja i obavljanje najosnovnijih funkcija. Widgeti uglavnom prikazuju informacije u kratkom obliku, a za izvršava-nje operacija koriste tipku koja otvara glavnu aplikaciju i nudi korisniku mogućnost interakcije. Te bi se tipke na widgetima mogle nazvati i prečacima. Zahvaljujući widgetima nije potrebno navigirati cijelom aplikacijom kako bi se došlo do određene funkcije. Funkcija se od njih dobiva automatski samo jednim dodirom.


36

Slika 69. Primjer navigacije kroz sučelje widgeta

Navigacija se na određeni sadržaj aplikacije može izvršavati i putem notifikacija. Notifikacije obavještavaju korisnika da se neka funkcija izvršila, da je korisnik dobio novu poruku, da je pro-pustio poziv itd. Pritiskom na notifikaciju korisniku se prikazuje glavna aplikacija s detaljnijim pojašnjenjem, tj. sadržajem notifikacije i tipka za dodatnu interakciju ili upravljanje sadržajem. Primjer je ovakve navigacije Gmail. Korisniku dolazi notifikacija da je stigla nova elektronička po-šta. Pritiskom na notifikaciju otvara se prozor Gmail aplikacije s cijelom porukom koju je korisnik primio. Ako korisnik ne želi odgovoriti na poruku, pritiskom fizičke tipke Back na uređaju dolazi na početni zaslon Android operacijskog sustava, a pritiskom Back tipke u aplikaciji koja se nalazi u alatnoj traci navigira unutar Gmail aplikacije i odlazi na prozor koji prikazuje svu elektroničku poštu.

ZADATAK 8Dizajniraj jednostavnu, ali unikatnu navigaciju koja se temelji na smjernicama za navigaciju koje su opisane u ovom poglavlju.

2.17. Geste i animacija

2.17.1. Geste

Pomoću gesta korisnik može manipulirati sadržajem koji mu je ponuđen: može obilježavati tekst, otvarati novi sadržaj, povećavati slike itd. Ispod su prikazane sve geste koje su moguće u Android operacijskom sustavu i koje se mogu koristiti u aplikacijama.

Dodir je gesta kojom korisnik pokreće određene funkcije pritiskom gumba ili ostalih sadržaja.


37

Dug dodir je gesta kojom korisnik, kao i kod kratkog dodira, pokreće određene funkcije pritiskom gumba ili ostalih sadržaja. Koristi se kada neki objekt (tipka, polje za unos teksta itd.) ima više funkcija. Tipičan je primjer polje za unos teksta. Kratkim se dodirom otvara virtualna tipkovnica, a dugim se dodirom (u trajanju od jedne do dvije sekunde) prikazuju funkcije za kopiranje ili lijepljenje teksta.

Pomak (engl. Swipe) je gesta brzog pomicanja prsta lijevo ili desno po ekranu. Efekt je sličan listanju stranica. Ovakva je gesta postala uobičajena na Android operativ-nom sustavu koji ima verziju veću od 3.0, a koristi se za navigaciju kroz sadržaj.

Povlačenje (engl. Drag) je gesta koja se koristi za pomicanje određenih objekata po zaslonu. Nalazi se u raznim igricama i jedna je od osnovnih funkcija početnog zaslona (premještanje ikona i widgeta).

Dupli dodir (engl. Double touch) se koristi kod centriranja i brzog približavanja slika ili mapa. Može se koristiti i na gumbima i ostalim dijelovima sučelja.

Raširivanje prstiju (engl. Pinch open) je gesta koja se koristi kod približavanja (engl. zoom in) sadržaja (dokumenata, slika i mapa). Ne preporuča se korištenje u druge svrhe.


38

Spajanje prstiju (engl. Pinch close) je gesta koja se koristi kod udaljavanja (engl. zoom out) sadržaja (dokumenata, slika i mapa). Ne preporuča se korištenje u dru-ge svrhe.

2.17.2. Animacija

Animacija je standard koji je prisutan u gotovo svim elementima Android operacijskog sustava i njegovim aplikacijama. Animacije korisniku pružaju vizualnu informaciju o onome što se događa ili se dogodilo. Aplikaciji daju profesionalni izgled i kvalitetu. S korištenjem animacija ipak treba pripaziti. Ne smije ih biti previše niti smiju usporavati rad aplikacije. Ako ih ima previše, rad s aplikacijom bi se odužio, a to bi moglo dovesti do nezadovoljstva korisnika.

2.18. Skalabilni dizajn

Skalabilni je dizajn dizajn koji se prilagođava veličini zaslona mobilnog uređaja. Budući da se Android mobilni uređaji pojavljuju u velikom broju različitih dimenzija zaslona, dizajniranje je UI-a veoma teško. Kao što je već rečeno, uz različite se veličine zaslona vezuju i različite gustoće piksela na zaslonima. Prema tome, crtanje jednog gumba s određenim dimenzijama jednostav-no nije moguće jer takav gumb ne bi bio istih dimenzija na različitim uređajima. Zbog različitih bi gustoća piksela i različitih dimenzija zaslona takav gumb bio distorziran i vrlo loše kvalitete (Slika 70.).

Slika 70. Primjer distorzije na gumbu s unikatnom grafikom

Android razvojno okruženje nudi jednostavno rješenje ovog problema. U razvoju aplikacije stvorene su četiri mape: ldpi, mdpi, hdpi i xhdpi u koje se smještaju sličice za različite gustoće zaslona. Na taj način uređaj traži i prepoznaje sličicu koja mu najbolje odgovara i koja će se naj-pravilnije prikazivati na korisnikovom zaslonu (Slika 71.). Ova varijanta ima najveći učinak kod oštrine i boja grafike.

Slika 71. Izgled datoteka za različite gustoće zaslona


39

Ovakav se način ne može primijeniti na gumb i njegovu pozadinu koja je prilagođena (engl. cu-stom) grafika jer točne dimenzije sličice nisu prihvatljive. Tada u obzir dolaze skalabilne grafike koje razvlačenjem ne gube na kvaliteti, a koje posjeduju prijelomne točke koje omogućavaju da se pojedini elementi grafike razvlače, a pojedini ne razvlače. Ovo je moguće korištenjem .9.png formata.

*.9png format je jedinstven grafički format, a do njega se dolazi pomoću aplikacije koja dolazi s Eclipse razvojnim sustavom (..\sdk\tools\draw9patch.bat) (Slika 72.).

Slika 72. Izgled početnog zaslona aplikacije za izradu 9.png grafika

Otvaranjem aplikacije za izradu .9.png grafike otvara se prozor (Slika 73.) koji traži unos slike od koje se grafika .9.png želi kreirati. Nakon što je slika ubačena u program, automatski se generira prikaz izgleda grafika za određeni element ako na nju nisu primijenjena pravila „kontroliranog rastezanja“ ili ako .9.png grafika nije izrađena (Slika 73. desno). Na lijevoj se strani aplikacije nalazi prostor za uređivanje, tj. prostor za dodavanje točaka širenja.

Slika 73. Izgled zaslona aplikacije za izradu 9.png grafika nakon dodavanja grafike

U prostoru za uređivanje, tj. dodavanje točaka širenja nalazi se grafika. Točke koje se zadaju određuju granice, tj. mjesta gdje se slika smije raširivati, a gdje ne. Postoji četiri različita prosto-ra na kojima se točke mogu dodavati. Svaki se od njih nalazi na jednoj strani slike. Na slici 74. vidljivo je da se crvene strjelice nalaze gore i lijevo od slike. Ove dvije strane služe za postav-ljanje točaka koje određuju granice do kojih se slika smije širiti. Dodavanjem točke na gornju i lijevu stranu uz sam rub slike pojavljuje se zeleni marker koji pomaže u uočavanju zadane točke.


40

Slika 74. Dodavanje točaka koje kontroliraju širenje slike

Ako se krene od gornje točke, sve što se nalazi lijevo i desno od zelene linije neće se raširivati, a točka će se, tj. prostor unutar zelene linije, širiti horizontalno. Isto vrijedi i za točku koja se nalazi na lijevoj strani slike. Sav se prostor od zelene linije prema gore i prostor ispod zelene linije neće širiti, a prostor će se unutar zelene linije širiti vertikalno. Ovakvim se načinom ne gubi kvaliteta slike i ne dolazi do distorzije rubova koji su na navedenom primjeru kompliciranog oblika. Na desnoj je strani aplikacije za kreiranje .9.png grafike (Slika 74.) vidljiv rezultat: kako bi slika izgle-dala da se raširi vertikalno, a kako da se raširi horizontalno. Kao što se vidi, sve ostaje na svome mjestu bez distorzije, a na desnoj je strani aplikacije u pregledu prikazan plavi prostor koji je označen na različitim dimenzijama slike. Taj plavi prostor označava područje do kojeg će biti smješten sadržaj koji će se nalaziti unutar slike, tj. pozadine nekog elementa sučelja (npr. tekst gumba). Prostor se određuje istom metodom kao i dodavanje točaka za ograničavanje širenja određenih dijelova slike. Na slici 74. te su točke označene plavim strjelicama. Slike formata .9.png mogu biti i bez označenog prostora za sadržaj. Ako je riječ o gumbu, aplikacija će postaviti tekst u centar slike, tj. pozadine.

Napomena: Ako se označava prostor za sadržaj, postavljanje margina ili paddinga na gumb ili neki drugi element u svrhu centriranja sadržaja neće imati nikakvog efekta.

Grafika formata .9.png nezaobilazan je dio svakog sučelja i postavlja se u direktorije za različite gustoće piksela na isti način kao i klasična grafika. Pružaju oštrinu i čistoću završnog proizvoda bez obzira na veličinu i orijentaciju mobilnog uređaja, automatski se šire i prilagođavaju zaslonu.

ZADATAK 9Dizajniraj pet različitih izgleda gumba i pretvori ih u *.9.png format, a da pri tome niti jedan gumb ne izgubi na kvaliteti.

2.19. Layout aplikacije

Layout je osnova svake aplikacije, a definira strukturu korisničkog sučelja. Postoje dva načina deklariranja layouta: XML dokumentom i direktno (za vrijeme prirodnog rada aplikacije). Ispod je prikazan XML način deklariranja layouta. XML način definiranja layouta vrlo je sličan definira-


41

nju elemenata u izradi internetskih stranica. Ako se dobro poznaje naziv svakog objekta sučelja, moguće je vrlo brzo „napisati“ vlastiti layout. Eclipse razvojno okruženje sadrži grafički editor za kreiranje layouta što još više ubrzava rad, a ujedno omogućuje prikaz rezultata u realnom vre-menu. Bit će prikazan izgled vrlo jednostavnog layouta koji posjeduje TextView, a koji je zapravo „naljepnica“ s nekim tekstom i gumbom. Ovi se elementi nalaze u LinearLayoutu (kasnije će detaljno biti pojašnjen svaki tip layouta).

Da bi se tekst (naljepnica) definirao, prvo se navodi ime objekta koji se želi postaviti na layout, a to je TextView. Ime objekta se navodi dodavanjem XML čvora <textview />. Unutar toga čvora naveden je ID (identifikacija) naljepnice, širina i visina naljepnice i željeni tekst koji će se prikazi-vati. ID naljepnica mora biti unikatna, tj. ne mogu postojati dva ili više elemenata s istim ID-om. ID služi za identifikaciju pojedinog objekta kroz kod aplikacije.

Za gumb vrijedi isti postupak. Prvo se dodaje XML čvor <button /> unutar kojega su navedeni osnovni parametri kao što su: ID, visina, širina i tekst koji će se prikazivati na gumbu.

Ako se bolje pogleda prijašnji kod, može se uočiti da se spominju dvije stavke za širinu i visinu, a one su opisane nekom varijablom.

Ispod je prikazan XML način deklariranja layouta. XML način definiranja layouta vrlo je sličan definiranju elemenata u izradi internetskih stranica. Ako se dobro poznaje naziv svakog objekta sučelja, moguće je vrlo brzo „napisati“ vlastiti layout. Eclipse razvojno okruženje sadrži grafički editor za kreiranje layouta što još više ubrzava rad, a ujedno omogućuje prikaz rezultata u realnom vremenu. Bit će prikazan izgled vrlo jednostavnog layouta koji posjeduje TextView, a koji je zapravo „naljepnica“ s nekim tekstom i gumbom. Ovi se elementi nalaze u LinearLayoutu (kasnije će detaljno biti pojašnjen svaki tip layouta).

<?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TextViewandroid:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView"/> <Buttonandroid:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button"/> </LinearLayout>

Da bi se tekst (naljepnica) definirao, prvo se navodi ime objekta koji se želi postaviti na layout, a to je TextView. Ime objekta se navodi dodavanjem XML čvora <textview />. Unutar toga čvora naveden je ID (identifikacija) naljepnice, širina i visina naljepnice i željeni tekst koji će se prikazivati. ID naljepnica mora biti unikatna, tj. ne mogu postojati dva ili više elemenata s istim ID-om. ID služi za identifikaciju pojedinog objekta kroz kod aplikacije.

<TextViewandroid:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView"/>


<Buttonandroid:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button"/>


android:layout_width="wrap_content" android:layout_height="wrap_content"

Širina i visina su u ovom slučaju opisane varijablom koja određuje do koje će se pozicije i do koje mjere pojedini element raširiti.





























42


wrap_content varijabla govori elementu da bude širok ili visok kao i sadržaj koji se nalazi u nje-mu.

fill_parent varijabla govori elementu da bude širok ili visok kao i glavni layout u kojem se ele-ment nalazi.

Širina i visina objekta ne moraju biti zadani ovim varijablama, već se mogu koristiti i standardne numeričke vrijednosti uz mjernu jedinicu „DP“.

U svijetu Android aplikacija postoje dva najpopularnija layouta: Linear layout i Relative layout.

a) Linear layout

Linear layout je većinom osnova svake aplikacije, a dijeli se na horizontalni i vertikalni. Kod hori-zontalnog su layouta svi elementi smješteni jedan pored drugog. Ukoliko prelaze širinu zaslona, sustav automatski dodaje pomičnu traku kako bi se s lakoćom moglo doći do onih elemenata koji se ne vide. Kod vertikalnog su layouta svi elementi smješteni jedan ispod drugog. Ukoliko prelaze visinu zaslona, sustav automatski dodaje pomičnu traku za pristup elementima koji nisu vidljivi.

Slika 75. Raspored elemenata u horizontalnom layoutu

b) Relative Layout

Relative layout predstavlja raspored elemenata jedan nasuprot drugome. Primjerice, moguće je imati gumb A i gumb B i moguće je narediti gumbu A da bude pored, ispod ili iznad gumba B.










android:layout_width="wrap_content"android:layout_height="wrap_content"

wrap_content varijabla govori elementu da njemu.

android:layout_width="fill_parent"android:layout_height="fill_parent"

fill_parent varijabla govori elementu da bude element nalazi.

Širina i visina objekta ne morastandardne numeričke vrijednosti uz mjernu jedinicu „

U svijetu Android aplikacija postoje dva layout.

Linear layout

Linear layout je većinom osnova svake aplikacije, horizontalnog su layouta svi elementi smješteni zaslona, sustav automatski dodaje pomičnu traku kako bi selemenata koji se ne vide. Kod vertikalnog drugog. Ukoliko prelaze visinu zaslonaelementima koji nisu vidljivi.

Relative Layout

Relative layout predstavlja moguće je imati gumb A i gumb iznad gumba B.

"wrap_content" "wrap_content"

varijabla govori elementu da bude širok ili visok kao i sadržaj koji se nalazi u

"fill_parent" "fill_parent"

la govori elementu da bude širok ili visok kao i glavni

moraju biti zadani ovim varijablama, već se mogstandardne numeričke vrijednosti uz mjernu jedinicu „DP“.

aplikacija postoje dva najpopularnija layouta: Linear layout i Relative

osnova svake aplikacije, a dijeli se na horizontalni i vertikalni. Kod svi elementi smješteni jedan pored drugog. Ukoliko prelaze širinu

ustav automatski dodaje pomičnu traku kako bi se s lakoćom moglo doći do onih Kod vertikalnog su layouta svi elementi smješteni

visinu zaslona, sustav automatski dodaje pomičnu traku za pristup

predstavlja raspored elemenata jedan nasuprot drugome. gumb B i moguće je narediti gumbu A da bude pored

sadržaj koji se nalazi u

širok ili visok kao i glavni layout u kojem se

već se mogu koristiti i

Linear layout i Relative

ntalni i vertikalni. Kod edan pored drugog. Ukoliko prelaze širinu

e s lakoćom moglo doći do onih svi elementi smješteni jedan ispod

sustav automatski dodaje pomičnu traku za pristup

raspored elemenata jedan nasuprot drugome. Primjerice, A da bude pored, ispod ili


43

Slika 76. Raspored elemenata u Relative layoutu

ZADATAK 10Kreiraj jedan Linear layout i u njega smjesti <TextView /> i dva <button /> te na svaki element primijeni unikatan izgled pomoću *.9.png grafika.

ZADATAK 11Kreiraj jedan Relative layout i u njega smjesti dva <TextView /> i četiri <button /> te na svaki element primijeni unikatan izgled pomoću *.9.png grafika.


44

Programiranje

45

Programiranje

46

OSNOVE PROGRAMIRANJA

3. OSNOVE PROGRAMIRANJA

3.1. Uvod u programski jezik Java

Java je programski jezik koji je osmislio James Gosling iz Sun Microsystems 1991. godine, a prva se verzija u javnosti pojavila 1995. godine. Razlikuje se od ostalih programskih jezika jer se kod izvršava u Java virtualnom stroju (engl. Java Virtual Machine, JVM). JVM se razvija posebno za svaku platformu. Dakle, jedna je implementacija JVM za Linux, a druga za Windows operacijski sustav. Java je kao programski jezik neovisna o platformi na kojoj se izvodi jer se uvijek izvodi na svom JVM. Java prevoditelji (engl. compiler) prevode Javu u tzv. bytecode koji interpretira JVM i izvršava Java program. Java se javlja u dva paketa: Java Runtime Environment (JRE) i Java Development Kit (JDK). JRE sadrži JVM, biblioteke Java klasa i potrebnu funkcionalnost za pokretanje Java programa. JDK sadrži sve sastavnice kao i JRE, ali i razvojne alate za razvoj Java programa. Dakle, za pokretanje je Java programa dovoljno instalirati JRE paket, a za razvoj Java programa JDK paket. Java je pisana s namjerom da se programski kod napiše samo jednom, a program se izvršava na više različitih operacijskih sustava. Kao što je već spomenuto, Java se programi izvršavaju na JVM. Zbog toga Java ne mora pristupati direktno operaci-jskom sustavu, tj. neovisna je o operacijskom sustavu na kojem se izvršava. Programsko rješenje koje je napisano jednom može se bez ikakvih izmjena odvijati na Linuxu, Win-dowsima i sl.

Java je objektno orijentiran programski jezik (engl. Object–Oriented Programming lan-guage: OOP) što znači da se kod predstavlja kao stvarni objekt u svijetu. Svi su elementi u Javi objekti, a izuzetak su primitivni tipovi (int, long, float, boolean itd.). Java je vrlo striktan programski jezik. Svaki tip varijable mora biti predefiniran, tj. varijabli se ne može dodijeliti tip koji nije prethodno definiran, koji nema pripadajuću klasu. Java ima automatski menadžment memorije što znači da programer ne mora voditi brigu o alo-kaciji i dealokaciji memorije za kreiranje novih objekata. Program nema direktni pristup memoriji. Automatsko je skupljanje smeća (engl. Garbage Collector) implementacija automatskog menadžmenta memorije, a vodi brigu o oslobađanju memorije kada in-stancirani objekti nemaju aktivne pokazivače na memoriju.

3.2. Varijable, operatori [6]

Java programski jezik razlikuje sljedeće vrste varijabli:

a) Varijable objekata (instanci) se definiraju izvan svih metoda i izvan konstruktora klase. Sve one varijable koje ispred sebe nemaju ključnu riječ static jesu varijable objekta. Izmjenom se tih varijabli mijenja stanje objekta koji se kreira u programskom kodu pomoću ključne riječi new.

Automobil automobil = new Automobil();

Svaki put kada se kreira novi objekt, kompajler kreira i kopiju svih varijabli koje ispred sebe ne-maju ključnu riječ static. Dakle, svaki objekt sadržava svoj skup nestatičnih varijabli.

47


b) Varijable klasa su sve varijable koje ispred sebe sadržavaju ključnu riječ static. Za kom-pajler to znači da postoji samo jedna kopija te varijable neovisno o tome koliko se objekata iz te klase stvorilo. U primjeru automobil statična bi varijabla mogla biti:

static brojKotaca = 4;

Ta vrijednost vrijedi za sve automobile i stoga se ne bi trebala mijenjati za niti jedan automobil.

c) Lokalne varijable su varijable koje se nalaze u metodama objekata. Te su varijable uglav-nom pomoćne i koriste se prilikom izračunavanja ili sl. Ne postoji posebna ključna riječ kojom se označava je li varijabla lokalna, nego se zaključuje iz lokacije u kojoj je varijabla deklarirana, tj. između vitičastih zagrada koje označavaju metodu. Lokalne su varijable vidljive samo metodi koja ju sadržava, ali ne i ostatku klase.

d) Parametri su varijable koje se koriste u deklaraciji metode. Metoda može zahtijevati neki određeni parametar kao ulaz tako da obradom ulaznog parametra, može kreirati izlaznu vrijednost.

private int zbrajanje (int a, int b){ int c = a + b; return c;

}

Primjer 1. Parametri metodeMetoda zbrajanje sadrži dva parametra a i b koji su tipa int. Varijabla c je lokalna varijabla. U Javi se razlikuju sljedeće vrste operatora:e) Aritmetički operatori [2]

Pretpostavimo sljedeće: a = 10, b =20.

Tablica 1. Aritmetički operatori

f) Relacijski operatoriPretpostavimo sljedeće: a = 10, b = 20.

Tablica 2. Relacijski operatori

c) Lokalne varijable su varijable koje se nalaze u metodama objekata. Te su varijable uglavnom pomoćne i koriste se prilikom izračunavanja ili sl. Ne postoji posebna ključna riječ kojom se označava je li varijabla lokalna, nego se zaključuje iz lokacije u kojoj je varijabla deklarirana, tj. između vitičastih zagrada koje označavaju metodu. Lokalne su varijable vidljive samo metodi koja ju sadržava, ali ne i ostatku klase.



} Primjer 1.2.1.Parametri metode

Metoda zbrajanje sadrži dva parametra a i b koji su tipa int. Varijabla c je lokalna varijabla. U Javi se razlikuju sljedeće vrste operatora:

e) Aritmetički operatori [2]


Operator Opis Primjer + Zbrajanje a + b = 30 - Oduzimanje a –b = -10 * Množenje a * b = 200 / Dijeljenje b / a = 2 % Modul – vraća ostatak cjelobrojnog dijeljenja b % a = 0 ++ Increment – povećava vrijednost za 1 a++ = 11 -- Decrement – smanjuje vrijednost za 1 a-- = 9

Tablica 1.2.1. Aritmetički operatori

f) Relacijski operatori

Pretpostavimo sljedeće: a = 10, b = 20.

Operator Opis Primjer == Provjerava da li su 2 vrijednosti jednake a == b false != Provjerava da li su 2 vrijednosti različite a != b true > Provjerava da li je lijevi operand veći od desnog a > b false < Provjerava da li je lijevi operand manji od desnog a < b true >= Provjerava da li je lijevi operand veći ili jednak desnom a >= b false <= Provjerava da li je lijevi operand manji ili jednak desnom a <= b true

Tablica 1.2.2. Relacijski operatori

g) Logički operatori

Pretpostavimo sljedeće a = true, b = false.

c) Lokalne varijable su varijable koje se nalaze u metodama objekata. Te su varijable uglavnom pomoćne i koriste se prilikom izračunavanja ili sl. Ne postoji posebna ključna riječ kojom se označava je li varijabla lokalna, nego se zaključuje iz lokacije u kojoj je varijabla deklarirana, tj. između vitičastih zagrada koje označavaju metodu. Lokalne su varijable vidljive samo metodi koja ju sadržava, ali ne i ostatku klase.



} Primjer 1.2.1.Parametri metode

Metoda zbrajanje sadrži dva parametra a i b koji su tipa int. Varijabla c je lokalna varijabla. U Javi se razlikuju sljedeće vrste operatora:

e) Aritmetički operatori [2]


Operator Opis Primjer + Zbrajanje a + b = 30 - Oduzimanje a –b = -10 * Množenje a * b = 200 / Dijeljenje b / a = 2 % Modul – vraća ostatak cjelobrojnog dijeljenja b % a = 0 ++ Increment – povećava vrijednost za 1 a++ = 11 -- Decrement – smanjuje vrijednost za 1 a-- = 9

Tablica 1.2.1. Aritmetički operatori

f) Relacijski operatori

Pretpostavimo sljedeće: a = 10, b = 20.

Operator Opis Primjer == Provjerava da li su 2 vrijednosti jednake a == b false != Provjerava da li su 2 vrijednosti različite a != b true > Provjerava da li je lijevi operand veći od desnog a > b false < Provjerava da li je lijevi operand manji od desnog a < b true >= Provjerava da li je lijevi operand veći ili jednak desnom a >= b false <= Provjerava da li je lijevi operand manji ili jednak desnom a <= b true

Tablica 1.2.2. Relacijski operatori



48



Tablica 3. Logički operatori

Izvođenje programa teče od smjera gore prema dolje, tj. redoslijedom kako je kod napisan. Taj se niz izvođenja programa može prekinuti primjenom određenih kontrola toka: if naredbama, for petljama, grananjem, izvođenjem dijela koda ovisno o određenom stanju i sl.

ZADATAK 12Unesi realni broj i pohrani unesenu vrijednost u varijablu. Ispiši poruku na ekran ovisno o tome je li broj negativan, 0 ili pozitivan.

3.3. Kontrola toka programa [8]

3.3.1. Grananja

Java razlikuje sljedeće vrste grananja koje se koriste ovisno o situaciji:

a) If-then kontrola je najosnovnija kontrola toka programa. Govori programu da izvrši određeni dio koda ovisno o tome je li određeni uvjetni izraz istinit. Npr. automobil bi mogao kočiti samo ako je već u pokretu. Jedna je od mogućih implementacija ovog algoritma:

private void koci (){ if(jeUPokretu){ brzina--;

} }

Primjer 2. If-then naredba

Ako varijabla jeUPokretu ima vrijednost false, brzina se neće smanjivati što znači da i sam au-tomobil stoji. Ako postoji samo jedan redak koda, ova se if-then naredba može napisati i bez vitičastih zagrada. Dakle:

private void koci (){ if(jeUPokretu)

brzina--; }

Primjer 3. If-then naredba u jednom retku

b) If-then-else kontrola omogućuje izvršavanje drugih dijelova koda u slučaju da je if izraz false. Npr. ako je automobil u stanju mirovanja, može se izvršiti neki drugi dio koda.

Operator Opis Primjer && Logički AND operator. Ako oba operanda

vraćaju true onda je rezultat true a && b false

|| Logički OR operator. Ako bar jedan operand vraća vrijednost true onda je rezultat true

a || b true

! Logički NOT operand. Služi za dodjeljivanje suprotne vrijednosti operandu.

!a false !b true

Tablica 1.2.3. Logički operatori

Izvođenje programa teče od smjera gore prema dolje, tj. redoslijedom kako je kod napisan. Taj se niz izvođenja programa može prekinuti primjenom određenih kontrola toka: if naredbama, for petljama, grananjem, izvođenjem dijela koda ovisno o određenom stanju i sl.

Zadatak 1.2.1

1.3. Kontrola toka programa [3]

1.3.1. Grananja Java razlikuje sljedeće vrste grananja koje se koriste ovisno o situaciji:

a) If-then kontrola je najosnovnija kontrola toka programa. Govori programu da izvrši određeni dio koda ovisno o tome je li određeni uvjetni izraz istinit. Npr. automobil bi mogao kočiti samo ako je već u pokretu. Jedna je od mogućih implementacija ovog algoritma:


} }

Primjer 1.3.1. If-then naredba

Ako varijabla jeUPokretu ima vrijednost false, brzina se neće smanjivati što znači da i sam automobil stoji. Ako postoji samo jedan redak koda, ova se if-then naredba može napisati i bez vitičastih zagrada. Dakle:

private void koci (){ if(jeUPokretu)

brzina--; }

Primjer 1.3.2. If-then naredba u jednom retku

b) If-then-else kontrola omogućuje izvršavanje drugih dijelova koda u slučaju da je if izraz false. Npr. ako je automobil u stanju mirovanja, može se izvršiti neki drugi dio koda.


49


} else { System.out.println(„Automobil je u stanju mirovanja“);

} }

Primjer 4. If-then-else naredba

If-then-else naredbom mogu se raditi i višestruke provjere nekog uvjeta. To se može vidjeti na primjeru rezultata testa i dodijeljene ocjene.

private int izračunajOcjenu(int brojBodova){ int ocjena = 1;

if(brojBodova >= 90){ ocjena = 5;

} else if(brojBodova >= 80){ ocjena = 4;



} return ocjena;

}

Primjer 5. If-the-else grananje

Primjer 5. pokazuje da ako učenik ima rezultat veći od 90, svi su izrazi ispunjeni. Međutim, na-redba radi tako da čim se jedan uvjet zadovolji, ostali se uvjeti zanemaruju.

c) Switch kontrola je slična if-then-else naredbi. Podržava byte, short, char i int primitivne tipove podataka, ali i enumerirane i String tipove podataka.

private String odrediNazivMjeseca(int mjesec){ String nazivMjeseca = „“; switch(mjesec){ case 1: nazivMjeseca = „Siječanj“; break;

case 2: nazivMjeseca = „Veljača“; break;

... case 12:

nazivMjeseca = „Prosinac“; break;

default: System.out.println(„Nevažeći mjesec“); break;

} return nazivMjeseca;

}

Primjer 6. Switch naredba


50

Hoće li se koristiti if-then-else ili switch naredba ovisi o čitljivosti koda, ali i o izrazu koji treba provjeravati. If-then-else naredba testira izraze koji se temelje na udaljenosti nekih vrijednosti ili za provjeru nekog stanja, a switch naredba provjerava izraz koji se temelji na jednoj int, enum vrijednosti ili String objektu. Izvođenje se kod switch naredbe ne prekida iako je uvjet i prvi put ispunjen. Zbog toga je nakon svakog izraza nužno staviti ključnu riječ break kako bi prevoditelj izašao iz petlje ukoliko je uvjet prvi put zadovoljen.

3.3.2. Petlje

Java razlikuje sljedeće vrste petlji koje se koriste ovisno o situaciji:

a) While petlja neprekidno izvršava blok koda sve dok je određeni izraz istinit.int i = 1; while(i < 10){ System.out.println(„Petlja se izvršila“ + i „ puta“);

i ++; }

Primjer 7. While petlja

Može se implementirati i beskonačna petlja ako u while petlju stavimo true.while(true){ // kod }

Primjer 8. Neograničena while petlja

b) Do-while petlja provjerava izraz tek na kraju petlje i to ju razlikuje od while petlje. Kod se unutar do-while petlje izvodi najmanje jedanput, a u while petlji se ne mora izvesti niti jednom.do{ // kod } while(izraz);

Primjer 9. Do-while petlja

c) For petlja omogućuje kompaktan način iteracije kroz skup vrijednosti. Opći se oblik for petlje može zapisati na sljedeći način:for(inicijalizacija; uvjetni izraz; inkrement){ // kod }

Primjer 10. Opći oblik for petlje

Inicijalizacija inicijalizira petlju. Izvršava se samo jednom, tj. kada petlja započinje. Petlja se izvr-šava sve dok je uvjetni izraz istinit. Kada uvjetni izraz poprimi vrijednost false, petlja se prekida. Inkrement je izraz koji se izvršava prilikom svake iteracije petlje. Najčešće je to inkrement (uve-ćanje) ili dekrement (umanjenje) neke vrijednosti.for(int i = 0; i < 10; i++){ System.out.println(„Broj iteracije: “ + i); }

Primjer 11. For petlja


51

ZADATAK 13Uz pomoć do-while petlje ispiši sve brojeve koji su veći od 500 a manji od 700, a koji su djeljivi sa 17. Ispiši koliko takvih brojeva ima. Riješi zadatak uz pomoć for petlje.

3.4. Polja

Polje je kontejner objekata koji sadrži fiksni broj vrijednosti istog tipa. Veličina se polja određuje kada se kreira polje.

Slika 77. Opći oblik jednodimenzionalnog polja

Na slici 77. prikazano je polje veličine 10. Svaki element u polju ima svoj indeks, odnosno redni broj na kojem se nalazi u polju. Indeksiranje elemenata u polju kreće od broja 0 i stoga je indeks zadnjeg elementa u polju 9, a ne 10.

private void primjerPolja(){ int[] polje = new int[10]; int[0] = 100; int[1] = 200; int[2] = 300; int[3] = 400; int[4] = 500; int[5] = 600; int[6] = 700; int[7] = 800; int[8] = 900; int[9] = 1000; System.out.println(„Vrijednost na indeksu 0 je : “ + polje[0]); System.out.println(„Vrijednost na indeksu 1 je : “ + polje[1]); System.out.println(„Vrijednost na indeksu 9 je : “ + polje[9]); } OUTPUT: Vrijednost na indeksu 0 je : 100 Vrijednost na indeksu 1 je : 200 Vrijednost na indeksu 9 je : 1000

Primjer 12. Popunjavanje i indeksiranje polja

Polja se deklariraju slično kao i varijable, a poslije tipa slijedi uglata zagrada. Polje se može ini-cijalizirati i skraćenom sintaksom.int polje[] = {100, 200, 300, 400, 500, 600, 700, 800, 900, 1000}

Primjer 13. Popunjavanje polja u deklaraciji

Veličina se polja u primjeru 11. određuje brojem elemenata između vitičastih zagrada. Moguće je definirati i polje polja, tj. višedimenzionalno polje korištenjem dva ili više skupova vitičastih zagrada. U Javi je višedimenzionalno polje jednostavno polje koje u sebi sadržava polja, a ne tip podataka.


52

String[][] imena = { {„Pero“, „Marko“, „Ivan“}, {„Perić“, „Marković“, „Ivić“} }; System.out.println(imena[0][0] + „ “ + imena[1][0]); System.out.println(imena[0][2] + „ “ + imena[1][2]); OUTPUT: Pero Perić Ivan Ivić

Primjer 14. Polje u polju (dvodimenzionalno polje)

Sljedeća slika pokazuje indeksiranje elemenata u višedimenzionalnom polju.

Primjer 15. Opći oblik dvodimenzionalnog polja

ZADATAK 14Napiši program koji će učitati 5 realnih brojeva u polje i ispisati najmanji element u polju.

3.5. Metode [8]

Metode se mogu zamisliti kao mehanizam koji pretvara ulazne jedinice u izlazne. Npr. ulazne su jedinice tvornice papira stabla i drugi sastojci, a izlazna je jedinica papir. Dakle, tvornica papira iz nekih ulaznih vrijednosti stvara izlaznu vrijednost. Na takvom principu rade i metode u pro-gramiranju.private Papir kreirajPapir(Stablo stablo, Sastojci ostaliSastojci){ //kod kreiranja papira return papir; }

Primjer 16. Pretvaranje ulaznih jedinica u izlazne

Neophodni dijelovi deklaracije metode su: tip koji metoda vraća, naziv, zagrade i tijelo između vitičastih zagrada. Deklaracija se metode sastoji od 6 komponenti:

1. Vidljivost: private, protected, public vidljivost metoda

2. Vrijednost koju metoda vraća: tip varijable koju metoda vraća (ako metoda ne vraća vrijednost, onda je void)

3. Naziv metode: treba izbjegavati ključne riječi kao nazive metoda

4. Lista parametara: lista parametara je u zagradama i metoda ih prima kao ulazne podat-ke. Mora se navesti tip i naziv parametra. Ako parametri nisu potrebni, koristi se prazna zagrada ().


53

5. List iznimaka: ponekad određeni kod baca iznimke, a iznimke se mogu vezati na dekla-raciju metode tako da se navede lista svih mogućih iznimaka koje se mogu dogoditi prilikom izvođenja metode.

6. Tijelo metode: sadrži sav potreban kod za metodu zajedno s deklaracijom lokalnih varijabli.

Slijedi primjer jedne metode.public double zbroji(double a, double b){ //kod }

Primjer 17. Metoda s dva parametra

Svaka metoda ima svoj potpis (engl. signature) koji metodu čini jedinstvenom. Potpis je gore napisane metode sljedeći:public double zbroji(double a, double b);

Primjer 18. Potpis metode

Preporuča se da se metode imenuju s glagolom koji je napisan malim slovima, a ako se sastoji od više riječi, prva riječ treba biti glagol, a druga imenica, pridjev i sl.trči trčiBrzo koči dohvatiPodatkeIzBaze

Primjer 19. Primjeri naziva metoda

Java omogućava preopterećivanje (engl. overloading) metoda. Može razlikovati metode s razli-čitim potpisom. To znači da metode u istoj klasi mogu imati jednake nazive ako imaju različitu listu parametara.public class MojaKlasa{ private int zbroj(int a, int b){}; private int zbroj (int a, int b, int c){}; private double zbroj(double a, double b){}; }

Primjer 20. Preopterećivanje metoda

Dakle, java razlikuje sve tri gore navedene metode. Preopterećene metode razlikuje po broju i tipu argumenata u listi parametara.

NAPOMENA: Ne smije se zamijeniti preopterećivanje metoda s prepisivanje (engl. override) metodom jer se ne odnose na isto. Prepisivanje metode se koriste kada jedna klasa nasljeđuje drugu, ali nema isto ponašanje u metodama. Metode se prepisuju, a klasi se može opisati pona-šanje koje se razlikuje od ponašanja klase roditelja kojeg je naslijedila. U svakodnevnom životu objekti imaju određene atribute kao što npr. ormar ima visinu, širinu i dužinu. Ormaru se mogu mijenjati stanja pomoću akcija kao što su otvaranje i zatvaranje ormara. Kao što s varijablama definiramo atribute objekta, tako s metodama definiramo akcije koje se mogu raditi na objektu. Dakle, metode omogućuju promjenu stanja objekta. U ovom se slučaju može mijenjati stanje ormara iz zatvorenog u otvoreno i obrnuto.


54

package org.gauss.toturial; public class Ormar { private int visina; private int širina; private int dužina; private boolean otvoren = false; public Ormar(int visina, int širina, int dužina) { this.visina = visina; this.širina = širina; this.dužina = dužina; } public void otvoriOrmar() { this.otvoren = true; } public void zatvoriOrmar(){ this.otvoren = false; } public boolean jeOtvoren() { return this.otvoren; } }

Primjer 21. Klasa ormar

Primjeri metoda već zahvaćaju granicu objektno orijentiranog programiranja, ali je lakše ra-zumjeti koncepte metoda kroz takve primjere. Ako se u ulazu u program kreira objekt ormar, njegovo je početno stanje zatvoren. To je zato što je varijabla otvoren definirana kao false:

private boolean otvoren = false

Ako se na tom objektu pokrene metoda otvoriOrmar(), vrijednost otvoren će se promijeniti u true što znači da je tom objektu promijenjeno stanje. Stanje se ormara može provjeriti s me-todom jeOtvoren(). Isto tako, ako se pokrene metoda zatvoriOrmar(), varijabla otvoren će se promijeniti u false što znači da je ormar zatvoren.

package org.gauss.toturial; public class Main { public static void main(String[] args) { Ormar ormar = new Ormar(5,5,5); System.out.println("Ormar instanciran - Ormar je otvoren : " + ormar.jeOtvoren()); ormar.otvoriOrmar(); System.out.println("Pokrenuta metoda otvoriOrmar() - Ormar je otvoren : " + ormar.jeOtvoren()); ormar.zatvoriOrmar(); System.out.println("Pokrenuta metoda zatvoriOrmar() - Ormar je otvoren : " + ormar.jeOtvoren()); } }

Primjer 22. Izmjena stanja objekta kroz metode

Program u primjeru 20. kreira objekt tipa Ormar koji je visine 5, širine 5 i dužine 5 i nakon toga se na njemu izvode akcije otvaranja i zatvaranja ormara. Program ispisuje sljedeći tekst u konzolu:


55

Slika 78. Ispis stanja objekta ormar u konzoli

Pomoću metoda mogu se raditi i neki složeniji postupci kao npr. računanje opsega kružnice. Takva metoda ne mijenja stanje objekta, ali vraća informacije o objektu koje se mogu dobiti iz njegovih svojstava. Ako je zadan polumjer kružnice, iz tog se svojstva može dobiti informacija o opsegu kružnice. Prvo se kreira objekt Kružnica u kojem se definira metoda izračunajOpseg(). Ta metoda će vraćati broj tipa double.

package org.gauss.toturial; public class Kružnica{ private double x, y; private double r; public Kružnica(int x, int y, int r) { this.x = x; this.y = y; this.r = r; } public double izračunajOpseg(){ return 2 * 3.14159 * r; } }

Primjer 23. Klasa kružnica s metodom izračunajOpseg()

Instanciranjem objekta tipa Kružnica i pozivanjem metode izračunajOpseg() program bi trebao ispisati opseg kružnice u konzolu.

package org.gauss.toturial; public class Main { public static void main(String[] args) { Kružnica kružnica1 = new Kružnica(5, 5, 10); System.out.println("Opseg kružnice 1 je: " + kružnica1.izračunajOpseg()); Kružnica kružnica2 = new Kružnica(10, 10, 20); System.out.println("Opseg kružnice 2 je: " + kružnica2.izračunajOpseg()); } }

Primjer 24. Računanje opsega dviju različitih kružnica

U primjeru 1.4.8. kreiraju se dvije različite kružnice. Prva kružnica ima centar u točki (5, 5) i po-lumjer 10, a druga u točki (10, 10) i polumjer 20. U konzolu se ispisuje sljedeće:


56

Slika 79. Ispis opsega dviju kružnica u konzoli

ZADATAK 15Napiši program koji učitava cijeli broj n (2≤ n ≤30), a zatim poziva metode: unesiElemente – za učitavanje n elemenata u polje sortirajPolje – za sortiranje polja uzlazno po veličini getMin – za dohvaćanje najmanjeg elementa getMax – za dohvaćanje najvećeg elementa polja getSrvr – za dohvaćanje srednje vrijednosti svih elemenata okreniPolje – za mijenjanje mjesta elementima – zadnje na prvo mjesto, predzadnje na drugo itd. toString – koji kreira string od elemenata polja razdvojenih zarezom ili razmakom

3.6. Razine pristupa

Postoje različite ključne riječi ispred metoda kao što su private i public. Predstavljaju razinu pri-stupa metodama ili varijablama u klasi. Postoje 4 vrste razina pristupa:

a) private

b) package

c) protected

d) public

Najčešće se u programiranju koriste samo private i public razine pristupa. Razina pristupa opi-suje kojim će klasama metode biti vidljive. Ako je razina pristupa private, samo klasa u kojoj se nalazi ta metoda ima pristup toj metodi i samo ju ona može koristiti. Package razina pristupa označava da metodi može pristupati klasa u kojoj se nalazi, ali i sve klase koje se nalaze u istom pakovanju (engl. package). Ako je razina pristupa protected, metodi može pristupiti klasa u kojoj se metoda nalazi, ali i klase koje se nalaze u istom pakovanju i sve podklase. Ako je pak razina pristupa public, metodi može pristupiti bilo koja klasa. Malom se izmjenom klase Kružnica može pokazati primjer utjecaja razine pristupa na pozivanje metoda.


57

package org.gauss.toturial; public class Kružnica{ private double x, y; private double r; public Kružnica(int x, int y, int r) { this.x = x; this.y = y; this.r = r; } public double izračunajOpseg(){ return 2 * 3.14159 * r; } private double izračunajPovršinu(){ return r*r*3.14159; } }

Primjer 25. Private i public metode Kružnice

Ako se instancira objekt Kružnica, može se pozvati samo metoda izračunajOpseg(), ali ne i meto-da izračunajPovršinu() jer je metoda izračunajOpseg() razina pristupa public što znači da meto-du može pozvati bilo koja klasa. To se može primijetit i prilikom pisanja samog koda gdje Eclipse alat ne dopušta pozivanje metode izračunajPovršinu() jer je ona private, tj. ne može se pozvati u nekoj drugoj klasi.

Slika 80. U drugoj klasi nije moguće pozvati private metode


58

4. OBJEKTNO ORIJENTIRANO PROGRAMIRANJE

4.1. Klase, objekti i enkapsulacija

Klase se mogu opisati kao shematski plan (engl. blueprint) objekta. Klasa je specifikacija kako konstruirati objekt. Svaki put kada u programskom kodu stvaramo objekt, taj objekt nastaje iz napisane klase, tj. instancira se objekt iz klase. Klasa je i kolekcija podataka i metoda koje rukuju tim podatcima. Podatci i metode zajedno služe za definiranje sadržaja i ponašanja nekog objek-ta. Npr. kružnica se može opisati s x, y koordinatama koje određuju njezin centar i polumjer. Postoji mnogo operacija koje se mogu raditi s kružnicama: izračunati njen opseg, površinu, pro-vjeriti jesu li zadane točke unutar kružnice itd. Svaka je kružnica drugačija, ima različite točke središta i različite polumjere, ali ako kružnicu opisujemo kao klasu, ima svojstva koje možemo postaviti kao definiciju same kružnice.

public class Kružnica{ private double x, y //koordinate centra kružnice private double r; // polumjer kružnice

// metode kružnice public double izračunajOpseg(){ return 2 * 3.14159 * r} public double izračunaj Površinu(){ return 3.14159 * r * r}

}

Primjer 26. Klasa kružnica

Kada je napravljena klasa za kružnicu, nešto se želi i raditi s njom. Ali sa samom se klasom ne može raditi ništa. Prvo se mora stvoriti objekt iz te klase kako bi se s njim moglo manipulirati. Definiranjem klase stvorio se vlastiti tip podatka. Dakle, kao što postoji int, float, double, String, sada postoji i tip podataka Kružnica koji je nešto složeniji od tih osnovnih tipova podataka. On se sastoji od više jednostavnih tipova podataka. Kao što se nekoj varijabli dodijelio neki tip po-dataka, i nekoj se varijabli može dodijeliti tip Kružnica. int broj; float drugiBroj; String tekst;

Primjer 27. Dodjeljivanje jednostavnog tipa podataka

Na ovaj se način varijablama dodjeljuje jednostavan tip podataka. Ako se varijabli želi dodijeliti tip Kružnica, mora se koristiti ključna riječ new.

Kružnica mojaKružnica = new Kružnica();

Primjer 28. Dodjeljivanje vlastitog tipa podataka

Ovakvom se linijom koda kaže programu da iz klase Kružnica konstruira objekt kružnica koji se sprema u varijablu mojaKružnica. Sada se korištenjem objekta mojaKružnica može računati op-seg i površina kružnice postavljanjem polumjera kružnice. Polumjer se kružnice može postaviti direktnim pristupom varijabli u objektu ili pomoću metoda enkapsulacije.

U pisanju klasa preporuča se postaviti sve varijable na što nižu razinu pristupa (engl. access level). To se odnosi na private, public i protected ključne riječi ispred varijable:

OBJEKTNO ORIJENTIRANO PROGRAMIRANJE

59

a) public – varijabla je vidljiva svim klasama

b) private – varijabla je vidljiva samo klasi u kojoj se varijabla nalazic) protected – varijabla je vidljiva klasi u kojoj se nalazi i svim podklasama

Metoda kojom se može postaviti polumjer kružnice jest postavljanje varijable r kao public i di-rektno pristupanje varijabli.Kružnica mojaKružnica = new Kružnica(); mojaKružnica.r = 5;

Primjer 29. Direktni pristup varijabli

Ova se metoda ne preporuča jer varijabla nepotrebno postaje vidljiva svim klasama. Druga i bolja metoda je metoda enkapsulacije kojom se razina pristupa varijable postavlja na private, a metodama se omogućava manipulacija tom varijablom.

public class Kružnica{ private double x, y //koordinate centra kružnice private double r; // polumjer kružnice public double getR(){ return r; }

public void setR(double r){ this.r = r; } // metode kružnice

public double izračunajOpseg(){ return 2 * 3.14159 * r} public double izračunaj Površinu(){ return 3.14159 * r * r}

}

Primjer 30. Enkapsulacija varijabli

S get i set metodama omogućava se dohvaćanje i postavljanje varijable r, a takve se metode još nazivaju pristupnim metodama (engl. accessor methods). Nakon toga se postavlja vrijednost te varijable preko metode void setR (double r);Kružnica mojaKružnica = new Kružnica(); mojaKružnica.setR(5);

Primjer 31. Pristup varijabli preko set metode

4.2. Konstruktori

Klasa sadrži konstruktore koji se pozivaju prilikom kreiranja objekta. Deklaracije su konstruktora slične metodama, a razlikuju se po tome što naziv mora biti isti kao i naziv klase i ne vraća nika-kav tip podataka (čak ni void). Konstruktori se koriste kada je potrebno postaviti stanje objek-ta (inicijalizirati objekt) prilikom njegovog stvaranja (instanciranja). Na primjeru klase Kružnica mogu se postavljati varijable nakon inicijalizacije pozivanjem set metoda ili prilikom inicijalizaci-je slanjem koordinata i polumjera u konstruktor.


60

public class Kružnica{ private double x, y //koordinate centra kružnice private double r; // polumjer kružnice

//Konstruktor public Kružnica (double x, double y, double r){

this.x = x; this.y = y; this.r = r;

} }

Primjer 32. Konstruktor kružnice s parametrima koordinata i polumjerom

Sada je moguće kreirati objekt i odmah mu postaviti stanje.Kružnica mojaKružnica = new Kružnica(0, 0, 5);

Primjer 33. Konstruiranje objekta pomoću vlastitog konstruktora

Tako kreiran objekt imat će centar u koordinatama (0, 0) s polumjerom 5. Klasa može imati pro-izvoljan broj konstruktora.

public class Kružnica{ private double x, y //koordinate centra kružnice private double r; // polumjer kružnice public Kružnica (double x, double y, double r){

this.x = x; this.y = y; this.r = r;

} public Kružnica (double r){

this.x = 0; this.y = 0; this.r = r;

} public Kružnica (double x, double y){

this.x = x; this.y = y; this.r = 5;

} }

Primjer 34. Klasa s većim brojem konstruktora

Svaka klasa sadrži osnovni konstruktor bez parametara koji se ne mora definirati.Kružnica mojaKružnica = new Kružnica();

Primjer 35. Kreiranje objekta s osnovnim konstruktorom


61

ZADATAK 16Napiši klasu „Zarulja“ koja ima: atribut bool tipa „Stanje“, podrazumijevani i parametarski konstruktor, jedinstvenu metodu za paljenje i gašenje žarulje i metodu koja provjerava svijetli li žarulja. Kreiraj objekt klase „Zarulja“, upali i ugasi žarulju nekoliko puta i provjeri svijetli li žarulja.

4.3. Nasljeđivanje

Klasa može naslijediti drugu klasu i tada se naziva podklasa (engl. subclass, derived class, exten-ded class, child class). Klasa koja je naslijeđena naziva se nadklasa (engl. superclass, base class, parent class). Svaka klasa može naslijediti samo jednu nadklasu (u slučaju potrebe za višestru-kim nasljeđivanjem koriste se sučelja (engl. interface). Kada se kreira nova klasa, a već postoji klasa koja sadrži dio koda koji je potreban, može se naslijediti tu klasu i iskoristiti već gotove dijelove koda, tj. nije potrebno pisati cijelu klasu ispočetka. Ipak, nasljeđivanje služi da bi se kreirao is-a odnos koji je nužan prilikom implementacije nasljeđivanja. Podklasa nasljeđuje sva polja, metode i ugniježđene klase od svoje nadklase. Konstruktori se ne nasljeđuju, ali se može pozvati konstruktor nadklase u podklasi.

public class Zaposlenik {

// klasa Zaposlenik sadrži 3 varijable public String ime; public String prezime; public String adresa; // klasa Zaposlenik ima jedan konstruktor public Zaposlenik (String ime, , String prezime, String adresa) { this. ime = ime; this. prezime = prezime; this.adresa = adresa; } // klasa Zaposlenik sadrži 4 metode public void setIme(String ime) { this.ime = ime; } public void setPrezime(String prezime) { this. prezime = prezime; }

public void setAdresa(String adresa){ this.adresa = adresa;

} public void obavljajRad() { //kod } public void uzmiGodišnji() { //kod }

}

Primjer 36.Klasa Zaposlenik


62

Klasa Inženjer koja nasljeđuje klasu Zaposlenik mogla bi ovako izgledati:

public class Inženjer extends Zaposlenik { // Inženjer podklasa dodaje još jednu varijablu public int brojNadziranihObjekata; // Inženjer podklasa ima jedan konstruktor public Inženjer(String ime, String prezime, String adresa, int brojNadziranihObjekata){

super(ime, prezime, adresa); this. brojNadziranihObjekata = brojNadziranihObjekata;

}

// Inženjer podklasa dodaje još jednu metodu public void nadziriNoviObjekt () {

this.brojNadziranihObjekata++; } }

Primjer 37. Klasa Inženjer nasljeđuje klasu Zaposlenik

Inženjer klasa nasljeđuje sve varijable i metode od klase Zaposlenik i dodaje još polje brojNadzi-ranihObjekata i metodu nadziriNoviObjekt. Dakle, kao da je napisana klasa Zaposlenik ispočetka s četiri varijable i pet metoda. Podklasa ne nasljeđuje varijable s razinom pristupa private, tj. naslijedit će samo varijable koje su public i protected i u istom paketu.

4.4. Apstraktne klase [10]

Apstraktna klasa je klasa koja se deklarira s ključnom riječju abstract i može, ali i ne mora, sa-državati apstraktne metode. Apstraktne se klase mogu instancirati, tj. mogu se naslijediti iako nije moguće kreirati objekte takvih klasa. Apstraktna metoda je metoda koja ima deklaraciju, ali nema implementaciju.abstract void pomakni (double pomakX, double pomakY);

Primjer 38. Apstraktna klasa pomakni

Ako klasa sadrži apstraktnu metodu, i klasa mora biti apstraktna.public abstract Zaposlenik{ abstract void obavljajRad(); }

Primjer 39. Apstraktna klasa s apstraktnom metodom

Zaposlenik je klasa koja se može naslijediti i moguća je nadklasa za Inženjer, Radnik, Menadžer, Programer i sl. Ti zaposlenici imaju neka zajednička svojstva kao što je npr. obavljanje posla i zato se može odrediti apstraktna nadklasa Zaposlenik.public abstract Zaposlenik{ abstract void obavljajRad();

abstract void uzmiGodišnji(); }

Primjer 40. Klasa Zaposlenik koja će služiti kao nadklasa


63

Klasa može sadržavati jednu ili više apstraktnih metoda. Klase koje nasljeđuju takvu klasu mo-raju imati implementaciju za svaku od apstraktnih metoda nadklase jer će inače i same biti ap-straktne. Tako svaka klasa koja naslijedi klasu Zaposlenik, mora imati implementaciju za metode obavljajRad() i uzmiGodišnji().public Inženjer extends Zaposlenik{ void obavljajRad(){ //kod

} void uzmiGodišnji(){

//kod }

}

Primjer 41. Klasa Inženjer mora implementirati apstraktne metode

ZADATAK 17Napiši apstraktnu klasu Rukometas koja ima atribute za ime, starost i težinu. Napiši podrazumijevani konstruktor, parametarski konstruktor i apstraktnu metodu double igraj(). Izvedi klasu Napadac koja ima atribut za snagu šuta (1-100) i postotak realizacije (0-100). Prepiši metodu igraj tako da se računa mogućnost gola prema formuli (1). Izvedi klasu Golman koja ima atribute refleksi (1-100) i postotak obrana (0-100). Prepiši metodu igraj tako da računaš mogućnost obrane prema formuli (2). Kreiraj jednog golmana i jednog napadača, pozovi na obojici metode igraj i ispiši na ekran je li postignut gol. To odredi na temelju izračunatih mogućnosti obrane i gola (ako je veća, dogodilo se).

Snaga * Realizacija - 10 * Starost (1) Refleksi * Postotak Obrana - 2 * Starost (2)

4.5. Polimorfizam

Polimorfizam je u rječniku definiran kao princip u biologiji prema kojemu organizam ili vrsta može imati više različitih oblika ili razina razvoja. Taj se princip može primijeniti i u Java pro-gramskom jeziku. Podklase neke klase sadrže vlastito ponašanje, ali i dio ponašanja koji dijeli sa svojom nadklasom. Polimorfizam se može demonstrirati manjom izmjenom klase Zaposlenik. Može se dodati metoda ispišiOpis koja će ispisivati sve trenutne podatke o zaposleniku. public void printDescription(){ System.out.println("Zaposlenik " + this.ime + " " + this.prezime + " živi na adresi " + this.adresa); }

Primjer 42. Metoda printDescription()


64

Kako bi demonstrirali polimorfizme, naslijedit ćemo klase Zaposlenik s klasama Inženjer i Arhitekt.

public class Inženjer extends Zaposlenik { public int brojNadziranihObjekata;

public Inženjer(String ime, String prezime, String adresa, int brojNadziranihObjekata){ super(ime, prezime, adresa); this. brojNadziranihObjekata = brojNadziranihObjekata; }

public void nadziriNoviObjekt () { this.brojNadziranihObjekata++; }

public void printDescription(){ super.ispišiOpis(); System.out.println("Inženjer " + this.ime + " " + this.prezime + " nadzire " + this. brojNadziranihObjekata + " objekata");

} }

Primjer 43.Klasa Inženjer

Arhitekt je isto zaposlenik, ali se njegov rad razlikuje od rada Inženjera.

public class Arhitekt extends Zaposlenik{ private intbrojNacrta;

Arhitekt(Stringime,String prezime,String adresa,intbrojNacrta){ super(ime,prezime,adresa); this.brojNacrta = brojNacrta;

} private void izradi NoviNacrt(){ this.brojNacrta++; } public void ispišiOpis() { super.ispišiOpis(); System.out.println("Arhitekt " + this.ime + "" + this.prezime + " je izradio " + this.brojNacrta + " nacrta");

} }

Primjer 44. Klasa Arhitekt

Sada je moguće testirati polimorfizam u par primjera.


65

public static void main (String[] args){ Zaposlenik zaposlenik01, zaposlenik02, zaposlenik03; zaposlenik01= new Zaposlenik("Pero", "Perić", "Kralja Zvonimira 1A"); zaposlenik02= new Inženjer("Marko","Marić","Kralja Tomislava 2B", 10); zaposlenik03= new Arhitekt("Ivan", "Ivić", "Kravlja Krešimira 3A", 23); zaposlenik01.printDescription(); zaposlenik02.printDescription(); zaposlenik03.printDescription();

}

Primjer 45. Polimorfizam:sva su tri zaposlenika istog tipa, ali su instancirani kao različiti objekti

U testnom se programu može vidjeti da se varijablama zaposlenik01, zaposlenik02 i zaposle-nik03 dodijelio tip varijable Zaposlenik, ali se svaka varijabla instancirala kao drugačiji tip objek-ta. To je moguće zbog polimorfizma. Dakle, zaposlenik01 je instanciran kao new Zaposlenik(), a zaposlenik02 kao new Inženjer(). Budući da je klasa Inženjer naslijedila klasu Zaposlenik, a zapo-slenik02 je zapravo i Zaposlenik i Inženjer, može mu se dodijeliti tip Zaposlenik. Isto vrijedi i za zaposlenik03. Arhitekt je Arhitekt, ali je i Zaposlenik. No ako bi se instancirao objekt Zaposlenik u neku varijablu, ta bi varijabla mogla biti samo tipa Zaposlenik, ali ne i Inženjer ili Arhitekt jer je taj objekt samo Zaposlenik, ali nije Inženjer ili Arhitekt. Slična situacija može postojati i kod pa-rametara metoda u kojima se može definirati parametar tipa Zaposlenik što znači da će metoda primati parametre tipa Zaposlenik, ali i Inženjer i Arhitekt.public void metoda(Zaposlenik zaposlenik){ //kod }

Primjer 46. Metoda kao parametar prima tip Zaposlenik

Ova se metoda može pozivati na sljedeće načine i sva su tri načina ispravna.metoda(zaposlenik01); metoda(zaposlenik02); metoda(zaposlenik03);

Primjer 47. U metodu se mogu slati sve podklase klase Zaposlenik


66

5. RAZVOJ APLIKACIJA ZA ANDROID PLATFORMU

5.1. Instalacija potrebnih alata

Kako bi se započelo s razvojem Android aplikacija, prvo se izrađuje instalacija potrebnih alata, prije svega JDK. JDK je dostupan na sljedećoj internetskoj stranici:

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

JDK mora biti kompatibilan s operacijskim sustavom na kojemu će se aplikacije razvijati. Andro-id aplikacije se razvijaju u Eclipse IDE (engl. Intergrated Development Environment) razvojnom alatu. Eclipse je dostupan na:

http://www.eclipse.org/downloads/

Odabire se verzija Eclipse alata. Uz ovu se skriptu preporučuje korištenje „Eclipse IDE for Java EE Developers“, ali je moguća i druga verzija, ovisno o vlastitim preferencijama. Primjeri koji su navedeni u ovoj skripti, pisani su u Eclipse verziji Indigo koja je niža verzija od trenutne Juno. Stoga će izgled samog Eclipsea biti nešto drugačiji u primjerima. Osim ovih dviju instalacija, po-trebno je instalirati i Android SDK, tj. klase i razvojno okruženje koje se koristi za razvoj Android aplikacija. Android SDK se instalira preko Eclipse plugina i to na sljedeći način. U Eclipse menu se klikne na Help -> Install New Software. Otvoriti će se prozor Install u kojem se klikne na Add. U Name se stavi proizvoljan naziv npr. ADT plugin te se kopira sljedeća adresa u Location:

https://dl-ssl.google.com/android/eclipse/

Slika 81. Instalacija Android SDK plugina

Nakon toga se označi Developer Tools, prihvaćaju se licence, klikne se na Finish i čeka se izvrše-nje instalacija. Nakon instalacije restartira se Eclipse i pokreće se u Eclipse menu Window -> An-droid SDK Manager. Ako se koristi verzija Juno, prvo se dodaje AndroidSDK manager u izbornik Window tako da se pokrene Window -> Customize Perspective... te se označi Android SDK and AVD Manager nakon čega se manageri pokreću na prethodno navedeni način.

U Android SDK alatu određuje se za koje se platforme Androida želi razvijati. Trenutno se podr-žava od verzije 1.5 (API 3), tj. Cupcake do verzije 4.2 (API 17), tj. Jelly Bean. Novije verzije Andro-ida imaju veće i bolje mogućnosti i programer bira verziju platforme kojom želi razvijati aplikaci-ju. Ovdje su trenutno dostupne sve verzije SDK-ova te Tools folder. Za SDK-ove se odabire samo SDK platform, a ako se žele razvijati aplikacije s Google mapama, označuje se i Google APIs. Ostalo je proizvoljno. Odabiru se i System Image datoteke za kreiranje i pokretanje emulatora.

RAZVOJ APLIKACIJA ZA ANDROID PLATFORMU

67

Slika 82. Android SDK Manager

Zatim se izrađuje emulator u kojem će se testirati izrađene aplikacije. Emulatori se uređuju kli-kom na meni Window -> AVD Manager u kojem se bira New i postavljaju se sljedeći parametri:

a) AVD Name - postavlja se naziv emulatora.

b) Devic –AVD manager sadrži već gotove konfiguracije uređaja. Može se odabrati jedna od već postojećih konfiguracija. Ne mora se postavljati ukoliko se želi napraviti vlastita konfigu-racija.

c) Target – programer odabire za koju verziju Androida želi raditi aplikaciju i koju mini-malnu verziju želi podržavati. Sve novije verzije Androida podržavaju i starije verzije tako da je najbolje postaviti najnoviju verziju Androida.

d) CPU/ABI – Android uređaji koriste različite arhitekture procesora. Bira se arhitektura koju će emulator koristiti. Postoje različite prednosti i nedostatci ovakvog izbora. Npr. Intelova arhitektura podržava GPU akceleraciju što znači da će emulator koristiti grafičku karticu računa-la kako bi se ubrzao rad emulatora.

e) Memory Option – emulator za svoj rad koristi RAM memoriju računala. Postavlja se koliko će RAM memorije emulator imati na raspolaganju. Što je više RAM memorije, bolje je za emulator.

f) Internal Storage – Android uređaji imaju određenu količinu unutarnje memorije u koju se spremaju brojevi kontakata, aplikacije, razne datoteke i sl.

g) SD Card – u neke se Android uređaje može ubaciti SD kartica s dodatnom memorijom kako bi se povećao njegov kapacitet. Može se odrediti koliko će vanjske memorije emulator imati.


68

Slika 83. Kreiranje Android emulatora

Kada se ispune svi potrebni elementi, klikne se na OK i emulator je spreman za korištenje.

5.2. Kreiranje Android projekta

Android projekt sadrži sve potrebne datoteke koje obuhvaćaju izvorni kod Android aplikacije. Android SDK alati omogućavaju jednostavan način kreiranja Android projekta sa skupom osnov-nih direktorija i datoteka. Android projekt se kreira na sljedeći način: File -> New -> Other -> Android -> Android Application Project.

Slika 84. Kreiranje Android projekta


69

a) Application Name – naziv aplikacije koja će se prikazati korisnicima.

b) Project Name – naziv projekta vidljivog u Eclipse IDE

c) Package Name – namespace paket u kojem se nalaze Java klase (pravila su ista kao i u Javi). Naziv paketa mora biti unikatan u cijelom Android sustavu. Postoje razne preporuke kako imenovati paket.

d) Minimum Required SDK – najmanja verzija Android OS-a na kojoj će se pokretati aplika-cija. Ako je minimalna verzija 2.2., aplikaciju neće podržavati uređaji s 2.1. OS-om

e) Target SDK – ciljani Android OS za koji se želi razvijati aplikacija. Ako je ciljani SDK 4.1., aplikaciju neće podržavati uređaji s 4.2. OS-om.

f) Compile With – verzija operacijskog sustava za koji se aplikacija kompilira. Inače se ostavlja ista kao Target SDK.

g) Theme – određuje se Android tema koja određuje izgled određenih komponenti aplika-cije.

Na sljedećem se prozoru ugasi opcija Create custom launcher. Ako je ova opcija upaljena, nudi se izrada Launcher ikona. Launcher ikona je ikona koju korisnici vide na Home screenu Android uređaja, tj. klikom na tu ikonu ulazi se u aplikaciju. Ona se može i kasnije izraditi.

Zatim se može kreirati:

a) Blank Activity

Blank Activity je prazna aktivnost koja sadrži samo osnovne komponente prozora. To je najčešće Title bar traka na vrhu na kojoj piše naziv aplikacije ili sl.

b) Fullscreen Activity

Fullscreen Activity je također prazna aktivnost, ali su osnovne komponente skrivene. Dakle, ova je aktivnost u potpunosti prazna.

c) Master Detail Flow Activity

Master Detail Flow Activity je aktivnost koja se najčešće koristi u tabletima. Zahtijeva da najma-nja verzija OS-a bude 3.0. jer koristi fragmente koji su podržani od te verzije. Sastoji se od liste stavki s lijeve strane i detaljnog opisa stavki s desne strane.

Najbolje je odabrati Blank Activity. Sljedeći je korak odabir naziva aktivnosti, naziv Java klase i naziv layouta što je XML datoteka u kojoj se kreira UI, tj. izgled aktivnosti. Tip se navigacije može ostaviti na None.


70

Slika 85.Arhitektura Android projekta

Android projekt sastoji se od više datoteka i direktorija, a pojašnjeni su sljedeći:

a) AndroidManifest.xml

Manifest datoteka opisuje osnovne karakteristike aplikacije i definira njene komponente. Jedan je od najvažnijih elemenata manifesta <uses-sdk> element kojim se deklarira kompatibilnost aplikacije za različite verzije Android operacijskog sustava. Kada se Android projekt kreira, oda-bire se najmanja i najviša podržana verzija OS-a koja je zabilježena ovim elementom:

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" />

Primjer 48 Najmanja i najviša podržana verzija OS-a u manifestu

U manifestu se također moraju definirati sve aktivnosti koje aplikacija sadrži.

<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity

android:name="android.gauss.androidtutorial.MainActivity" android:label="@string/app_name"> <intent-filter>

<action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" />

</intent-filter> </activity>

</application>

Primjer 49. Definiranje aktivnosti u manifestu

U Activity se elementu pomoću Name atributa definira putanja do Activity klase. Label atribu-


71

tom se označava string koji će se koristiti kao naziv aktivnosti, a prikazat će se u Title Baru. U intent-filter elementu MainActivity aktivnost se označava kao Home aktivnost, tj. kao glavna ulazna aktivnost aplikacije android.intent.action.Main. Označava se i da će ova aktivnost biti pri-kazana kao ikona na Android application launcher ekranu android.intent.category.LAUNCHER.

b) src

U src se direktoriju nalaze glavne Java klase. Kreiraju se nove klase potrebne za razvoj različitih komponenti aplikacije.

c) res

U res se direktoriju nalaze razne dodatne komponente za razvoj aplikacije kao što su slike, XML datoteke za definiranje UI-a, datoteke za definirane nekih vrijednosti, lokalizacija i sl.

d) drawable-hdpi

Predstavlja direktorij za slike koje su dizajnirane za uređaje s HDPI ekranima. Postoje i direktoriji za vrste ekrana druge gustoće piksela (LDPI, MDPI, XHDPI).

e) Layout

Layout je direktorij za XML datoteke kojima definiramo UI.

f) Values

Values je direktorij za ostale XML datoteke koje sadrže skup resursa kao što su string vrijednosti, definicije boja i sl.

Kreiranjem projekta SDK je već stvorio testnu Hello world! aplikaciju. Aplikacija se može testirati tako da se napravi desni klik na projekt -> Run As -> Android Application. Nakon što se emulator učitao, pokreće se Android Tutorial aplikacija.

Slika 86. Hello World aplikacija

Nakon uspješno prevedenog Android projekta, u gen se direktoriju može naći R.java


72

klasa. Tu klasu generira sam kompajler, a služi za referenciranje svih resursa koji se ko-riste u projektu. Android svakom resursu dodjeljuje identifikator pomoću kojeg pristupa resursu, a programer tim resursima pristupa R.java klasom. Kada se kreirao projekt, kreirala se i XML layout datoteka. Ona se nalazi u resursima u direktoriju res->layout kojemu je prevođenjem dodan identifikator u R.java klasu.public static final class layout {

public static final int activity_main=0x7f030000; }

Primjer 50. Identifikator activity_main layouta

Rasursima se različito pristupa u kodu što ovisi o tome gdje se nalaze:

a) R.layout.activity_main – pristupa se layout-u activity_main koji se nalazi u direktoriju layout

b) R.drawable.ic_launcher – pristupa se slici ic_launcher koja se nalazi u direktoriju drawa-ble

c) R.string.app_name – pristupa se string varijabli koja se nalazi u direktoriju values u datoteci strings.xml

d) R.id.helloText – pristupa se elementu u XML layout datoteci.

Postoji još nekolicina resursa koji se mogu i ne moraju koristiti i svima se pristupa preko R.java klase.

5.3. XML kao osnova Android korisničkog sučelja (UI-a)

XML (engl. eXtensible Markup Language) se veoma često koristi kao format prikaza, strukture i prenošenja podataka i upravo je zbog toga poznavanje strukture XML formata od iznimne važ-nosti. XML je striktan dokument u kojemu svi elementi moraju biti pravilno otvoreni i zatvoreni. Element podrazumijeva zapis koji počinje između znaka manje od(<) i veće od(>). Između se nalazi naziv elementa, a završava s manje od + kosa crta (</) i veće od(>). Element izgleda ovako:

<kružnica>Moja kružnica</kružica>

Primjer 51. osnovni XML element

<kružnica> se na engleskom još naziva opening tag ili otvarajuća oznaka, a </kružnica> closing tag ili zatvarajuća oznaka. Razlika je u kosoj crti kada se element zatvara. U primjeru ispred nalazi se element čiji je naziv (engl. name) kružnica, a vrijednost (engl. value) je Moja kružni-ca. Važno je da svaki element bude otvoren, a na kraju zatvoren. Svaki element osim naziva i vrijednosti može sadržavati i atribute. Atributi su vrijednosti koje se nalaze u otvorenom dijelu elementa u stilu ključ – vrijednost. Npr.

<kružnica polumjer = "10">Moja Kružnica</kružnica>

Primjer 52. XML atribut elementa

Dakle, atribut elementa kružnica je polumjer, a njegova je vrijednost 10. Elementi mogu imati i više od jednog atributa. Ne postoji granica koja određuje maksimalan broj atributa koji element može imati.


73

<kružnica polumjer = "10" x = "5" y = "5">Moja Kružnica</kružnica>

Primjer 51. XML element podržava veći broja atributa

Ako element nema vrijednost, a ima npr. samo atribute, može se odmah zatvoriti tako da se definira slično kao i element zatvaranja, ali je kosa crta na kraju.

<kružnica polumjer = "10" x = "5" y = "5" /> Primjer 53. XML element koji je istovremeno otvoren i zatvoren

Kao što je već rečeno, XML se koristi za prikaz strukture podataka. Tako se može prikazati struk-tura kuće i vlasnika na sljedeći način:

<kuća> <adresa>Kralja Zvonimira</adresa> <kućni_broj>10</kućni_broj> <vlasnik>

<ime>Pero</ime> <prezime>Perić</prezime> <dob>30</dob>

<spol>Muško</spol> </vlasnik>

</kuća>

Primjer 54. XML prikaz strukture podataka

Kuća sadrži nekoliko elemenata: adresu, kućni broj i vlasnik. Za vlasnika se također mogu defini-rati i njegovi elementi, tj. ime, prezime, dob, spol. Može se ići još dublje u strukturu pa se tako za vlasnika koji ima životinju definiraju elementi za životinju. Postoji uska poveznica i s objektima u OOP. Ako postoji klasa Kuća, ima varijable: adresa tipa String, kućniBroj tipa int, vlasnik tipa Vlasnik. Tada bi se kreirala još jedna klasa Vlasnik koja ima varijable: ime tipa String, prezime tipa String, dob tipa int i spol tipa String.

Slika 87. Odnos strukture objekata i XML strukture

U definiranju se korisničkog sučelja za Android ne koriste vrijednosti elemenata nego samo atri-


74

buti. Svaki View definira svoja svojstva kroz atribute elementa. Npr. ako se želi u XML-u kreirati gumb, kreira se element <Button> kojemu se dodjeljuju svojstva kroz atribute na sljedeći način:<Button android:id="@+id/myButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="OK" />

Primjer 55. Button View u Android XML-u

Atributom id gumbu se dodjeljuje jedinstveni identifikator kako bi se kasnije mogao programski referencirati i manipulirati. Atributi layout_width i layout_height su atributi koji određuju visinu i širinu gumba. U ovom je slučaju postavljena vrijednost wrap_content što znači da će visina i širina biti jednake veličini teksta unutar gumba, u ovom slučaju veličine teksta OK. Atributom text postavlja se koji će tekst biti prikazan unutar gumba.

5.4. Android Activity i UI XML

Android Activity se može zamisliti kao prazno platno kojem programer daje izgled koji definira u XML layout datoteci. Vrlo se često pojam Activity izjednačuje s pojmom Context. Context je, kao što mu i sam naziv govori, kontekst trenutnog stanja aplikacije/objekta. Novokreiranim ob-jektima omogućava razumjeti što se zapravo događa. Osnovno je svojstvo konteksta da se može pozivati kada je potrebna informacija o nekom drugom dijelu programa (aktivnosti, aplikacije). Context je sučelje za globalne informacije o okruženju aplikacije. Veoma često kod programi-ranja Android aplikacija neki objekti prilikom instanciranja zahtijevaju da se u konstruktor šalje Context. Zato je važno znati da je aktivnost Context.

Slika 88. Spajanje XML layouta u aktivnost


75

Kada se kreirao Android projekt, odabrana je Blank Activity koja sadrži Title Bar traku na vrhu (traka u kojoj piše Android Tutorial). Ova traka nije direktni dio aktivnosti i zbog toga se u layou-tu definira izgled za prazan dio aktivnosti ispod Title Bara. Title Bar se može maknuti programski ili u manifestu. Ako se Title Bar makne, layout se raširi po cijeloj aktivnosti. U manifestu se dodijeli android: theme atribut s vrijednošću:

@android:style/Theme.NoTitleBar

<activity android:name="android.gauss.androidtutorial.MainActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" > <intent-filter>

<action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" />

</intent-filter> </activity>

Primjer 56. Micanje Title Bara u manifestu

Programski se Title Bar odstranjuje tako da se u onCreate() metodi napiše sljedeći kod:requestWindowFeature(Window.FEATURE_NO_TITLE);

Slika 89. Micanje Title Bar programski

Layout definira vizualnu strukturu korisničkog sučelja kao što je UI za aktivnost. Layouti se mogu definirati na dva načina: deklaracijom UI elemenata u XML-u ili instanciranjem layout eleme-nata u kodu. Android pruža mogućnost kreiranja elemenata preko XML datoteke tako što se pozivanjem elemenata u XML datoteci referencira na View i ViewGroup klase i podklase. Isto tako, programer može i u samoj aktivnosti kreirati i slagati View i VewGroup objekte. Prednost je deklariranja UI-a u XML-u što se postiže razdvajanje koda od prezentacijskog dijela aplikacije. Tako je UI neovisan o programskom kodu što znači da se svojstva elemenata mogu mijenjati bez utjecaja na programski kod. Deklariranje UI elemenata strukturno vrlo blisko prati nazive njihovih klasa i metoda: nazivi su elemenata vrlo slični nazivima klasa, a nazivi atributa nazivi-ma metoda. Npr. Button element u XML-u se odnosi na Button klasu, a njegov atribut text na metodu Button.setText().

Kao što je već rečeno, UI aktivnost se definira u layout XML datoteci. U takvoj se datoteci ko-riste dvije vrste objekata: View i ViewGroup. ViewGroup u sebi može sadržavati više Viewova i ViewGroupa, a View ne može sadržavati niti jedan element. Dakle, ViewGroup je kontejner za Viewove koji se u njemu hijerarhijski različito slažu što ovisi o tipu ViewGroupa.

ViewGroup je nadklasa sljedećih klasa [5]:

a) LinearLayout – pozicionira elemente u jedan redak ili stupac ovisno o orijentaciji.

b) TableLayout – pozicionira elemente u obliku tablice po redovima i stupcima.

c) FrameLayout – uglavnom dodjeljuje pozicije jednom elementu. Ako sadrži više eleme-nata, slažu se jedan na drugi po zamišljenoj Z osi.

d) RelativeLayout – vjerojatno najmoćniji od svih ViewGroupova. Omogućava pozicioni-


76

ranje elemenata relativno u odnosu na druge elemente i u odnosu na sam layout.

e) AbsoluteLayout – elementi se pozicioniraju na specificirane X i Y koordinate unutar layouta. Korištenje se ovog layouta ne preporuča jer neće biti ispravno prikazan na različitim veličinama ekrana i kod različitih orijentacija.

Viewovi su elementi koji se slažu u ViewGroupu. Viewovi mogu biti: Button, TextView, EditText, ImageView, VideoView i sl. Za kreiranje se UI layouta ne preporuča grafički editor jer najčešće ne prikazuje dobro sadržaj. Preporuča se korištenje XML editora za slaganje elemenata. Slijedi primjer layouta kao na slici iznad.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <TextView android:id="@+id/textView1" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Top Left" /> <TextView android:id="@+id/textView2" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Middle" /> <TextView android:id="@+id/textView3" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bottom Right" /> </RelativeLayout>

Primjer 57. Definiranje XML layouta

Prvom TextViewu se dodjeljuje ID preko kojeg se u kodu može dohvatiti. S @+id/text-View1 je rečeno da u R.java klasu zapiše ovaj ID kako bi se kasnije mogao koristiti. Align-ParentTop i AlignParentLeft govore TextViewu da se smjesti na vrh i lijevo u odnosu na roditelja, tj. ViewGrupu u kojoj se nalazi, a u ovom slučaju RelativeLayout. Width i Height su atributi koji određuju širinu i dužinu za ovaj TextView, tj. koliko će prostora zauzima-ti. Text označava koji će tekst biti prikazan. Može se uočiti da se editor buni kod napisanog teksta. Razlog tomu je što bi svi stringovi trebali biti zapisani u posebnu datoteku i refer-encirani u atributu text. Dakle, treba otvoriti datoteku strings.xml i upisati sljedeći kod:


77

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="top_left">Top Left</string> <string name="middle">Middle</string> <string name="bottom_right">Bottom Right</string> </resources>

Primjer 58 Definiranje string resursa u string.xml datoteci

Nakon toga se u text atributu taj string referencira na sljedeći način:<TextView android:id="@+id/textView2" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/middle" />

Primjer 59. Referenciranje string resursa u TextViewu

Najčešće se provodi na ovakav način zbog lokalizacije.

ZADATAK 18

Kreiraj aktivnost i dodijeli joj XML layout datoteku kao na slici:


78

5.5. Pokretanje aktivnosti (engl. Intent)

Android aplikacije najčešće imaju veći broj ekrana zbog aktivnosti koje prikazuju različite stavke. To zahtjeva pozivanje različitih aktivnosti kojima se šalju određeni podatci koji se žele prikazati. Zbog toga se postavlja EditText u koji se upisuje neka vrijednosti i Button kojim se poziva druga aktivnosti. Vrijednost koja je upisana u EditTextu šalje se u aktivnost. Dakle, potrebno je promi-jeniti main_activity.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <EditText android:id="@+id/myEditText" android:layout_width="100dp" android:layout_height="wrap_content" android:textSize="20sp"/> <Button android:id="@+id/buttonOk" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/myEditText" android:text="@string/button_ok"/> </RelativeLayout>

Primjer 60. XMl layout datoteka s Buttonom

Izgled Activity klase:


79

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

//Dohvaća se referenca na element EditText kojega smo postavili u layout XMLu sa ID-em R.id.myEditText

final EditText editText = (EditText)findViewById(R.id.myEditText);

//Dohvaća se referenca na element Button kojega smo postavili u layout XMLu sa ID-em R.id.buttonOk

Button button = (Button) findViewById(R.id.buttonOk); //Registrira se onClick listener na button. Listener "sluša" kada //korisnik klikne na button i u tom slučaju //pokreče metodu OnClick(View v) button.setOnClickListener(new OnClickListener() { //Metoda koje se pokreče kada korisnik klikne na button @Override public void onClick(View v) { //Iz EditTexta dohvačamo upisanu vrijednost String myValue = editText.getText().toString();

Intent intent = new Intent(MainActivity.this, SecondActivity.class); //U intent objekt se stavlja vrijednost dohvačena iz //EditText-a i postavlja joj se //identifikator "editTextValue" kako bi se preko tog //identifikatora kasnije mogla dohvatiti ta vrijednost

intent.putExtra("editTextValue", myValue); startActivity(intent); } }); } }

Primjer 61. Pokretanje aktivnosti pomoći Intent objekta

View se uz pomoć metode findViewById(R.id.my_edit_text) dohvati u layout XML-u s ID-em my_edit_text. Ova metoda vraća objekt tipa View i casta ga u tip EditText. String se sprema u myValue varijablu koja se nalazi u EditTextu, tj. predstavlja vrijednost koju korisnik upiše u EditText. Kao što se dohvaća EditText, dohvaća se i button iz XML-a. Njemu se postavlja OnClic-kListener. OnClickListener je interface koji sluša, tj. čeka klik na button. Kada se klikne na button, pokreće se metoda onClick(View v). U toj je metodi kreiran Intent objekt koji se može prevesti kao namjera. Predstavlja klasu kojom programer izvršava neku namjeru, a koja je u ovom slu-čaju pokretanje nove aktivnosti. Intent se može zamislit kao ljepilo između dviju aktivnosti. U konstruktor Intent klase šalje se prvo Context, a zatim i naziv Activity klase koja se želi pokrenuti. U Intent je postavljena i vrijednost koja se šalje u sljedeću aktivnost metodom putExtra. Pomoću startActivity(intent) pokreće se druga aktivnost.


80

Sljedeći je korak kreiranje klase za drugu aktivnost, tj. SecondActivity. Prvo se mora kreirati XML layout datoteka.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp"/> </LinearLayout>

Primjer 62. XML layout datoteka druge aktivnosti

Nakon toga se kreira aktivnost SecondActivity.

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class SecondActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second);

//Kada se iz prošle aktivnosti poslao objekt intent, ovdje ga se //dohvaća i iz njega izvlači string preko identifikatora

final String myValue=getIntent().getStringExtra("editTextValue");

//Iz layout XML-a se dohvaća TextView i kao vrijednost mu se //postavlja string iz intenta

TextView textView=(TextView) findViewById(R.id.textView); textView.setText(myValue); } }

Primjer 63. Aktivnost koja se pokreće pomoću Intent objekta

Nova se aktivnost mora registrirati u manifestu jer inače aplikacija neće raditi, tj. javljat će greš-ku da ne može naći aktivnost.


81

<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > ... <activity android:name="android.gauss.androidtutorial.SecondActivity" android:theme="@android:style/Theme.NoTitleBar"> </activity> </application>

Primjer 64 Definiranje aktivnosti u manifestu

Nakon svih se koraka aplikacija pokreće i trebao bi se dobiti sljedeći rezultat:

Slika 89. Pokretanje aktivnosti u emulatoru

Klikom na OK gumb trebala bi se pokrenuti druga aktivnost u kojoj piše vrijednost koja je napisana u prvoj aktivnost u EditTextu.

5.6. Životni ciklus Android aktivnosti [14]

Od pokretanja, rada s aplikacijom pa sve do izlaska instance aktivnosti u aplikaciji prelaze u različita stanja svog životnog ciklusa. Npr. kada se aktivnost pokreće prvi put, dolazi u prednji plan sustava i dobiva fokus. Kroz taj proces Android sustav poziva niz metoda životnog ciklusa aktivnosti. Ako korisnik pokreće akciju koja započinje neku drugu aktivnost ili pokreće neku drugu aplikaciju, sustav opet poziva niz metoda u aktivnosti dok ju stavlja u pozadinu. Ponašanje se aktivnosti unutar tih metoda životnog ciklusa može odrediti kada korisnik ulazi i izlazi iz ak-tivnosti. Npr. ako se izvodi streaming nekog videa, pauzira se streaming ako korisnik izlazi iz aplikacije. Kada se korisnik vrati u aplikaciju, klikom na Play nastavlja streaming video na onom mjestu gdje je stao.

Temeljne programske paradigme pokreću aplikacije iz neke main aktivnosti, a Android pokreće kod u Activity instanci pokretanjem određene callback metode koja odgovara stanjima životnog ciklusa aktivnosti.

Postoji slijed callback metoda koje se izvode kada se aktivnost pokreće i slijed callback metoda kada se aktivnost zaustavlja. Tijekom života aktivnosti sustav poziva metode njenog životnog ciklusa u obliku piramide i korak po korak se kreće po stanjima životnog ciklusa. Dakle, svako je stanje životnog ciklusa sljedeći korak u toj piramidi. Vrh piramide je stanje aktivnosti u kojem je aktivnost prikazana na ekranu, a korisnik je u interakciji s aktivnošću. Kako korisnik izlazi iz aktivnosti, sustav poziva drugi niz metoda, tj. kreće se niz piramidu kako bi se rastavio i pravilno izišao iz aktivnosti. U nekim se slučajevima stanje aktivnosti u izlazu neće obaviti do kraja, tj. stat


82

će na nekom određenom stanju (npr. kada korisnik pokrene drugu aktivnost). S tog se stanja ak-tivnost kasnije može vratiti na stanje u vrhu piramide i nastaviti rad tamo gdje je zadnji put stala.

Slika 90. Životni ciklus aktivnosti [15]

Nije potrebno implementirati sva stanja životnog ciklusa. Međutim, potrebno je razumjeti svaki od njih i implementirati ih tako da se aplikacija ponaša onako kako korisnik to očekuje. Pravilna implementacija metoda životnog ciklusa aktivnosti osigurava da se aplikacija pravilno ponaša i da:

se aplikacija ne ruši ako korisnik primi poziv ili pokrene neku drugu aplikaciju

aplikacija ne koristi dragocjene sistemske resurse ako je korisnik ne koristi aktivno

se ne izgubi stanje aplikacije ako korisnik izađe iz nje i kasnije se vrati

se aplikacija ne sruši ili izgubi stanje prilikom tranzicije ekrana iz Portrait i Landscape

Od šest mogućih stanja, samo su tri stanja statična, tj. aplikacija može živjeti samo u tri stanja:

a) Resumed

U ovom je stanju aktivnost vidljiva na ekranu i korisnik može biti u interakciji s njom. U ovom je stanju aktivnost najčešće.

b) Paused

U ovom je stanju aktivnost pomračena, djelomično vidljiva zbog druge aktivnosti. Kada npr. neka druga aktivnost ne prikriva cijeli ekran, prva se aktivnost samo djelomično vidi. Pauzirana aktivnosti ne može prihvatiti unos korisnika ili pokretati neki kod.

c) Stopped

U ovom je stanju aktivnost u potpunosti skrivena iza neke druge aktivnosti i nije vidljiva kori-sniku. Smatra se da je aktivnost u pozadini. Instanca aktivnosti i njeno stanje (npr. varijable) su očuvani, ali se ne može izvršavati nikakav kod.

Druga stanja (Created i Started) su stanja tranzicije u kojima se aktivnost ne zadržava, nego se brzo kreće iz jednog stanja u sljedeće pozivanjem sljedeće callback metode. Kada sustav pozove


83

onCreate() metodu, ubrzo nakon toga poziva i onStart() metodu koja zatim brzo poziva onResu-me() metodu. Da bi se vidio redoslijed pokretanja tih metoda stanja, može se napraviti primjer u kojem će se u svakoj od tih metoda ispisivat nešto u Log.

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class MainActivity extends Activity { private static final String TAG = MainActivity.class.getName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.d(TAG, "POKRENUT CREATE"); } @Override protected void onStart() { super.onStart(); Log.d(TAG, "POKRENUT START"); } @Override protected void onResume() { super.onResume(); Log.d(TAG, "POKRENUT RESUME"); } @Override protected void onPause() { super.onPause(); Log.d(TAG, "POKRENUT PAUSE"); } @Override protected void onStop() { super.onStop(); Log.d(TAG, "POKRENUT STOP"); } @Override protected void onDestroy() { super.onDestroy(); Log.d(TAG, "POKRENUT DESTROY"); } }

Primjer 65. Ispis stanja životnog ciklusa aktivnosti u Log

Ispis se može vidjeti u alatu LogCat koji se skida zajedno s Android SDK. Ako nije prika-zan u Eclipseu, može se naći u Window -> ShowView -> LogCat.


84

Slika 91. Android Log s prikazom ispisanih vrijednosti u svakom stanju životnog ciklusa

Crvenim su pravokutnicima označene poruke koje su postavljene u aktivnosti da se ispišu. Pokretanjem aktivnosti pokrenule su se metode: onCreate(), onStart() i onResume() Ako koris-nik stisne gumb Back nakon što se prikazao ekran, pokrenut će se sljedeće metode: onPause(), onStop() i onDestroy(). Kada se aplikacija normalno koristi, aktivnosti mogu prepriječiti neke druge vizualne komponente koje uzrokuju odlazak aktivnosti u Pause stanje. Npr. ako se otvori neka polutransparentna aktivnost u obliku nekog Dialog prozora, aktivnost se pauzira. Kada aktivnost jednom postane potpuno nevidljiva, prelazi u stanje Stop. Kada aktivnost uđe u Pause stanje, sustav poziva onPause() metodu aktivnosti kako bi programer mogao zaustaviti neke akcije koje traju kao što su: izvođenje video sadržaja ili spremanje onih informacije koje će kasnije biti potrebne ukoliko korisnik nastavi izlazak iz aplikacije. Ako se korisnik vrati iz pauzi-rane aktivnosti, sustav poziva onResume() metodu. Ako aktivnost ode u Pause stanje, aktivnost će se na trenutak zaustaviti i korisnik će nastaviti svoj rad ili u potpunosti izaći iz aplikacije. U onPause() treba izbjegavati one radnje koje zahtijevaju puno procesiranja jer usporavaju tran-ziciju aktivnosti iz jednog stanja u drugo. Takve se radnje obavljaju u onStop() metodi. Kada se aktivnost pauzira, Activity instanca je u memoriji i poziva se kada aktivnost prelazi u Resume stanje. Nije potrebno ponovno inicijalizirati komponente koje su kreirane za vrijeme bilo kojih od callback metoda prije Resume stanja.

Pravilno je zaustavljanje i ponovno pokretanje aktivnosti važan proces u životnom ciklusu ak-tivnosti jer stvara kod korisnika osjećaj da je aplikacija živa i da ne gubi svoje stanje. Postoji par ključnih scenarija kada se aktivnost zaustavlja i ponovno pokreće:

a) Korisnik otvara ekran Recent Apps (dugim pritiskom na Home tipku) i prebacuje se s trenutne aplikacije na drugu. Prva aktivnost prelazi u Stop stanje. Kada se korisnik vraća u apli-kaciju kroz Android Home Screen ili Recent Apps ekran, aktivnost se ponovno pokreće.

b) Korisnik pravi akciju u aplikaciji koja pokreće novu aktivnost. Prva aktivnost se zaustav-lja i prelazi u Stop stanje. Ako korisnik klikne Back tipku i vraća se u prvu aktivnost, ta se aktiv-nost ponovno pokreće.

c) Korisnik prima poziv kad koristi aplikaciju.


85

Activity klasa osigurava dvije metode životnog ciklusa: onStop() i onRestart(). One omogućuju specifično rukovanje aktivnosti kada se zaustavlja i ponovno pokreće. Pause stanje se pokreće kada je aktivnost djelomično vidljiva, a Stop stanje osigurava da UI nije vidljiv i da je korisnikov fokus u drugoj aktivnosti ili aplikaciji.

Trenutno još nije opisana onDestroy() metoda. Ova se metoda poziva u par slučajeva. Kada je ko-risnik u aktivnosti i klikne na Back tipku, poziva se onDestroy() metoda nakon onStop() metode. Sustav može i sam pozvati ovu metodu ako je aktivnost u stanju Stop, ako se nije dugo koristila ili ako trenutna aktivnost zahtjeva puno memorije. Ovom se metodom oslobađa memorija i resursi za neke druge stvari. Ako se aktivnost uništi pritiskom na tipku Back, sistemski je koncept Activity instance zauvijek nestao jer aktivnost smatra da više nije potrebna. Međutim, ako se aktivnost uništi zbog sistemskih ograničenja, aktivnost nije samo nestala, već i sustav pamti da je aktivnost uništena. Ako se korisnik vrati na tu aktivnost, sustav ju ponovno kreira korištenjem skupa spremljenih podataka koji opisuju stanje aktivnosti prije njenog uništenja. Spremljeni se podatci, koje sustav koristi za ponovno kreiranje aktivnosti, nazivaju instance state. Čine kolekciju ključ – vrijednost parova koji su spremljeni u Bundle objekt. Sustav koristi Bundle instancu kako bi spremio informacije svakog View objekta u layoutu aktivnosti (npr. tekst na-pisan u EditTextu). Dakle, ako se instanca uništi i ponovno kreira, stanje se layouta obnavlja bez potrebnog dodatnog koda. U takvom se slučaju pozivaju još dvije dodatne metode: onSaveIn-stanceState() i onRestoreInstanceState().

Kako bi se spremili dodatni podatci o stanju aktivnosti, potrebna je overrideati onSaveInstan-ceState() callback metoda. Sustav poziva ovu metodu kada korisnik izlazi iz aktivnosti. Šalje aktivnosti Bundle objekt koji se sprema kada se poziva onDestroy(). Ako kasnije sustav mora ponovno kreirati instancu aktivnosti, šalje Bundle objekt u onCreate() i u onRestoreInstanceS-tate() metode.

Slika 92.Spremanje i ponovno kreiranje stanja aktivnosti [16]

5.7. Podržavanje različitih uređaja [11]

Uvijek je dobro izdvajati UI stringove iz aplikacijskog koda i držati ih u eksternoj datoteci. U An-droidu je to lako jer postoji direktorij za resurse u svakom Android projektu. Kreiranjem Android projekta, alat kreira i res/ direktorij. Unutar tog direktorija su: direktoriji za držanje različitih vrsta resursa i res/values/strings.xml datoteka koja sadržava string resurse.


86

Ako se želi podržati više jezika, kreiraju se dodatni values/ direktoriji unutar res/ direktorija u kojima će biti datoteke za držanje resursa. Direktoriji se označavaju imenovanjem s values- , a nakon okomite crte dodaje se ISO kod za označavanje države. Npr. values-es/ će biti direktorij za držanje resursa za španjolski jezik. Android automatski učitava resurse iz direktorija ovisno o postavljenom jeziku uređaja. Dakle, ako je u glavnim postavkama uređaja postavljen španjolski jezik, sustav će automatski učitavati resurse iz values-es/ direktorija. Ukoliko je u postavkama postavljen španjolski jezik, a ne postoji values-es/ direktorij s resursima, automatski se učitavaju resursi iz values/ direktorija.

Slika 93. Direktoriji i datoteke za lokalizaciju

Slijede primjeri različitih resursa stringova za različite jezike.

Za engleski jezik:

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="title">My Application</string> <string name="hello_world">Hello World!</string> </resources>

Primjer 66. Primjer lokalizacije za engleski jezik

Za španjolski jezik:

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="title">Mi Aplicación</string> <string name="hello_world">Hola Mundo!</string> </resources>

Primjer 67. Primjer lokalizacije za španjolski jezik


87

Za francuski jezik: <?xml version="1.0" encoding="utf-8"?> <resources> <string name="title">Mon Application</string> <string name="hello_world">Bonjour le monde !</string> </resources>

Primjer 68. Primjer lokalizacije za francuski jezik

String resursi se mogu referencirati u kodu i XML datotekama korištenjem naziva u atri-butu name koji je definiran u elementu <string>. U kodu se string referencira sa sljede-ćom sintaksom:R.string.<naziv_stringa>

U XML datotekama string se referencira sljedećom sintaksom:@string/<naziv_stringa>

Android kategorizira veličine ekrana dvama osnovnim svojstvima: veličina i gustoća [7]. Pro-gramer mora imati u vidu da će njegova aplikacija biti pokrenuta na ekranima različitih veličina i gustoća. Stoga bi trebao uključiti alternativne resurse kako bi optimizirao izgled aplikacije na različitim ekranima: postoje 4 opće veličine: small, normal, large, xlarge

postoje 4 opće gustoće: low (ldpi), medium (mdpi), high (hdpi) i extra high (xhdpi)

Kako bi deklarirao različite layoute i slike za korištenje na različitim ekranima, postavljaju se alternativni resursi u različite direktorije, slično kao i kod lokalizacije. Orijentacija se ekrana (por-trait i landscape) interpretira kao različita veličina ekrana i aplikacije bi trebale revidirati layout kako bi bile optimizirane u svakoj orijentaciji. Za ovakvu je optimizaciju nužno kreirati jedinst-veni layout XML za svaku veličinu ekrana koju bi aplikacija trebala podržavati. Svaki bi layout tre-bao biti spremljen u odgovarajući direktorij za resurse imenovan s -<veličina_ekrana> sufiksom. Npr. jedinstveni layout za velike ekrane trebao bi biti spremljen unutar res/layout-large/. Nazivi datoteka moraju biti identični, ali sadržaj može biti različit kako bi bio optimiziran za različite ekrane. Layout se referencira na sljedeći način:

R.layout.<naziv_layouta>

Layout se postavlja u onCreate() metodu pomoću metode setContentView(int layouResID). An-droid automatski skalira layout kako bi pravilno stao na ekran. Zbog toga se layouti za različite ekrane ne moraju brinuti o apsolutnim veličinama UI elemenata, nego se moraju fokusirati na strukturu elemenata. Sustav učitava layout file iz odgovarajućeg direktorija na temelju veličine ekrana uređaja na kojoj se vrti aplikacija. Trebaju se ponuditi i različite slike koje su pravilno ska-lirane za svaki osnovni tip gustoće ekrana. Na taj se način postiže vrlo dobra grafička kvaliteta i povećanje performansi na svim gustoćama. Gustoće ekrana su u sljedećim odnosima:a) xhdpi: 2.0b) hdpi: 1.5c) mdpi: 1.0 (osnovno)d) ldpi: 0.75


88

Prema tome, ako postoji slika veličine 200x200 za xhdpi uređaje, izrađuje se ista ta slika 150x150 za hdpi, 100x100 za mdpi i 75x75 za ldpi.

Slika 94. Direktoriji za slike za uređaje različitih gustoća ekrana

Svaki put kada se referencira slika u Android sustav, isto kao i kod različitih veličina ekrana, odre-đuje se i koje će slike učitati što ovisi o gustoći ekrana samog uređaja.

5.8. Fragmenti

Android UI se gradi do skupa View i VewGroupa, a takva se hijerarhija Viewova učitava iz resursa nakon pokretanja aktivnosti. Aktivnost se inicijalizira i prikazuje na ekranu uređaja. Za manje je ekrane ovakvo ponašanje prihvatljivo. Korisnik se kreće iz jedne aktivnosti u drugu, podržavan je brz i intuitivni prelazak između aktivnosti. No, ako je UI raširen na nekom većem ekranu (npr. ekranu tableta), neki će dijelovi ekrana ostati statični i neće se uopće mijenjati. Dakle, veliki će dio ekrana ostati neiskorišten, a kretanje iz aktivnosti u aktivnost nema nekog smisla. Imple-mentacija je UI-a u potpunosti podržana i u njoj se dijelovi ekrana izmjenjuju jednostavnim sakrivanjem i prikazivanjem elemenata ekrana, tj. Viewova. Trebalo bi mijenjati onoliko Viewova koliko ih ima na ekranu, ali to nema smisla. Kako bi se omogućila interakcija u kojoj bi se dijelovi ekrana dinamički izmjenjivali bez pokretanja novih aktivnosti, u Android OS uvedena je Frag-ment klasa. Fragmenti su podržani od verzije 3.0 (API 11, Honeycomb). Fragment se opisuje kao nešto između Viewa i aktivnosti. Kao i View, može biti dodan u ViewGroup ili biti dio layouta. Nije podklasa od Viewa, ali može biti dodan u ViewGroup korištenjem FragmentTransaction ob-jekta. Kao i aktivnost, fragment ima svoj životni ciklus, ali za razliku od aktivnosti, fragment nije Context i njegov je životni ciklus ovisan o aktivnosti u kojoj se nalazi. Kao i svaki View, može se dodati u layout XML ili programski.


89

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:id="@+id/firstFragment" android:layout_width="fill_parent" android:layout_height="fill_parent" class="android.gauss.androidtutorial.FirstFragment" /> </LinearLayout>

Primjer 69. Definiranje fragmenta u layout XMLu

Ovaj layout koristi aktivnost normalno kao i svaki drugi. Layout koristi <fragment> ele-ment u čijem se class atributu definira putanja do klase koja će predstavljati fragment. Dakle, na ovoj se putanji mora kreirati klasa koja će biti podklasa Fragment klase. An-droid Framework automatski kreira instancu tog fragmenta kada se layout učita. Kao i Activity, i fragment može učitati svoj layout i za svaki se fragment definira poseban layout.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/first_fragment"/> </LinearLayout>

Primjer 70. Definiranje XML layout datoteke za fragment

Nakon toga se kreira fragment klasa koja učita svoj layout i koristi elemente isto kao i aktivnost.


90

package android.gauss.androidtutorial; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FirstFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_first, container, false); } }

Primjer 71. Kreiranje FirstFragment klase

Layout se u fragmentu postavlja u metodi onCreateView(), a u aktivnosti u metodi onCreate(). Iako fragment ima svoj životni ciklus, nije identičan životnom ciklusu aktivnosti. Fragmenti imaju dodatne metode životnog ciklusa kao što je i onCreateView(). Ova se metoda poziva kada se inicijalizira layout fragment, a onCreate() kada se inicijalizira sam fragment. Slijedi primjer aktiv-nosti s dva fragmenta koji su jedan ispod drugog.

U layoutu aktivnosti ubačen je još jedan fragment i svakom je elementu postavljen atribut weight = 1 kako bi oba fragmenta dijelila ekran na pola. Postavljena je i orijent-acija LinearLayouta kao vertical, a height atribut je postavljen na 0dp zbog definiranog atributa weight. Drugi fragment je kreiran isto kao i prvi i učitan je njegov layout.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <fragment android:id="@+id/firstFragment" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" class="android.gauss.androidtutorial.FirstFragment" /> <fragment android:id="@+id/secondFragment" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" class="android.gauss.androidtutorial.SecondFragment" /> </LinearLayout>

Primjer 72. Definiranje dva fragmenta u layout aktivnosti


91

Fragmentima su postavljeni sljedeći layouti:

a) za prvi fragment:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/red" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/first_fragment"/> </LinearLayout>

Primjer 73. XML layout prvog fragmenta

b) za drugi fragment:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/second_fragment"/> </LinearLayout>

Primjer 74. XML layout drugog fragmenta

Dobiva se sljedeći rezultat:

Slika 95. Aktivnost koja sadrži dva fragmenta


92

ZADATAK 19Kreiraj aktivnost koja dijeli ekran na 3 fragmenta kao na slici:

5.9. Asinkroni pozivi

AsyncTask klasa u Androidu omogućava pokretanje više operacija istovremeno bez ručnog stva-ranja posebnih dretvi. S asinkronim je pozivima moguće kreirati posebnu dretvu na kojoj će se obaviti neka dugotrajna radnja ili radnja koja zahtjeva puno procesorske obrade. Nakon toga se rezultat vraća u glavnu dretvu. Na taj se način postiže čišći programski model asinkronog pozivanja.

Dretva (negdje se naziva i nit procesa) je dio procesa koji izvršava neku radnju. Dretve se odvi-jaju istovremeno u procesu. Skup se dretvi naziva proces. Android aplikacija sadrži nekolicinu dretvi koje se mogu vidjet u DDMS (engl. Dalivk Debug Monitor Server) pogledu. Ako se s lijeve strane označi paket aplikacije i u alatima iznad klikne na debug, s desne će se strane otvoriti debug prozor i moći će se vidjeti popis dretvi u trenutnoj aplikaciji.

Slika 96. Dretve jedne Android aplikacije


93

Trenutno aplikacija sadrži tri Deamon dretve i tri dretve aplikacije. Deamon dretve nisu dio aplikacije i neovisne su o JVM. Deamon dretve ne ograničavaju JVM u izlaženju, tj. prisutne su i onda kada se JVM ugasi. Deamon dretva je npr. Garbage Collector.

Od ostale se tri dretve koje su dretve aplikacije, izdvajaju dvije Binder dretve. Binder dretve je postavio sustav, a koriste se samo ako treba doći do komunikacije između pro-cesa tzv. IPC (engl. Inter-Process Communication).

Dretva na koju treba obratiti pozornost je:Thread[<1> main] (Running)

Zaslužna je za izvođenje i održavanje aplikacije. Ako bi ova dretva zastala ili bila neaktiv-na neko vrijeme, aplikacija ne bi reagirala na korisnikove interakcije. Ako Android sustav primijeti da aplikacija ne reagira na korisnikove interakcije, ruši aplikaciju jer smatra da nije valjana. Na taj način oslobađa memoriju. Sustav smatra da je aplikacija neaktivna, tj. da je „zaglavila“ ukoliko se u roku od pet sekundi glavna dretva ne vrati na održavanje aplikacije. Upravo se iz tog razlog uvode asinkroni pozivi. Ako glavna dretva skida neki sadržaj s Interneta, mora napustiti svoj zadatak održavanja aplikacije i početi se spajati na internetsku stranicu, skidati sadržaj, spremati sadržaj u datoteku, parsirati sadržaj i sl. Za to bi vrijeme sustav primijetio da je aplikacija neaktivna i srušio bi aplikaciju. Kako bi se to izbjeglo, uvode se asinkroni pozivi, tj. koristi se AsyncTask klasa. AsyncTask klasa je naslijeđena i potrebno je napraviti svoju klasu koja će raditi neku dugotrajnu radnju.package android.gauss.androidtutorial; import android.os.AsyncTask; public class MyAsyncTask extends AsyncTask<Void, Void, Void>{ @Override protected void onPreExecute() { // TODO Auto-generated method stub. super.onPreExecute(); } @Override protected Void doInBackground(Void... params) { // TODO Auto-generated method stub. return null; } @Override protected void onPostExecute(Void result) { // TODO Auto-generated method stub. super.onPostExecute(result); } }

Primjer 75. Kreiranje MyAsyncTask klase

Na naslijeđenu se AsyncTask klasu obavezno mora implementirati doInBackground() metoda, a ostale su metode proizvoljne. U onPreExecute() metodi se npr. može prikazati dijalog koji će označavati proces skidanja sadržaja ili sl. U doInBackground() je potrebno napraviti svu potreb-nu dugotrajnu aktivnost (spajanje na internetsku stranicu, skidanje njenog sadržaja, parsiranje i


94

sl). Metoda onPostExecute() je metoda koja se izvodi na glavnoj dretvi, tj. AsyncTask predaje sav sadržaj glavnoj dretvi i tada se npr. može prikazati u aktivnosti sadržaj koji je skinut s Interneta.

Postavlja se pitanje zašto se onPostExecute() metoda izvodi na glavnoj dretvi, a ne u asinkronoj dretvi? Razlog je što se sve izmjene na ekranu (izmjene na UI) moraju obavljati na glavnoj dretvi. Ako se nalazimo u dretvi koja nije glavna, tj. koja nije main dretva, nekom se TextViewu ne može dodijeliti vrijednost. Na glavnoj dretvi programer može postaviti sve potrebne promjene na UI. Često se AsyncTask koristi kao unutarnja klasa u Activity klasi kako bi se odmah imao pristup layoutu i svim varijablama unutar aktivnosti.

package android.gauss.androidtutorial; import android.app.Activity; import android.os.AsyncTask; import android.os.Bundle; public class MainActivity extends Activity { private static final String TAG = MainActivity.class.getName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MyAsyncTask myAsyncTask = new MyAsyncTask(); myAsyncTask.execute(); } private class MyAsyncTask extends AsyncTask<Void, Void, Void>{ @Override protected void onPreExecute() { //Kod koji se izvršava prije doInBackground() super.onPreExecute(); } @Override protected Void doInBackground(Void... params) { //Kod koji će se vrtiti u pozadini return null; } @Override protected void onPostExecute(Void result) { //Kod koji se izvršava poslije doInBackground() //Ovdje se mogu raditi izmjene na UI elementima super.onPostExecute(result); } } }

Primjer 76 Ugniježđena MyAsyncTask klasa

AsyncTask se pokreće tako da se kreira objekt na koji se pozove metoda execute(). Ako prilikom korištenja asinkronih poziva metoda odlazi u onStop() stanje, zaustavlja se pro-cesiranje. Ako se aktivnost prekine zato što korisnik izlazi iz aplikacije jer ju ne želi koris-titi, zaustavljaju se asinkroni pozivi kako se ne bi odvijala pozadinska radnja.


95

package android.gauss.androidtutorial; import android.app.Activity; import android.os.AsyncTask; import android.os.Bundle; public class MainActivity extends Activity { MyAsyncTask myAsyncTask; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myAsyncTask = new MyAsyncTask(); myAsyncTask.execute(); } @Override protected void onStop() { super.onStop(); if(myAsyncTask != null){ myAsyncTask.cancel(true); } } private static class MyAsyncTask extends AsyncTask<Void, Void, Void>{ @Override protected void onPreExecute() { //Kod koji se izvršava prije doInBackground() super.onPreExecute(); } @Override protected Void doInBackground(Void... params) { //Kod koji će se vrtiti u pozadini return null; } @Override protected void onPostExecute(Void result) { //Kod koji se izvršava poslije doInBackground() //Ovdje se mogu raditi izmjene na UI elementima super.onPostExecute(result); } } }

Primjer 77. Pokretanje asinkronog poziva

5.10. Preference Activity

Preference su korisničke postavke aplikacije. PreferenceActivity se obično sastoji od konfigura-cijskih podataka i UI preko kojih korisnik manipulira konfiguracijskim podatcima. S gledišta kori-sničkog sučelja, preference mogu biti jednostavne tekstualne vrijednosti, check-boxovi, selekci-je s padajućeg izbornika i sl. S gledišta podataka, preference su skup ključ-vrijednost parova. Te su vrijednosti jednostavni tipovi podataka kao integer, boolean, string.


96

Kako bi aplikacija rukovala s korisničkim postavkama, izrađuje se aktivnost u koju će se unositi informacije, tj. Java kod koji će provjeriti i procesirati informacije i nekakav mehanizam za spre-manje tih informacija. Ako bi se obavljalo ručno, bilo bi to puno posla. Upravo zbog toga An-droid pruža gotov framework koji pomaže pri izradi korisničkih postavki. Prvo se definira izgled preferenci u XML datoteci. Za kreiranje je korisničkih postavki potrebno sljedeće:

a) kreiranje Preference resurs datoteke naziva prefs.xml.

b) impementacija PrefsActivity.java datoteke koja koristi prefs.xml kao UI

c) registriranje Preference Activity u manifestu

d) pružanje mogućnosti ulaska u aktivnost kroz aplikaciju

XML datoteke za preference spremaju se u XML direktorij koji se kreira unutar glavnog direk-torija aplikacije. Unutar direktorija kreira se XML datoteka desnim klikom -> New-> Other -> Android XML File. Otvara se prozor u kojem se u Resource Type padajućem izborniku odabire Preference, a u Root Element Preference Screen i klikne se na finish. Sve se to može i ručno na-pisati. Eclipse će kreirati novu datoteku koju je najbolje otvoriti u XML pogledu. Sada se mogu dodavati elementi koji će predstavljati korisničke postavke. U elementima koji se rade, nemaju svi atributi istu važnost . Najvažniji su sljedeći atributi:

a) Key

Jedinstveni je identifikator za svaku preference stavku. Pomoću njega se kasnije dohvaća spre-mljena postavka.

b) Title

Predstavlja naziv postavke koji će korisnik vidjeti. Trebao bi biti kratki naziv koji stane u jednu liniju ekrana.

c) Summary

Kratki je opis postavke. Iako je korištenje ovog atributa stvar izbora, preporuča se.

Preference Activity s jednostavnim UI koji ima jedan EditTextPreference u koji se unosi neka string vrijednost i jedan CheckBoxPreference koji označuje da je nešto true ili false:

<?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" > <EditTextPreference android:key="myStringPreference" android:title="@string/preference_myString" android:summary="@string/preference_summary_myString"/> <CheckBoxPreference android:key="myBooleanPreference" android:title="@string/preference_myBoolean" android:summary="@string/preference_summary_myBooelan" /> </PreferenceScreen>

Primjer 78.. XML layout za aktivnost korisničkih postavki


97

Zatim se kreira PrefActivity klasa koja nasljeđuje PreferenceActivity, a u onCreate() metodi se postavlja layout iz definiranog XML-a.package android.gauss.androidtutorial; import android.os.Bundle; import android.preference.PreferenceActivity; public class PrefsActivity extends PreferenceActivity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); addPreferencesFromResource(R.xml.prefs); } }

Primjer 79. Kreiranje PrefActivity klase

Ova se aktivnost pokreće kontrolom, tj. ubacuje se npr. button u glavnu aktivnost. Isto tako treba definirati PrefsActivity u manifestu. Isti je slučaj kao i kod definiranja obične Activity. Kada korisnik uđe u PrefsActivity, može postavljati te vrijednosti.

Slika 97 Preference Activity

Ove se vrijednosti automatski pamte u uređaju i ne moraju se ručno odrađivati. Vri-jednosti se pamte u tzv. shared preferences. To se može provjeriti postavljanjem but-tona u MainActivity koji će korisnika odvesti u PrefActivity aktivnost. U MainActivity postoje dva TextViewa koja predstavljaju vrijednosti koje je korisnik unio u preference. Te se vrijednosti dohvaćaju na nekoliko načina. Prvo se dohvati SharedPreference objekt pomoću PreferenceManager klase i njene metode getDefaultSharedPreferences(). Na taj se način dobije Shared Preference objekt koji sadrži sve vrijednosti koje je korisnik unio u preference. Svaku je preferencu sada moguće dohvatiti preko key atributa koji mu je dodijeljen u XML datoteci. Metoda kojom se dohvaća preferenca po key atributu sadrži još jedan element defValue koji je potreban ukoliko korisnik nije unio ništa u preferencu. Tada se koristi vrijednost definirana u deValue. U slučaju prvog TextViewa, ako korisnik nije unio ništa u preferencu, Moj String će koristiti defaultna vrijednost, a u TextViewu će pisati Korisnik nije unio. U preferencama su trenutno unesene vrijednosti:Moj String – android


98

Moj Boolean – checked (true)

Ako se pokrene MainActivity, te bi se vrijednosti trebale nalaziti tamo.

Slika 98. Dohvaćanje vrijednosti iz Shared Preferences

ZADATAK 20Kreiraj glavnu aktivnost koja ima dva gumba. Jedan gumb vodi u aktivnost korisničkih postavki u kojima korisnik odabire svoje postavke. Drugi gumb vodi u aktivnost u kojoj su ispisane sve korisničke postavke i njihove vrijednosti.

5.11. ListView i List Activity

U mobilnim se aplikacijama skup stavki često prikazuje u obliku liste koju korisnik može pomicati gore, dolje (eng. scroll), a klikom na jednu stavku najčešće se otvara detaljniji prikaz te stavke. Za tu svrhu postoji ListView klasa koja prikazuje liste stavki. Stavke mogu biti bilo kojeg tipa jer List-View klasa koristi adapter uzorak dizajna koji prilagođava tip podataka tipu ListViewa. Adapter definira izgled svake pojedine stavke koja će biti prikazana u ListViewu. Postoji nekoliko vrsta adaptera u Androidu i koriste se ovisno o potrebi. Npr. ArrayAdapter je podklasa BaseAdaptera i koristi se za prikaz podataka koji se temelje na poljima ili listi. ListView se definira u XML layout datoteci:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/mylist" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>

Primjer 80. XML layout aktivnosti koja sadrži ListVIew

Lista se u XML-u mora dohvatiti u kodu i adapter joj mora biti proslijeđen.


99

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ListView; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView listView = (ListView) findViewById(R.id.mylist); String[] myValues = new String[] {"Osijek", "Zagreb", "Varaždin", "Zadar", "Vukovar", "Dubrovnik", "Pula", "Split", "Virovitica", "Karlovac"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1 , myValues); listView.setAdapter(adapter); } }

Primjer 81. Kreiranje adaptera u aktivnosti i postavljanje u ListView

Kreirana je lista gradova koja se pošalje u konstruktor adaptera. U konstruktoru se može primi-jetiti resurs simple_list_item_1. Taj se resurs preuzima iz android.R.layout resursa. Ako se ko-riste resursi koji počinju s android, koriste se već gotovi resursi koji se nalaze u Android SDK. Da-kle, ovo je XML layout datoteka koja je došla zajedno sa SDK-om, tj. unaprijed je kreirana (slično kao kada programer sam kreira layout datoteku). Kao prvi se parametar šalje Context. Nakon što se kreirao, adapter se šalje u ListView. Pokretanjem aplikacije trebalo bi se dobiti sljedeće:

Slika 99. ListView sa stavkama gradova


100

Ukupno postoji deset stavki, ali se trenutno prikazuje samo osam. Pokretom prsta pre-ma gore korisnik može pomaknuti listu i prikazat će se preostale dvije stavke. Često se aplikacije kreiraju tako da se klikom na jednu stavku liste, otvori detaljan prikaz te stavke. Kako bi se to postiglo, mora se postaviti OnItemClickListener na ListView koji će slušati korisnikovu interakciju s ListViewom, tj. slušat će je li korisnik pritisnuo stavku i koja je to stavka.

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView listView = (ListView) findViewById(R.id.mylist); String[] myValues = new String[] {"Osijek", "Zagreb", "Varaždin", "Zadar", "Vukovar", "Dubrovnik", "Pula", "Split", "Virovitica", "Karlovac"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1 , myValues); listView.setAdapter(adapter); listView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(MainActivity.this, "Pritisnuta je stavka pod rednim brojem:" + position, Toast.LENGTH_LONG).show(); } }); } }

Primjer 82. Postavljanje OnItemClickListener na ListView

U OnItemClick() metodi rukuje se pritiskom na stavku u ListViewu. Position parametar govori koji je redni broj u listi pritisnut. Ako se pritisne lista koja je odozgora treća po redu, position parametar će vratiti broj 2 (indeksiranje stavki počinje od 0). Može se primijetiti i Toast klasa. Toast klasa je klasa koja prikazuje kratke poruke koje iskoče na ekranu. Toast poruka je vidljiva i u sljedećem primjeru:


101

Slika 100. ListView koji reagira na pritisak korisnika

U izradi aplikacije pritisak na ListItem stavku obrađuje se (engl. handle) tako da se poziva neka aktivnost koja će detaljno prikazati tu stavku. Dakle, instancira se Intent objekt, u njega se stav-ljaju svi potrebni podatci o stavci te se poziva nova aktivnosti koja dalje obrađuje i prikladno prikazuje te podatke. No najčešće programer mora kreirati vlastiti adapter koji ima jedinstveni prikaz podataka. Za to se nasljeđuje već gotova implementacija Adapter klase ili BaseAdapter klasa.

Veoma se često za prikaz stavki u ListViewu koriste objekti, a ne samo lista Stringova. Base-Adapter omogućava prikaz elemenata iz objekta, ali i definiranje prilagođenog izgleda svih stav-ki u ListViewu. Za primjer će se kreirati klasa hotel.

package android.gauss.androidtutorial; import java.io.Serializable; public class Hotel implements Serializable{ private String naziv; private String datum; private String opis; public String getNaziv() { return this.naziv; } public void setNaziv(String naziv) { this.naziv = naziv; } public String getDatum() { return this.datum; } public void setDatum(String datum) { this.datum = datum; } public String getOpis() { return this.opis; } public void setOpis(String opis) { this.opis = opis; } }

Primjer 83. Klasa Hotel


102

Ova klasa implementira sučelje Serializable. Kada klasa nasljeđuje neko sučelje, ujedno poprima i taj tip. Dakle, kada se instancira objekt hotel, bit će tipa Hotel, ali i tipa Serializable. Serijaliza-cija objekta je proces u kojemu se objekt reprezentira kao niz bajtova koji sadrže sve podatke o objektu. Serijalizacija je vrlo korisna ako se koriste različite platforme u kojoj je jedna pisana u Javi, a druga npr. u C++. Java i C++ ne mogu međusobno komunicirati ako si šalju objekte, a mogu ako si šalju niz bajtova jer bajtove mogu čitati sve platforme. Ako se u Javi neki objekt serijalizira i zapiše u neku datoteku, u C++ se može pročitati datoteka i deserijalizirati sadržaj u objekt. Taj objekt će biti isti objekt koji je poslan iz Java platforme.

Intent objekt može u sebi sadržavati Bundle objekt. Bundle objekt se može opisati kao objekt u koji se spremaju podatci različitog tipa: String, int, long i sl. Nezgodno bi rješenje bilo kada bi se atribut svakog objekta morao spremati posebno u Bundle objekt.

Hotel hotel = new Hotel(); hotel.setNaziv("Hotel Osijek"); hotel.setDatum("10.3.2009"); hotel.setOpis("Opis hotela Osijek"); Bundle bundle = new Bundle(); bundle.putString("naziv_hotela", hotel.getNaziv()); bundle.putString("datum_hotela", hotel.getDatum()); bundle.putString("opis_hotela", hotel.getOpis());

Primjer 84. Postavljanje vrijednosti u Bundle objekt

Ovakvo rješenje nije pogrješno, ali je nepraktično ako objekt ima puno atributa. Bundle objekt nudi rješenje, metodu putSerializable(). U ovu se metodu šalje objekt tipa Serializable, a budući da objekt Hotel implementira sučelje Serializable, znači da je tipa Serializable i da se može po-slati u ovu metodu.

Hotel hotel = new Hotel(); hotel.setNaziv("Hotel Osijek"); hotel.setDatum("10.3.2009"); hotel.setOpis("Opis hotela Osijek"); Bundle bundle = new Bundle(); bundle.putSerializable("hotel", hotel);

Primjer 85. Postavljanje serijaliziranog objekta u Bundle objekt

Sljedeći je korak instanciranje nekoliko objekata tipa Hotel i smještanje u listu. Ta se lista šalje u vlastiti adapter koji će se kasnije kreirati.


103

package android.gauss.androidtutorial; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Hotel hotel1 = new Hotel(); hotel1.setNaziv("Hotel Osijek"); hotel1.setDatum("10.3.2009"); hotel1.setOpis("Opis hotela Osijek"); Hotel hotel2 = new Hotel(); hotel2.setNaziv("Hotel Zagreb"); hotel2.setDatum("11.4.2009"); hotel2.setOpis("Opis hotela Zagreb"); Hotel hotel3 = new Hotel(); hotel3.setNaziv("Hotel Vukovar"); hotel3.setDatum("12.5.2010"); hotel3.setOpis("Opis hotela Vukovar"); Hotel hotel4 = new Hotel(); hotel4.setNaziv("Hotel Split"); hotel4.setDatum("15.08.2011"); hotel4.setOpis("Opis hotela Split"); Hotel hotel5 = new Hotel(); hotel5.setNaziv("Hotel Dubrovnik"); hotel5.setDatum("15.08.2011"); hotel5.setOpis("Opis hotela Dubrovnik"); List<Hotel> hoteli = new ArrayList<Hotel>(); hoteli.add(hotel1); hoteli.add(hotel2); hoteli.add(hotel3); hoteli.add(hotel4); hoteli.add(hotel5); HotelAdapter hotelAdapter = new HotelAdapter(this, hoteli); ListView listView = (ListView) findViewById(R.id.mylist); listView.setAdapter(hotelAdapter); } }

Primjer 86.. Popunjavanje liste, instanciranje adaptera i popunjavanje ListViewa


104

Zanimljivo je da adapter omogućava kreiranje izgleda svakog elementa u listi. To se, kao i sve ostalo, definira kroz XML. Npr. ako element u listi izgleda ovako:

Slika 101. Primjer izgleda stavke ListViewa

vrlo ga je lako definirati u XMLu. U res/layout/ direktoriju se kreira nova XML datoteka. Nazvat ćemo ju hotel_list_item.xml.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" > <TextView android:id="@+id/hotelName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"/> <TextView android:id="@+id/hotelDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"/> </RelativeLayout>

Primjer 87. Definiranje XML layouta za izgled stavke ListViewa

Kreira se HotelAdapter koji nasljeđuje BaseAdapter klasu.


105

package android.gauss.androidtutorial; import java.util.List; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; public class HotelAdapter extends BaseAdapter{ private List<Hotel> hoteli; private Context context; private LayoutInflater inflater; public HotelAdapter(Context context, List<Hotel> hoteli) { this.hoteli = hoteli; this.context = context; this.inflater = LayoutInflater.from(context); } @Override public int getCount() { return hoteli.size(); } @Override public Object getItem(int position) { return hoteli.get(position); } @Override public long getItemId(int position) { return hoteli.indexOf(hoteli.get(position)); } @Override public View getView(int position, View convertView, ViewGroup parent) { if(convertView == null){

convertView = inflater.inflate(R.layout.hotel_list_item, parent, false);

} TextView hotelName = (TextView)convertView.findViewById(R.id.hotelName); TextView hotelDate = (TextView)convertView.findViewById(R.id.hotelDate); hotelName.setText(hoteli.get(position).getNaziv()); hotelDate.setText(hoteli.get(position).getDatum()); return convertView; } }

Primjer 88. Kreiranje vlastitog adaptera

U ovom je primjeru kreiran konstruktor koji kao parametre prima Context i List<Hotel> listu. Pomoću Contexta dohvaća se objekt LayoutInflater koji služi za učitavanje XML layout datoteka.


106

List<Hotel> je lista hotela koja je instancirana u primjeru iznad. Kada se nasljeđuje BaseAdapter, implementiraju se 4 metode:

a) getCount()

b) getItem()

c) getItemId()

d) getView()

U getCount() metodi vraća se broj elemenata u listu kako bi ListView znao koliko stavki postoji. U getItem() metodi vraća se objekt iz liste po trenutnoj poziciji. Dakle, ako je na poziciji 1 hotel Ho-tel Zagreb, ovdje se vraća taj objekt. U getItemId() metodi vraća se indeks objekta u listi. Najvaž-nija je metoda u adapteru getView() metoda. Ova metoda prolazi kroz svaki element ListViewa i za svaki element učitava layout XML datoteku. U ovom slučaju učitava hotel_list_item.xml datoteku. ConvertView parametar je element iz ListViewa u koji se učitava XML layout. Ovdje se provjerava je li element jednak null vrijednosti. Ako je element različit od null, XML layout je već učitan i nema potrebe opet ga učitavati. Nakon toga se dohvaćaju elementi iz layout XML-a i popunjavaju se vrijednosti s atributima objekata koji se nalaze u List<Hotel> listi. Metoda vraća prilagođeni convertView objekt.

Slika 102. ListView s vlastitim adapterom

Sada se može kreirati onClickListener koji će slušati klik na stavku ListViewa. Kada se klikne stav-ka u ListViewu, dohvatit će se objekt koji se nalazi na tom mjestu, stavit će ga u Intent objekt i pokrenut će novu aktivnost koja će prikazati detaljan opis hotela.


107

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Hotel hotel1 = new Hotel(); hotel1.setNaziv("Hotel Osijek"); hotel1.setDatum("10.3.2009"); hotel1.setOpis("Opis hotela Osijek"); Hotel hotel2 = new Hotel(); hotel2.setNaziv("Hotel Zagreb"); hotel2.setDatum("11.4.2009"); hotel2.setOpis("Opis hotela Zagreb"); Hotel hotel3 = new Hotel(); hotel3.setNaziv("Hotel Vukovar"); hotel3.setDatum("12.5.2010"); hotel3.setOpis("Opis hotela Vukovar"); Hotel hotel4 = new Hotel(); hotel4.setNaziv("Hotel Split"); hotel4.setDatum("15.08.2011"); hotel4.setOpis("Opis hotela Split"); Hotel hotel5 = new Hotel(); hotel5.setNaziv("Hotel Dubrovnik"); hotel5.setDatum("15.08.2011"); hotel5.setOpis("Opis hotela Dubrovnik"); List<Hotel> hoteli = new ArrayList<Hotel>(); hoteli.add(hotel1); hoteli.add(hotel2); hoteli.add(hotel3); hoteli.add(hotel4); hoteli.add(hotel5); HotelAdapter hotelAdapter = new HotelAdapter(this, hoteli); ListView listView = (ListView) findViewById(R.id.mylist); listView.setAdapter(hotelAdapter); listView.setOnItemClickListener(new OnItemClickListener() { @Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Hotel hotel = (Hotel)parent.getItemAtPosition(position); Bundle bundle = new Bundle(); bundle.putSerializable("hotel", hotel);

Intent intent = new Intent(MainActivity.this, HotelDetailsActivity.class);

intent.putExtras(bundle); startActivity(intent); } }); } }

Primjer 89. Postavljanje OnItemClickListenera na ListView


108

Zapisuje se klasa HotelDetailsActivity koja nasljeđuje Activity klasu u manifest.

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class HotelDetailsActivity extends Activity{ private Hotel hotel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hotel_details); hotel = (Hotel)getIntent().getSerializableExtra("hotel"); TextView hotelName = (TextView) findViewById(R.id.hotelName); hotelName.setText(hotel.getNaziv()); TextView hotelDate = (TextView) findViewById(R.id.hotelDate); hotelDate.setText(hotel.getDatum());

TextView hotelDescription = (TextView) findViewById (R.id.hotelDescription);

hotelDescription.setText(hotel.getOpis()); } }

Primjer 90. Kreiranje HotelDetailsActivity klase

Dakle, kada se klikne na stavku u ListViewu, bira se objekt Hotel koji se zapakira u Bundle objekt, a Bundle objekt se postavlja u Intent objekt. Nova se aktivnost pokreće pomoću tog Intent objekta. Kada se aktivnost pokrene, Intent objekt se dohvaća u onCreate() metodi. U Intent objektu se traži objekt Hotel pomoću metode getSerializableExtra() i šalje mu se ID po kojem će tražiti taj objekt. Nakon toga se vrijednosti TextViewa, koje se nalaze u layoutu aktivnost, postavljaju na vrijednosti koje se dobiju iz atributa hotel objekta. Klikom na stavku u ListViewu, koja u sebi sadrži naziv Hotel Osijek i datum 10.3.2009., pokreće se aktivnost koja prikazuje detalje o hotelu kao na sljedećoj slici.

Slika 103. HotelDetalsActivity aktivnost

Android framework pruža mogućnost definiranja ListActivity aktivnosti. Korištenjem ove aktivnosti nije potrebno definirati XML layout datoteku. ListActivity u sebi već sadrži ListView s IDem android.R.id.list kojemu se može pristupati u samoj aktivnosti.


109

package android.gauss.androidtutorial; import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; public class MainActivity extends ListActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] myValues = new String[] {"Osijek", "Zagreb", "Varaždin", "Zadar", "Vukovar", "Dubrovnik", "Pula", "Split", "Virovitica", "Karlovac"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1 , myValues); setListAdapter(adapter); } }

Primjer 91. Kreiranje ListActivity aktivnosti

Slično kao i u primjeru iznad, definira se lista Stringova koja će se prikazivati u ListViewu. Nije potrebno dohvaćati ListView objekt jer ListActivity u sebi već sadrži ListView objekt pa se adapter može postaviti jednostavnim pozivanjem metode setListAdaper().

ZADATAK 21Kreiraj klasu Vijest koja sadrži atribute: Naslov, Datum i Opis. Zatim kreiraj ListActivity u kojem ćeš kreirati 6 različitih objekata Vijest i prikaži ih u listi. Kreiraj adapter koji nasljeđuje BaseAdapter i proizvoljan izgled XML layouta za stavke unutar liste. Pritisak na stavku unutar liste pokreće novu aktivnost koja prikazuje detaljan prikaz vijesti s naslovom, datumom i opisom.

5.12. Action Bar

Android je od Android OS3.0 (API 11) preuzeo Action Bar. Action Bar je zamijenio standardni TitleBar i od tada je postao vrlo važna komponenta svake aplikacije. Action Bar služi za prikaz Home ikone (nešto slično kao Home kod internetskih stranica), za prikazivanje menija i navigaci-je. Standardni Options meni izbačen je i umjesto njega se koristi meni Action Bara.

Slika 104. Action Bar

Na slici 104. crveno označeni dio predstavlja Action Bar. Action Bar pokupi Launcher ikonu i koristi ju kao svoju Home sliku. Home ikoni i menu ikoni se pristupa pomoću onOptionsItemSe-lected() metode. Najčešće se u toj metodi radi switch naredba koja provjerava id element koji je


110

pritisnut, a nakon toga izvršava neku naredbu. Kako bi se kreirao menu u Action Baru, kreira se menu layout datoteka. Ako ne postoji, u projektu se kreira menu direktorij, a u direktoriju npr. main.xml datoteka. Menu će za početak imati jedan gumb koji se naziva Settings.

<menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:showAsAction="ifRoom" android:title="@string/action_settings"/> </menu>

Primjer 92. Menu s jednim gumbom

Menu ima jedan gumb, a u layout datoteci se označava elementom <item>. Dodaje mu se id kako bi se mogao identificirati pritisak na njega i String vrijednost koja je vidljiva korisniku. Atribut showAsAction i njegova vrijednost ifRoom ukazuju da će Android prikazati ovaj gumb u Action Baru ako ima mjesta, a ako mjesta nema, prikazat će ga u klasičnom Options meniju. Postoji nekoliko vrijednosti ovog atributa koje se mogu postaviti kao što su never, a znači da se gumb neće nikada prikazati u Action Baru i uvijek će biti u klasičnom meniju, ili always, a označava da se gumb uvijek prikazuje u Action Baru. Always nije preporučljiv jer ponekad ne mogu stati svi elementi zbog različitih veličina uređaja pa može doći do neželjenog ponašanja aplikacije. Postoji još nekoliko vrijednosti koje za sada nećemo spominjati.

Slika 105. Prikaz menija s atributom ifRoom

Slika 106. Prikaz menija s atributom never

Sada se u aktivnosti učitava meni. Kada se meni prikazuje, aktivnost poziva onCreate-OptionsMenu() metodu i ukazuje na layout datoteku koju treba prikazati. To se postiže tako da se u metodi dohvati MenuINflater objekt i pomoću njegove se metode inflater ukaže na layout datoteku menija.


111

@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); }

Primjer 93. Učitavanje menija

Ako se projekt pokrene, trebala bi se prikazati aktivnost kao na slici 107. Klik na ovaj gumb može se definirati na sljedeći način: aktivnost sadrži metodu onOptionsItemSelected() koja otkriva koji se gumb pritisnuo, a nakon toga se može pokrenuti neka određena metoda ili pokrenuti nova aktivnost i sl.

@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: //Pokretanje nove aktivnosti break; default: break; } return super.onOptionsItemSelected(item); }

Primjer 94. Rukovanje odabira elemenata u meniju

Dakle, metoda u parametrima šalje element menija koji se pritisnuo i u metodi se provjerava id tog elementa. Ako je id action_settings, korisnik je pritisnuo tipku Settings i može se pokrenuti određena akcija kao npr. otvaranje Settings aktivnosti. Dakle, za elemente menija programer sam definira id-eve. Za Home element Action Bara id je uvijek isti i tom se elementu pristupa preko id-a android.R.id.home. U istoj se switch naredbi u jedan slučaj može staviti android.R.id.home vrijednost i tada se pokreće određena akcija. Home element Action Bara koristi se za navigaciju unazad. To se može npr. napraviti u SettingsActivity aktivnosti koja će se pokrenuti preko menija Settings. Kada se pritisne na meni element Settings, pokrenut će se nova aktivnost SettingsActivity koja u svojoj onCreate() metodi postavlja prikaz Home elementa kao navigaciju unazad. To se postiže tako da se dohvati ActionBar i pozove metoda setDisplayHomeAsUpEn-abled().


112

package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; import android.view.MenuItem; public class SettingsActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getActionBar().setDisplayHomeAsUpEnabled(true); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: onBackPressed(); break; } return super.onOptionsItemSelected(item); } }

Primjer 95. Postavljanje Home elementa kao navigaciju unazad

Nakon što se izgled Home elementa postavio kao navigacija unazad, definira se što će raditi pritisak na Home element Action Bara. Kao i u prošloj aktivnosti, u metodi se onOptionsItem-Selected() preko switch naredbe otkriva id pritisnutog elementa. Ako je id jednak id-u Home elementa, poziva se metoda koja će se vratiti u prošlu aktivnost onBackPressed(). Action Bar služi i za navigaciju kroz aplikaciju. Postoji nekoliko načina navigacije pomoću Action Bara, a najčešći je navigacija kroz tabove. Da bi se ostvarila takva navigacija, dohvaća se Action Bar objekt i postavlja mu tip navigacije NAVIGATION_MODE_TABS. Zatim se kreiraju tabovi kojima se prosljeđuje listener koji će slušati pritisak na tabove. Listener se najčešće implementira na aktivnost. Zatim se tabovi dodaju u ActionBar. Tako je npr. u prvoj aktivnosti moguće kreirati tabove u onCreate() metodi.


113

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); Tab tab1 = actionBar.newTab(); tab1.setText("Tab 1"); tab1.setTabListener(this); Tab tab2= actionBar.newTab(); tab2.setText("Tab 2"); tab2.setTabListener(this); getActionBar().addTab(tab1); getActionBar().addTab(tab2); }

Primjer 96. Kreiranje tabova kao tipove navigacije

Aktivnost treba implementirati TabListener sučelje. Implementiraju se tri metode: onTa-bReselected(), onTabSelected(), onTabUnselected().


114

package android.gauss.androidtutorial; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.ActionBar.TabListener; import android.app.Activity; import android.app.FragmentTransaction; import android.content.Intent; import android.hardware.Camera; import android.os.Bundle; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; public class MainActivity extends Activity implements TabListener{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); Tab tab1 = actionBar.newTab(); tab1.setText("Tab 1"); tab1.setTabListener(this); Tab tab2= actionBar.newTab(); tab2.setText("Tab 2"); tab2.setTabListener(this); getActionBar().addTab(tab1); getActionBar().addTab(tab2); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: Intent intent = new Intent(this, SettingsActivity.class); startActivity(intent); break; default: break; } return super.onOptionsItemSelected(item); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // implementacija koda kada se pritisne tab } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { } }

Primjer 97. Klasa s Tab navigacijom


115

Najčešće se tab navigacija kombinira s fragmentima tako da se kreira poseban fragment za svaki tab i ovisno o tome koji je tab pritisnut, učitava se njegov fragment.

Slika 107. Action Bar s tab navigacijom

Sadržaj se svakog taba najčešće sastoji od jednog fragmenta. Na onTabSelected() me-todi učitava se određeni fragment u prazan prostor aktivnosti. Za svaki se tab kreira po jedan fragment sa svojom layout datotekom. U onTabSelected() metodi se pomoću Fra-gmentTransaction objekta izmjenjuju fragmenti na tom praznom prostoru. Fragmenti zahtijevaju da im se preko id-a pokaže gdje se moraju pojaviti. U ovom se slučaju trebaju pojaviti u praznom prostoru ispod tabova čiji je id:android.R.id.content

FragmentTransaction objekt poziva metodu koja će maknuti jedan fragment remove(), a zatim dodati i drugi fragment metodom add(). Može pozvati metodu replace() koja obavlja oboje istovremeno.


116

public class MainActivity extends Activity implements TabListener{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); Tab tab1 = actionBar.newTab(); tab1.setText("Tab 1"); tab1.setTabListener(this); Tab tab2= actionBar.newTab(); tab2.setText("Tab 2"); tab2.setTabListener(this); getActionBar().addTab(tab1); getActionBar().addTab(tab2); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: Intent intent = new Intent(this, SettingsActivity.class); startActivity(intent); break; default: break; } return super.onOptionsItemSelected(item); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub. } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { if(tab.getText().equals("Tab 1")){ Tab1Fragment fragment1 = new Tab1Fragment(); ft.replace(android.R.id.content, fragment1); } else if(tab.getText().equals("Tab 2")){ Tab2Fragment fragment2 = new Tab2Fragment(); ft.replace(android.R.id.content, fragment2); } } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub. } }

Primjer 98. Main Activity s izmjenom fragmenata u tabovima


117

Pritiskom na tab dohvati se text taba i ako je text jednak prvom tabu, instancira se novi Tab1Fra-gment. FragmentTransaction objekt poziva metodu replace() kojoj se naređuje da na mjesto android.R.id.contet stavi fragment1. Isto vrijedi i za drugi tab.

Slika 108. Odabrani Tab1

Slika 109. Odabrani Tab2

5.13. Android SQLite baza podataka

U izradi je složenijih sustava ili aplikacija nužno imati bazu podataka koja se nalazi na samom uređaju. Android pruža nekoliko načina spremanja korisničkih i aplikacijskih podataka, a jedan od njih je i SQLite. SQLite je osnovna baza podataka s minimalnim funkcionalnostima i jedna je od najčešće korištenih baza podataka na mobilnim uređajima. Podržava značajke standardnih relacijskih baza kao što su SQL sintaksa, transakcije i pripremljeni iskazi, a zahtjeva vrlo malo memorije prilikom izvođenja. Podržava TEXT (String), INTEGER (int) i REAL (double) tipove poda-taka. Ova se baza podataka sprema kao jedna datoteka u Android uređaj. Poznavatelj SQL baze podataka i sintakse može s lakoćom savladati SQLite sintaksu.

Slijedi kratak osvrt na relacijske baze podataka. Baza podataka je strukturni način spremanja po-dataka u tablice. Tablica sadrži stupce za različite tipove podataka i retke za cjelokupni podatak. U smislu OOP, redak u tablici predstavlja objekt, a svaki stupac atribut objekta. Npr. ako postoji objekt Osoba s atributima ime(String), prezime(String) i dob(int), može se kreirati tablica Osoba sa stupcima ime(TEXT), prezime (TEXT) i dob(INTEGER).


118

Slika 110. Odnos atributa objekta i stupaca u tablici

SQLite baza podataka se sastoji od više tablica. U ovom je slučaju tablica Osoba samo jedna tablica u bazi podataka pod nazivom „Osoba“. Za rad s Android bazom podataka kreira se klasa koja će naslijediti SQLiteOpenHelper klasu. U ovom je slučaju to Android-SQLiteOpenHelper klasa koja će brinuti o kreiranju baze podataka. Kada se instancira objekt iz te klase, automatski se kreira baza podataka pod definiranim imenom (ako baza već ne postoji). Ako baza već postoji, baza se neće kreirati. Ova će klasa vraćati referencu na tu bazu podataka, pobrinut će se da se kreira baza podataka (ako baza već ne postoji) i da se zatvara i otvara konekcija na tu bazu podataka.


119

package android.gauss.androidtutorial; import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.database.sqlite.SQLiteOpenHelper; import android.util.Log; public class AndroidSQLOpenHelper extends SQLiteOpenHelper{ public static final String TABLE_PERSON = "person"; public static final String COLUMN_ID = "id"; public static final String COLUMN_FIRST_NAME = "first_name"; public static final String COLUMN_LAST_NAME = "last_name"; public static final String COLUMN_AGE = "age"; private static final String DATABASE_NAME = "TutorialDatabase"; private static final int DATABASE_VERSION = 1; private static final String TABLES_CREATE = "create table " + TABLE_PERSON + " (" + COLUMN_ID + " integer primary key autoincrement, " + COLUMN_FIRST_NAME + " text not null, " + COLUMN_LAST_NAME + " text not null, " + COLUMN_AGE + " integer not null);"; public AndroidSQLOpenHelper(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase db) { db.execSQL(TABLES_CREATE); } @Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { Log.w("DATABASE", "Upgrading database from version " + oldVersion + " to " + newVersion + "which will destroy all data"); db.execSQL("DROP TABLE IF EXISTS " + TABLE_PERSON); onCreate(db); } }

Primjer 99. Android SQLiteOpenHelper klasa

Sljedeći je korak kreiranje klase koja će brinuti o unosu, čitanju i ažuriranju podataka u bazi. Ta će se klasa zvati PersonDataSource. U konstruktoru se te klase kreira objekt iz Android-SQLiteOpenHelpera koji odmah provjerava je li baza kreirana i ako nije, kreira ju. Postoje i druge metode, tj. metode open() i close() koje od AndroidSQLiteOpenHelper objekta traže konekciju na bazu, tj. spajanje na bazu i odspajanje s baze. Ova je klasa također zadužena za rukovanje s unosom, čitanje i ažuriranje podataka u tablice. Strukture su ovih dviju klasa takve da kada se provode izmjene na tablicama, nije potrebno provjeravati dohvaćanje konekcije na bazu, postojanje baza podataka, prekidanje konekcije s bazom, i sl. jer je sve odrađeno pozadinski u AndroidSQLiteOpenHelper klasi. Na taj su način postavljeni temelji za rad s bazama podata-ka. U PersonDataSource se kreiraju metode koje će, ovisno o potrebama aplikacije, provoditi određene manipulacije na tablicama: upisivanje u bazu, čitanje iz baze, pretraživanje osobe po nazivu itd. Baza se kreira u konstruktoru klase, a cijelu zadaću kreiranja baze preuzima nadklasa.


120

Pozivanjem njenog konstruktora pomoću super.onCreate() metode vraća se kreirana baza po-dataka u koju se kreiraju potrebne tablice. Na bazi se zatim mogu pokretati određene nared-be, a u ovom se slučaju pokreće naredba za kreiranje Person tablice. Može se implementirati i onUpgrade() metoda za ažuriranje baze u kojoj se stara baza briše i kreira nova baza.

public class PersonDataSource { private SQLiteDatabase database; private AndroidSQLOpenHelper dbHelper; private String[] allColumns = {AndroidSQLOpenHelper.COLUMN_ID, AndroidSQLOpenHelper.COLUMN_FIRST_NAME, AndroidSQLOpenHelper.COLUMN_LAST_NAME, AndroidSQLOpenHelper.COLUMN_AGE}; public PersonDataSource(Context context) { dbHelper = new AndroidSQLOpenHelper(context); } public void open(){ database = dbHelper.getWritableDatabase(); } public void close(){ dbHelper.close(); } public Person insertPerson(Person person){ ContentValues values = new ContentValues(); values.put(AndroidSQLOpenHelper.COLUMN_FIRST_NAME, person.getFirstName()); values.put(AndroidSQLOpenHelper.COLUMN_LAST_NAME, person.getLastName()); values.put(AndroidSQLOpenHelper.COLUMN_AGE, person.getAge()); database.insert(AndroidSQLOpenHelper.TABLE_PERSON, null, values); return person; } public List<Person> readPersons(){ List<Person> persons = new ArrayList<Person>(); Cursor cursor = database.query(AndroidSQLOpenHelper.TABLE_PERSON, allColumns, null, null, null, null, null); cursor.moveToFirst(); while(!cursor.isAfterLast()){ Person person = new Person(); person.setFirstName(cursor.getString(1)); person.setLastName(cursor.getString(2)); person.setAge(cursor.getInt(3)); persons.add(person); } return persons; } } Person person = new Person(); person.setFirstName(cursor.getString(1)); person.setLastName(cursor.getString(2)); person.setAge(cursor.getInt(3)); persons.add(person); cursor.moveToNext(); } cursor.close(); return persons; } }

Primjer 100. PersonDataSource klasa


121

Unos podataka o objektu tipa Person unosi se tako da se pošalje objekt tipa Person u tu metodu i zatim se svi atributi objekta Person upisuju u tablicu Person. Dakle, atribut firstName(String) upisuje se u stupac firstName(TEXT), atribut lastName(String) u stupac lastName(TEXT) i atribut age(String) u stupac age(TEXT). Može se primijetiti da se prilikom kreiranja tablice stvorio još je-dan stupac naziva id (int primary key autoincrement). Svaki bi redak u tablici trebao imati iden-tifikator, tj. jedinstveni broj koji je različit za svaki redak. Identifikatorom se može jedinstveno raspoznati svaki redak u tablici. Primary key podrazumijeva da će stupac predstavljati jedinst-vene identifikator, a autoincrement da će se svakim unosom u tablicu, u stupcu automatski ge-nerirati broj, tj. prilikom zapisa će inkementirati zadnji broj za 1 i zapisati ga u bazu u tom retku. Postavlja se pitanje zašto bi se id uopće koristio? Zamislite da postoje dvije osobe koje imaju isto ime i 25 godina (Marko Markic, 25 godina). Bez jedinstvenog se identifikatora ne mogu nikako raspoznati. Npr. ako se Marku Markicu, koji je prvi unesen, žele promijeniti godine, bez jedinst-venog se identifikatora ne može odrediti na kojem se Marku Markicu želi izvršiti izmjena. Tada se izmjena radi po id-u. Dakle, provodi se izmjena na unosu koji ima id npr. 4 i tom se unosu želi promijeniti stupac age.

U konstruktoru klase kreira se i AndroidSQLOpenHelper objekt koji je zadužen kreirati bazu ako nije kreirana. S open() i close() se otvara i zatvara konekcija na bazu podataka. Ako se želi uni-jeti podatak u tablicu, podatci se stavljaju u ContentValues objekt u koji se ubacuju vrijednosti pomoću metode put(). Metoda put u prvi parametar prima naziv stupca, a u drugi vrijednosti kako bi baza podataka znala u koji stupac treba upisati koju vrijednost. Tada se pomoću SQLite-Database objekta i metode insert() ubacuju vrijednosti u definiranu tablicu.

Kada se vrijednosti iz tablice čitaju, upit vraća Cursor objekt. Query() metoda definira tablicu koja se želi čitati i polje stupaca koji su definirani u varijabli allColumns. Cursor objekt se može shvatiti kao pokazivač retka u tablici. Kada baza podataka vrati Cursor objekt, objekt je prvo na mjestu iznad prvog unosa i treba ga pomaknuti na prvi unos pomoću metode moveToFirst(). Na slici 3.12.2. prvi redak sadrži nazive stupaca koji se ne čitaju kao podatak. Nazivi stupaca su ovdje samo radi primjera. Dakle, Cursor pokazuje na redak iznad prvog retka, pokazuje negdje iznad retka „Pero Perić 23“.

Slika 111. Prvotna pozicija Cursor objekta

Nakon toga se ulazi u while petlju koja provjera je li trenutni unos zadnji unos u tablici. U tijelu se while petlje, nakon pročitane tablice i kreiranog objekta Person, ubacuje objekt u listu objekata te se Cursor objekt pomiče za jedan unos prema dolje. Person objekt je jednostavan objekt koji sadrži podatke o nekoj osobi.


122

package android.gauss.androidtutorial; public class Person { private String firstName; private String lastName; private int age; public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } }

Primjer 101. Person klasa

Za potrebe testiranja kreirana je aktivnost koja ima 3 EditText viewa u koja se unosi ime, prezime i dob osobe. Klikom na gumb „Unesi osobu“ upisuju se podatci u bazu, a klikom na gumb „Pregled osoba“ čitaju se sve osobe iz baze i učitavaju se u listu pomoću vlastitog adaptera.

Slika 112. Aktivnost unosa podataka o osobi

Prvo se izrađuje par unosa da bi se nešto upisalo u bazu. Upisani se unosi mogu vidjeti u sljedećoj aktivnosti. Nakon što se unijelo par osoba, pritišće se na gumb „Pregled


123

osoba“ što pokreće novu aktivnost koja čita sve podatke iz baze i prikazuje ih u listi.package android.gauss.androidtutorial; import android.app.Activity; import android.content.Intent; import android.gauss.androidtuorial.R; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; public class MainActivity extends Activity { private PersonDataSource dataSource; private EditText firstName; private EditText lastName; private EditText age; private Button insertPerson; private Button personOverview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

dataSource = new PersonDataSource(MainActivity.this); firstName = (EditText) findViewById(R.id.firstName); lastName = (EditText) findViewById(R.id.lastName); age = (EditText) findViewById(R.id.age); insertPerson = (Button)findViewById(R.id.insertPerson); insertPerson.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Person person = new Person(); person.setFirstName(firstName.getText().toString()); person.setLastName(lastName.getText().toString()); person.setAge(Integer.parseInt(age.getText().toString())); dataSource.open(); dataSource.insertPerson(person); dataSource.close(); } }); personOverview = (Button) findViewById(R.id.readPersons); personOverview.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {

Intent intent = new Intent(MainActivity.this, ActivityPersonList.class);

startActivity(intent); } }); }}

Primjer 102. Aktivnost za unos podataka u bazu


124

U onCreate() metodi kreira se novi objekt PersonDataSource kako bi baza uvijek bila spremna na upise. Pritiskom gumba insertPerson otvara se konekcija na bazu, unosi se objekt Person i zatvara se konekcija na bazu. Postoji i gumb personOverview koji vodi na ListActivity koja čita sve osobe iz baze, stavlja ih u adapter i prikazuje ih u listi.

package android.gauss.androidtutorial; import java.util.List; import android.app.ListActivity; import android.os.Bundle; import android.util.Log; public class ActivityPersonList extends ListActivity{ private PersonDataSource datasource; private List<Person> persons; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override protected void onResume() { super.onResume(); datasource = new PersonDataSource(this); datasource.open(); persons = datasource.readPersons(); datasource.close(); PersonsAdapter adapter = new PersonsAdapter(this, persons); setListAdapter(adapter); } }

Primjer 103. Čitanje podataka iz baze i učitavanje u listu

Slika 113. Popis svih osoba iz baze


125

ZADATAK 22Napravi klasu Vijest koja ima atribute naslov, opis i datum. Napravi aktivnost za unos vijesti u bazu i aktivnost koja u listi ispisuje sve vijesti.

5.14. Korištenje senzora

Android Framework omogućava korištenje velikog broja senzora koje uređaji imaju. Neki sen-zori su hardverski, a neki softverski. Hardverski su senzori fizičke komponente koje su ugrađene u uređaj i mjere određeno stanje u okolini kao što su: akceleracija, magnetsko polje, kut pod kojim je uređaj okrenut i sl. Softverski senzori nisu fizičke komponente uređaja, a svoje podatke mjere pomoću jednog ili više hardverskih senzora. To može biti linearna akceleracija, gravitacija itd. Nemaju svi uređaji sve senzore tako da je korištenje senzora različito od uređaja do uređaja. Kada se radi sa senzorima, od OS-a se traži SensorManager. SensorManager je objekt koji zna sve senzore kojima uređaj raspolaže. Od SensorManager objekta se traži senzor koji se želi koris-titi (akceleormetar, žiroskop, magnet, tlakomjer itd.). Nakon toga se poručuje SensorManageru da se žele pratiti promjene na odabranom senzoru, a postiže se metodom registerListener(). Metoda kao prvi parametar prima SensorEventListener klasu. Budući da će SensorEvenetLis-tener klasa biti trenutna aktivnost, implementira će se SensorEventListener i potrebne metode.


126

public class MainActivity extends Activity implements SensorEventListener{ private SensorManager sManager; private Sensor accelerometer; private TextView xAxis; private TextView yAxis; private TextView zAxis; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); sManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE); accelerometer = sManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); xAxis = (TextView) findViewById(R.id.xAxis); yAxis = (TextView) findViewById(R.id.yAxis); zAxis = (TextView) findViewById(R.id.zAxis); } @Override protected void onResume() { super.onResume(); sManager.registerListener(this, accelerometer, SensorManager.SENSOR_DELAY_NORMAL); } @Override protected void onPause() { super.onPause(); sManager.unregisterListener(this); } @Override public void onAccuracyChanged(Sensor sensor, int accuracy) { // TODO Auto-generated method stub. } @Override public void onSensorChanged(SensorEvent event) { if(event.sensor.getType() == Sensor.TYPE_ACCELEROMETER){ xAxis.setText("Acelerometar X: " + event.values[0]); yAxis.setText("Acelerometar Y: " + event.values[1]); zAxis.setText("Acelerometar Z: " + event.values[2]); } } }

Primjer 104. Korištenje senzora


127

Kada klasa implementira neki listener, u ovom slučaju SenzorEventListener, implementiraju se i određene metode. SenzorEventListener zahtjeva implementaciju onAccuracyChanged() i on-SensorChanged(). Svaka obrada senzora traje neki određeni vremenski interval. Tako je npr. akcelerometru nužno izračunati x, y i z os, lokacijskom se senzoru trebaju dohvatiti lokacijski podatci pomoću GPS-a i sl. Kada akcelerometar dohvati podatke za akceleraciju, aktivira meto-du onSensorChanged() u koju pošalje podatke koji se nalaze u objektu SensorEvent. U primjeru 3.13.1. napisana je implementacija onSensorChanged() metode: dohvaćaju se podatci koje je poslao akcelerometar i ispisuju se u TextViewu za svaku os posebno. Većina senzora vraća po tri vrijednosti, svaku za x, y i z os, a neki senzori samo jednu vrijednost kao npr. senzor svijetla (upaljeno ili ugašeno). Senzor slušanja se zaustavlja kada aktivnost odlazi u onPause() ili on-Stop() stanje metodom unregisterListener(). U metodu se pošalje objekt koji sluša senzor, u ovom slučaju aktivnost. Treba uzeti u obzir da će se metoda onSensorChanged() pokretati svaki put kada akcelerometar dohvati potrebne vrijednost. Taj će se ciklus ponavljati sve dok se ne zaustavi slušanje akcelerometra.

Slika 114. Prikaz vrijednosti akcelerometra

ZADATAK 23Napravi aktivnost u kojoj se unosi latitude i longitude vrijednosti i pomoću lokacijskog senzora ispiši udaljenost od trenutne lokacije do lokacije unesene pomoću latitude i longitude vrijednosti.

5.15. Google mape

Da bi se Google mape mogle koristiti, u emulator treba postaviti podržavanje prikaza Google mapa. Svaka verzija OS-a ima osnovnu verziju i verziju s Google mapama. Te su dvije verzije izdvojene kako bi se olakšala aplikacija o nepotrebnim datotekama.


128

Slika 115. Postavljanje Google Maps API-a

Trenutna je verzija Google mapa za Android „Google Maps Android API v2“. Da bi se mogao koristiti, skida se biblioteka Google Play Services koja je dostupna u Android SDK Manageru.

Slika 116. Google Play Services biblioteka u SDK Manageru


129

Biblioteka se zatim uključuje u projekt desnim klikom na projekt -> Build Path -> Add External Archives.

Slika 117. Dodavanje biblioteke u aplikaciju

Google Play Services se može naći na sljedećoj putanji:<android-sdk-folder>/extras/google/google_play_services/libproject/go-ogle-play-services_lib/libs/

Na putanji se označi google-play-services.jar datoteka i doda se u projekt. Google mape koriste ključ koji je potreban za prikaz mapa na uređaju. Da bi se ključ kreirao, pravi se račun na Google API konzoli:https://code.google.com/apis/console/

U Google API konzoli kreira se novi projekt.

Slika 118. Kreiranje projekta na Google konzoli

Nakon što je projekt gotov, u izborniku se odabire Services i označi se Google Map API v2.


130

Slika 119. Postavljanje korištenja Google Maps Android API v2 u Google konzoli

U izborniku se zatim ide na API Access i odabire se Create new Android key.

Slika 120. Dijalog za upisivanje SHA1 ključa + package

Potrebno je unijeti i SHA1 certificate fingerprint aplikacije. Fingerprint je jedinstveni kod aplikacije kojim se može jednoznačno identificirati aplikacija, a kreira se pomoću MD5 ili SHA1 algoritma. U ovom se slučaju traži SHA1 algoritam. Taj se Fingerprint kreira pomoću Java keytoola koji se nalazi u Java direktoriju. JDK verzija 7 keytool kreira SHA1 key, a JDK verzija 6 MD5 key. Dakle, mora se instalirati JDK 7 kako bi se dobio SHA1 key. Keytool alat, kojim će se dobiti SH1 otisak, nalazi se u direktoriju:C:\Program Files\Java\jdk1.7.0_17\bin


131

SHA1 otisak mora kreirati keystore aplikacija. Budući da je riječ o testnom okruženju, svaki put kada se builda projekt u Eclipse alatu, kreira se i debug.keystore u direktoriju:C:\Users\<korisničko_ime>\.android

Iz tog se keystora mora dobiti SHA1 otisak. Sljedeći je korak pokretanje procesa preko CMD-a (command prompt).

Slika 121. Generiranje SHA1 ključa preko CMD

Dobiveni SHA1 ključ je: 13:C4:0B:ED:83:4F:24:BA:24:6E:9E:28:75:93:53:C0:33:3B:01:54

Uz ključ se na kraju dodaje i osnovni paket (engl. package) aplikacije. Osnovni se paket može naći u manifestu

Slika 122. Package koji se treba upisati zajedno sa SHA1 ključem


132

Pakovanje se dodaje na kraj SHA1 ključa, a između mora biti ;. Kod koji se upisuje u Google konzolu je:

13:C4:0B:ED:83:4F:24:BA:24:6E:9E:28:75:93:53:C0:33:3B:01:54;android.gauss.androidtutorial

Slika 123 Unos SHA1 ključa + package u Google konzolu

Kada se klikne Create, konzola generira API key koji se kopira i upisuje u manifest u meta ele-ment između application elementa.

Slika 124. Generirani API key u Google konzoli

<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyC7-hw_UKKRh5VkUJ420JbtFwhnVtGOQ2c"/>

Primjer 105. Meta data element za manifest


133

Nužno je definirati i dozvolu (eng. permission) za korištenje mapa i narediti aplikaciji da ju koristi.<permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE" android:protectionLevel="signature"/> <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE"/>

Primjer 106. Permission element za manifest

Ovu verziju Google Maps API-a mogu koristiti samo uređaji koji imaju podršku za OpenGL ES 2.0. i to se također definira u manifestu:<uses-feature android:glEsVersion="0x00020000" android:required="true"/>

Primjer 107. Uses feature element za OpenGL ES 2

Trebaju se prihvatiti još neke dozvole kao npr. pristup Internetu, dohvaćanje lokacije korisnika i sl. Slijedi primjer manifesta.


134

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="android.gauss.androidtutorial" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> <permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE" android:protectionLevel="signature" /> <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyC7-hw_UKKRh5VkUJ420JbtFwhnVtGOQ2c"/> <activity android:name="android.gauss.androidtutorial.MainActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>

Primjer 108. Manifest sa svim potrebnim elementima za korištenje Android Google Maps API v2

U layoutu aktivnosti definira se da će se koristiti MapFragment. Fragment se može ref-erencirati direktno u layoutu.


135

<?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/map" android:name="com.google.android.gms.maps.MapFragment" android:layout_width="match_parent" android:layout_height="match_parent" />

Primjer 109.Referenciranje Map fragmenta u layoutu aktivnosti

Još je preostalo postaviti layout u aktivnosti.package android.gauss.androidtutorial; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

Primjer 110. Aktivnost koja sadrži Google mape

Slika 125. Prikaz Android Google Maps API v2

ZADATAK 24Napravi prikaz mape pomoću Google Maps API-a i na mjestu gdje korisnik klikne, postaviti marker. Po mogućnosti koristi vlastitu ikonu.


136

5.16. Multitasking

Mobilni uređaji često imaju problema s multitaskingom jer priroda mobilnih uređaja jednostav-no onemogućava pravi multitasking. Pravi multitasking podrazumijeva istodobno pokretanje više aplikacija na uređaju kao što je npr. otvaranje i korištenje više programa u Windowsima istovremeno. Dakle, na ekranu je moguće vidjeti više aplikacija. Kod Androida takav multita-sking ne postoji, ali postoji nešto slično. Android OS u memoriji pamti nedavno otvorene aplika-cije i drži ih u stogu. Svaki put kada korisnik otvori aplikaciju i izađe iz nje, Android OS ju ubacuje u svoj stog otvorenih aplikacija. Taj se postupak provodi jer se smatra da će korisnik zasigurno opet otvoriti istu aplikaciju. OS ne mora ponovno otvarati aplikaciju i učitavati sve potrebne datoteke, već iz stoga uzima spremljenu aplikaciju i prikazuje ju korisniku. Takvo je rješenje oda-brano kako bi se smanjilo vrijeme učitavanja i procesiranja aplikacija. Memorija je stoga u koju OS sprema otvorene aplikacije ograničena i najčešće može pamtiti do šest aplikacija u memoriji. Aplikacije koje se nalaze u memoriji mogu se vidjeti dugim pritiskom tipke „Home“ na uređaju.

Slika 126. Pokrenute aplikacije na uređaju

Često Android OS oslobađa dio memorije kako bi spremio neku drugu aplikaciju u stog ili kada neke stvari zahtijevaju više memorije. OS iz stoga izbacuje aplikaciju koja najduže nije bila korištena.


137

Slika 127. Ponašanje Android stoga

Kada OS izbacuje aplikaciju iz stoga, na svim se aktivnostima, koje su bile otvorene za vrijeme korištenja aplikacije, poziva metoda onDestroy(). Stog omogućava da se korisnik prebacuje iz jedne aplikacije u drugu. Upravo je ovdje razlika između pravog multitaskinga i multitaskinga koji postoji u Androidu. U Androidu se ne mogu otvoriti i koristiti istovremeno dvije aplikacije na ekranu, već se korisnik mora prebacivati iz jedne aplikacije u drugu. Nedostatak je multita-skinga u Androidu i taj što aplikacije koje su u stogu i čekaju na izvođenje nisu u aktivnom stanju. Prema životnom ciklusu aktivnosti svaka aktivnost koja nije na ekranu, odlazi u onStop() stanje i aplikacija ne može u pozadini izvoditi svoj posao. Zbog toga se ni ovakav slučaj ne smatra multi-taskingom. Može se reći da se u ovom slučaju multitasking samo simulira i korisnik ima osjećaj da se odvija pravi multitasking. Pravi multitasking omogućava rad svim otvorenim aplikacijama i onda kada nisu fokusirane na ekranu (isto kao npr. u Windows operacijskom sustavu).


138

6. IZRADA ANDROID APLIKACIJE

U ovom će poglavlju biti opisan tijek izrade jednostavne aplikacije za Android. U po-slovnom objektu najčešće surađuju programer i dizajner. Dizajner dizajnira aplikaciju, izgled aktivnosti, izgled izbornika, boje, po potrebi dodaje slike i sl., tj. određuje kako će aplikacija izgledati. Kada dizajner odredi izgled aplikacije, programer može početi kodi-rati. Veoma često aplikacije zahtijevaju da se određeni sadržaj skine s Interneta i da se prikaže u aplikaciji. Tad se skida RSS koji se u aplikaciji parsira, a prikaz se tog sadržaja prilagodi mobilnom uređaju. Taj je sadržaj lista elemenata koji se prikazuju u ListActivity aktivnosti. Klikom na jedan element otvara se nova aktivnost s detaljnim prikazom te vijesti. Vijesti koje će se parsirati nalaze se na sljedećem linku:http://www.dalmacijanews.com/DesktopModules/DnnForge%20-%20NewsArticles/Rss.aspx?TabID=77&ModuleID=382&MaxCount=25

Riječ je o RSS-u dalmacijanews.hr portala. Ako se detaljnije pogleda RSS, može se primi-jetiti da sadrži određene elemente od kojih se element <item> ponavlja. Taj element predstavlja vijest koja će biti prikazana u aplikaciji.

IZRADA ANDROID APLIKACIJE

139

<item> <title> Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO) </title> <link> http://www.dalmacijanews.com/Hrvatska/View/tabid/77/ID/114354/Jugo-s-udarima-preko-110kmh-diglo-goleme-valove-FOTO-VIDEO.aspx </link> <guid isPermaLink="false">f1397696-738c-4295-afcd-943feb885714:114354</guid> <author>Rade Popadić</author> <pubDate>Mon, 18 Mar 2013 19:03:00 GMT</pubDate> <description> Ovogodi&scaron;nji ožujak ne prestaje donositi meteorolo&scaron;ka iznenađenja. Mjesec je počeo natprosječnom toplinom u prvom desetodnevlju, zatim ve... </description> <content> <br /> Ovogodi&scaron;nji ožujak ne prestaje donositi meteorolo&scaron;ka iznenađenja. Mjesec je počeo natprosječnom toplinom u prvom desetodnevlju, zatim velikom hladnoćom u drugom. Snijeg je pro&scaron;li tjedan zabijelio cijelu unutra&scaron;njost zemlje, a uz obalu Dalmacije je bilo i snježnih pahulja. Proteklog vikenda su ponegdje u unutra&scaron;njosti zemlje temperature dosezale -5°C, a mraza je bilo i diljem otoka i obale.<br /> <br /> Ponedjeljak je donio novu izraženu ciklonu koje djeluje na vrijeme u cijeloj zemlji. Radi se o cikloni Otokar. Zadnja 24 sata atmosferski tlak pao je za čak 25 hektopaskala, a svi smo itekako osjetili južinu i osjetno zatopljenje, pi&scaron;e <a href="http://www.crometeo.hr" target="_blank"><strong>Crometeo.hr.</strong></a><br /> <br /> Ciklona je na Jadranu donijela vrlo obilne oborine. Na dijelu sjevernog Jadrana palo je preko 100 litara ki&scaron;e po metru kvadratnome. Čak 177 litara do 19 sati palo je u Poljanama na obroncima Učke. Jko grmljavinsko nevrijeme iza 17 sati zahvatilo je dio Istre, donoseći obilne pljuskove praćene intenzivnom grmljavinom i tučom.<br /> <br /> Nevrijeme je osobito jako pogodilo otok Krk i Rijeku. Zbog jakih udara juga vatrogasci su poslijepodne imali nekoliko intervencija. Ru&scaron;ila su se stabla u Kostreni, blizu Sportske dvorane na Zametu, a vatrogasci su intervenirali u Osječkoj ulici na &Scaron;kurinjama gdje je odletjela tenda.<br /> <br /> Obilne ki&scaron;e bilo je i u Dalmaciji, tako je u Konavlima i dijelu Dalmatinske zagore palo preko 50mm ki&scaron;e. U unutra&scaron;njosti je ki&scaron;e najmanje bilo u Slavoniji, a znatno vi&scaron;e na zapadu zemlje gdje se sljedećih sati očekuje glavnina oborina.<br /> <br /> Najvi&scaron;e dnevne temperature bile su na Jadranu od 11 do 16°C, u unutra&scaron;njosti zemlje od 5 na krajnjem zapadu, do 12°C u zapadnoj Slavoniji.<br /> <br /> Uz ki&scaron;u, glavno obilježje vremena tijekom ponedjeljka na Jadranu bio je vjetar. Veći dio dana puhalo je jako jugo koje je mjestimično imalo česte olujne udare &scaron;to je izrazio povećalo valovitost mora. Nizak tlak i južni vjetrovi uzrokovali su plimu koja je mjestimično poplavila najniže dijelove obale.<br /> <br /> Do 17 sati najjače jugo je puhalo na dubrovačkom području. Tamo su udari prelazili 110km/h. Na otoku Mljetu također. Na otoku Visu, Palagruži i Krku izmjerni su udari juga premo 100km/h. U Zadru je jugo na udare puhalo do 93km/h, na Rabu 92km/h, Splitu 90, Makarskoj 73, a &Scaron;ibeniku 72km/h.<br /> <br /> <iframe width="4400" height="315" frameborder="0" src="http://www.youtube.com/embed/dFXkFwMNpXI"></iframe> <br /> <br /> <iframe width="440" height="315" frameborder="0" src="http://www.youtube.com/embed/vQ0L1TEctMQ"></iframe> <br /> <br /> Na prolasku fronte u kasnim popodnevnim satima, jugo je na sjevernom Jadranu okrenulo na umjeren do jak lebić (garbin).<br /> <div style="text-align: right;"><strong>D.N.<br /> </strong>Foto:<strong> Zvonimir Bari&scaron;in, Tonći Plazibat, Luka Gerlanc / CROPIX<br /> </strong>Video: <strong>Boris Ba&scaron;ić / CROMETEO</strong></div> </content> <comments> http://www.dalmacijanews.com/Hrvatska/View/tabid/77/ID/114354/Jugo-s-udarima-preko-110kmh-diglo-goleme-valove-FOTO-VIDEO.aspx#Comments </comments> <slash:comments>0</slash:comments> <enclosure url="http://www.dalmacijanews.com/Portals/0/images/2013/03/2_jugo_kastela.jpg" length="192162" type="image/jpeg"/> <gallery> <img id="Rss_77114354_10" src="/Portals/0/images/2013/03/2_jugo_kastela.jpg" alt="Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO)"/> <img id="Rss_77114354_12" src="/Portals/0/images/2013/03/Clipboard01.jpg" alt="Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO)"/> <img id="Rss_77114354_14" src="/Portals/0/images/2013/03/jugo_kastela2-180313.jpg" alt="Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO)"/> <img id="Rss_77114354_16" src="/Portals/0/images/2013/03/jugo_kastela3-180313.jpg" alt="Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO)"/> <img id="Rss_77114354_18" src="/Portals/0/images/2013/03/jugo_kastela4-180313.jpg" alt="Jugo s udarima preko 110km/h diglo goleme valove (FOTO, VIDEO)"/> </gallery> </item>

Slika 128. Item element u RSS-u


140

Postoji više <item> elemenata i svaki element predstavlja jednu vijest. Koliko <item> elemenata ima u RSS-u, bit će i elemenata u listi u ListActivity aktivnosti. Title, author, date i slika u url atributu iz enclosure elementa bit će prikazani u elementu liste. U de-taljima će biti prikazana ista slika koja je uvećana i sljedećeg sadržaja:<content> elementa te title.

Prvo se kreira Android projekt. Projekt se radi za 3.0(API 11) do 4.2.2(API 17). Opisuje se plan općeg izgleda i navigacija aplikacije. Kada korisnik pokrene aplikaciju, pokrenut će se Splash ekran koji će biti prikazan sve dok se ne skine i ne parsira sadržaj RSS-a. Kada se sadržaj parsira, svi će se elementi prikazati u ListActivity aktivnosti. Kada korisnik klikne na element u listi, otvorit će se nova aktivnost s detaljima te vijesti.

Prvo će se kreirati aktivnost naziva SplashActivity i klasa DalmacijaTask koja će nasli-jediti AsyncTask. U DalmacijaTask će se pokrenuti proces skidanja i parsiranja sadržaja RSS-a. Za parsiranje se sadržaja može koristiti SAX parser ili DOM parser. Ti parseri su dio Android SDK i zahtijevaju dodatni kod za uspješno parsiranje. Kako bi se olakšalo par-siranje, u ovom će se primjeru koristiti već gotova biblioteka koja parsira sadržaj preko anotacija. Kako se kod za spajanje i skidanje sadržaja s internetskih stranica ne bi morao ručno pisati, koristit će se gotova biblioteka za spajanje i skidanje sadržaja s Interneta, tj. „Apache Commons IO“ koja se može naći na sljedećem URL-u:http://commons.apache.org/proper/commons-io//

Ova biblioteka sadrži metodu FileUtils.copyUrlToFile() kojom će se RSS skinuti i spremiti u datoteku na uređaju. Nakon toga se sadržaj mora parsirati. Za parsiranje se koristi biblioteka „Simple“ sa stranice:http://simple.sourceforge.net/

Simple se upotrebljava tako da se preko anotacija označi koja varijabla će predstavljati koji element u RSS-u. Biblioteka će prema tim anotacijama znati kako parsirati sadržaj. U projektu se mora kreirati direktorij libs i u njega kopirati obje .jar datoteke. Nakon toga se desnim klikom Add To Build Path biblioteke dodaju u projekt. Osim tih dviju bibliote-ka, koristit će se i biblioteka za skidanje slika s Interneta koje će biti prikazane. Skidanje slika bi se trebalo odrađivati u posebnoj dretvi, a za to je potrebna posebna AsyncTask klasa. Nakon što se slika skine, postavlja se u ImageView. Nije potrebna posebna Async-Task klasa za skidanje slika s Interneta jer sve obavlja biblioteka „Android Universal Im-age Loader“, a može se naći na sljedećoj stranici:https://github.com/nostra13/Android-Universal-Image-Loader

Ukratko opisano RSS sadržaj izgleda ovako:


141

<rss> <channel> <title>Dalmacija News</title> <link>http://www.dalmacijanews.com</link> <description>RSS feeds for Dalmacija News</description> <item> ... </item> <item> ... </item> ..još <item> elemenata... <channel> </rss>

Slika 129. Opći izgled RSS-a

Prema općem se izgledu RSS-a izrađuju klase koje će se kasnije anotirati kako bi parser znao kako isparsirati dokument. Budući da nisu potrebni svi podatci, neki će se sadržaji RSS-a parsi-rati, a neki izostaviti. Izgled klasa bi bio sljedeći: RSS klasa ima objekt Channel u sebi, kreirana Channel klasa ima objekt Item u sebi(prva će se tri channel elementa ignorirati jer nisu potrebni za aplikaciju).

package android.gauss.dalmacija.rss; import java.io.Serializable; import org.simpleframework.xml.Element; import org.simpleframework.xml.Root; @Root public class Rss implements Serializable{ @Element private Channel channel; public Channel getChannel() { return this.channel; } public void setChannel(Channel channel) { this.channel = channel; } }

Primjer 111. RSS klasa

Anotacija @Root označava da je RSS klasa prvi element tj. korijen RSS-a. @Element označava da RSS u sebi sadržava element tipa Channel. Važno je imenovati varijable i nazive elemenata u RSS-u da parser može prepoznati o kojem se elementu radi. Slijedi Channel klasa:


142

package android.gauss.dalmacija.rss; import java.io.Serializable; import java.util.List; import org.simpleframework.xml.ElementList; public class Channel implements Serializable{ @ElementList(inline = true) private List<Item> item; public List<Item> getItem() { return this.item; } public void setItem(List<Item> item) { this.item = item; } }

Primjer 112. Channel klasa

Channel klasa sadrži samo anotaciju @ElementList, tj. listu elemenata tipa Item. Može se primijetiti da je inline postavljeno kao true što znači da elementi nisu sadržani u dodatnom elementu npr. <items>. Ako postoji lista elemenata u RSS-u, sadržani su u dodatnom elementu npr:<rss> <channel> <items> <item> ... </item> <item> ... </item> ..još <item> elemenata... </items> <channel> </rss>

Slika 130. Lista elemenata kada je inline = false

S (inline = true) označuje da dodatan element u ovom slučaju ne postoji, tj. da su elementi di-rektna djeca channel elementa. U Item klasi će se parsirati samo oni elementi koji su potrebni (kao i u RSS-u).


143

package android.gauss.dalmacija.rss; import java.io.Serializable; import org.simpleframework.xml.Element; public class Item implements Serializable{ @Element private String title; @Element private String link; @Element private String guid; @Element private String author; @Element private String pubDate; @Element private String description; @Element private String content; @Element private Enclosure enclosure; public String getTitle() { return this.title; } public void setTitle(String title) { this.title = title; } public String getLink() { return this.link; } public void setLink(String link) { this.link = link; } public String getGuid() { return this.guid; } public void setGuid(String guid) { this.guid = guid; } public String getAuthor() { return this.author; } public void setAuthor(String author) { this.author = author; } public String getPubDate() { return this.pubDate; } public void setPubDate(String pubDate) { this.pubDate = pubDate; } public String getDescription() { return this.description; } public void setDescription(String description) { this.description = description; } public String getContent() { return this.content; } public void setContent(String content) { this.content = content; } public Enclosure getEnclosure() { return this.enclosure; } public void setEnclosure(Enclosure enclosure) { this.enclosure = enclosure; } }

Primjer 113. Item klasa

Klasa Enclosure je element <enclosure> u <item> elementu i iz njega treba izvaditi atribut url.


144

package android.gauss.dalmacija.rss; import java.io.Serializable; import org.simpleframework.xml.Attribute; public class Enclosure implements Serializable{ @Attribute private String url; public String getUrl() { return this.url; } public void setUrl(String url) { this.url = url; } }

Primjer 114. Enclosure klasa

Anotacija @Atribute označava da se želi očitati atribut url <enclosure> elementa. Ovdje će se ukratko prikazati kako koristiti ovaj parser kada su anotacije u pitanju. Postoji mnogo mogućnosti s tim parserom, a mnogi su korisni prikazani i na internetskoj strani-ci. Sada se može nastaviti pisati DalmacijaTask klasa. Kada se sadržaj skine i parsira, pozvat će se nova List Activity i zatvoriti Splash aktivnost. Preostalo je napraviti još jedan interface koji će implementirati SplashActivity klasa. Taj će interface imati samo jednu metodu koja će se pokrenuti kada sadržaj bude skinut i parsiran.package android.gauss.dalmacija.asynctasks; import android.gauss.dalmacija.rss.Rss; public interface DalmacijaNewsListener { void onNewsAvailable(Rss rss); }

Primjer 115. DalmacijaNewsLIstener interface

Slijedi prikaz DalmacijaTask klase:


145

public class DalmacijaTask extends AsyncTask<Void, Void, Rss>{ private static final String FILE_NAME = "dalmacija_news.xml"; private static final String URL = "http://www.dalmacijanews.com/DesktopModules/DnnForge%20-%20NewsArticles/Rss.aspx?TabID=77&ModuleID=382&MaxCount=25"; private Context context; private File file; private DalmacijaNewsListener listener; public DalmacijaTask(Context context) { this.context = context; } protected void onPreExecute(){ file = new File(context.getFilesDir(), FILE_NAME); if(!file.exists()){ try { file.createNewFile(); } catch (IOException exception) { // TODO Auto-generated catch-block stub. exception.printStackTrace(); } } }; @Override protected Rss doInBackground(Void... params) { try { FileUtils.copyURLToFile(new URL(URL), file); Serializer serializer = new Persister(); Rss rss = serializer.read(Rss.class, file, false); return rss; } catch (Exception exception) { // TODO Auto-generated catch-block stub. exception.printStackTrace(); } return null; } @Override protected void onPostExecute(Rss rss) { if(rss != null){ listener.onNewsAvailable(rss); } } public void setDalmacijaNewsListener(DalmacijaNewsListener listener){ this.listener = listener; } }

Primjer 116. Asinkrono skidanje i parsiranje RSS-a


146

U konstruktor se DalmacijaTask klase šalje Context koji se pripisuje privatnoj varijabli. Prije nego što se pokrene proces skidanja sadržaja s internetske stranice, pomoću nje se u onPreExecute() provjerava postoji li dalmacija_news.xml datoteka. Ako ne postoji, kreira se. Zatim se u doIn-Background() metodi pomoću FileUtils.copyUrlToFile() kopira sadržaj RSS-a u tu datoteku. Zatim se instancira objekt Serializer koji read metodom parsira sadržaj. Prvi je parametar prva klasa koja se koristi u parsiranju, tj. RSS.class, drugi je datoteka s RSS sadržajem, a treći je parametar postavljen na true što znači da parsiranje ne mora biti striktno, tj. da u klasama ne moraju biti postavljeni svi elementi kao u RSS-u. U onPostExeute() metodi se provjerava je li kreiran RSS objekt. Ako je kreiran, pokreće se metoda listenera koji je postavljen metodom setDalmacijaN-ewsListener(). Listener će biti SplashActivity.

package android.gauss.dalmacija; import android.app.Activity; import android.content.Intent; import android.gauss.dalmacija.asynctasks.DalmacijaNewsListener; import android.gauss.dalmacija.asynctasks.DalmacijaTask; import android.gauss.dalmacija.rss.Rss; import android.gauss.dalmacijanews.R; import android.os.Bundle; import com.nostra13.universalimageloader.core.ImageLoader; import com.nostra13.universalimageloader.core.ImageLoaderConfiguration; public class SplashActivity extends Activity implements DalmacijaNewsListener{ private DalmacijaTask downloadDalmacija; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext()).build(); ImageLoader.getInstance().init(config); downloadNews(); } private void downloadNews(){ downloadDalmacija = new DalmacijaTask(this); downloadDalmacija.setDalmacijaNewsListener(this); downloadDalmacija.execute(); } @Override public void onNewsAvailable(Rss rss) { Bundle bundle = new Bundle(); bundle.putSerializable("rss",rss); Intent intent = new Intent(this, NewsListActivity.class); intent.putExtras(bundle); startActivity(intent); this.finish(); } }

Primjer 117. Splash Activity klasa


147

SplashActivity aktivnost ima postavljen ImageView koji predstavlja sliku. To je obična aktivnost koja u svom layoutu ima samo sliku. Kada se sadržaj s Interneta skine i parsira, pokreće se nova aktivnost kojoj se šalje dohvaćen objekt s podatcima vijesti.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#333" android:gravity="center" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".SplashActivity" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="158dp" android:src="@drawable/logooo" /> </RelativeLayout>

Primjer 118.. Layout SplashActivity aktivnosti

Slika 131. Splash Activity

Pokretanjem aplikacije izrađuje se konfiguracija biblioteke za skidanje slika s Interneta. To je zahtjev biblioteke koji mora biti izvršen. Zatim slijedi skidanje sadržaja s Interneta i parsiranje. Sve se odvija u pozadinskoj dretvi. Ova klasa također implementira inter-face DalmacijaNewsListener koji sluša kada se sadržaj skida i parsira. Prije nego što se pokrene AsyncTask za dohvaćanje sadržaja, ova klasa šalje sebe kao slušača u AsyncTask klasu kako bi mogla aktivirati metodu onNewsAvailable() kada se dohvati sadržaj. Dakle, kada se ta metoda pokrene, pošalje se RSS klasa sa svim dohvaćenim podatcima i post-avlja se pomoću Bundle objekta u Intent objekt. Pokreće se nova aktivnost, a prethodna se aktivnost zatvara.


148

package android.gauss.dalmacija; import android.app.ListActivity; import android.gauss.dalmacija.adapters.DalmacijaNewsAdapter; import android.gauss.dalmacija.rss.Rss; import android.os.Bundle; public class NewsListActivity extends ListActivity{ private Rss rss; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); rss = (Rss)getIntent().getSerializableExtra("rss"); DalmacijaNewsAdapter adapter = new DalmacijaNewsAdapter(this, rss.getChannel().getItems()); setListAdapter(adapter); } }

Primjer 119. NewsListActivity klasa

Nova aktivnost je ListActivity aktivnost koja adapterom prikazuje listu elemenata. Ge-tIntent() metodom se iz Intent objekta dohvati RSS objekt koji je poslan u prošloj ak-tivnosti, a lista se Item objekata šalje u adapter. U layout direktoriju se kreira nova lay-out XML datoteka koja se naziva „list_item_dalmacija_news“. Izgled XML-a je sljedeći:


149

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="80dp" android:background="@drawable/background" android:orientation="vertical" android:padding="5dp" > <ImageView android:id="@+id/newsImage" android:layout_width="80dp" android:layout_height="80dp" android:layout_alignParentLeft="true" android:layout_marginRight="10dp" android:scaleType="centerCrop" /> <TextView android:id="@+id/newsTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@id/newsImage"/> <TextView android:id="@+id/newsDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"/> <TextView android:id="@+id/newsAuthor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_above="@id/newsDate"/> </RelativeLayout>

Primjer 120. list_item_dalmacija_news layout datoteka

Kada je layout složen, treba se posložiti i adapter. Kreirana je nova klasa DalmacijaNews-Adapter koja nasljeđuje klasu BaseAdapter. U konstruktor se pošalje Context i list Item objekata. U getView() metodi se uvijek dohvaća sljedeći element i postavlja se slika, naslov, autor i datum. Sadržaj slike se u ovom slučaju skida s Interneta pa je potrebno nekoliko trenutaka da se slika učita kada se aktivnost pokrene. Može se umjesto slike dodatno ubaciti i Progress Bar ili sl., a kada se slika učita ProgressBar se uklanja. Dakle, o skidanju se slika s Interneta brine biblioteka koja je prije bila uključena u projekt.


150

public class DalmacijaNewsAdapter extends BaseAdapter{ private List<Item> itemList; private LayoutInflater inflater; public DalmacijaNewsAdapter(Context context, List<Item> itemList) { this.itemList = itemList; inflater = LayoutInflater.from(context); } @Override public int getCount() { return itemList.size(); } @Override public Object getItem(int position) { return itemList.get(position); } @Override public long getItemId(int position) { return itemList.indexOf(itemList.get(position)); } @Override public View getView(int position, View convertView, ViewGroup parent) { if(convertView == null){

convertView = inflater.inflate(R.layout.list_item_dalmacija_news, parent, false);

} ImageView image = (ImageView) convertView.findViewById(R.id.newsImage); ImageLoader.getInstance().displayImage(itemList.get(position).getEnclosure().getUrl(), image); TextView title = (TextView) convertView.findViewById(R.id.newsTitle); title.setText(itemList.get(position).getTitle()); TextView author = (TextView) convertView.findViewById(R.id.newsAuthor); author.setText(itemList.get(position).getAuthor()); TextView date = (TextView) convertView.findViewById(R.id.newsDate); date.setText(itemList.get(position).getPubDate()); return convertView; } }

Primjer 121. DalmacijaNewsAdapter klasa

Ako se sada pokrene projekt, dobije se sljedeći rezultat:


151

Slika 132. Izgled NewsListActivity aktivnosti

Pritisak na element treba otvoriti novu aktivnost koja će prikazati detaljni prikaz vijesti. ListAc-tivity sama po sebi sadrži metodu koja prepoznaje klik na element i potrebno ju je implemen-tirati. Klikom na element dohvatit će se Item objekt koji je sadržan na tom mjestu. Objekt će se preko Intent objekta poslati u sljedeću aktivnost koja će prikazati detalje te vijesti, a podatke će dobiti iz Item objekta koji se poslao u Intent objektu.


152

package android.gauss.dalmacija; import android.app.ListActivity; import android.content.Intent; import android.gauss.dalmacija.adapters.DalmacijaNewsAdapter; import android.gauss.dalmacija.rss.Item; import android.gauss.dalmacija.rss.Rss; import android.os.Bundle; import android.view.View; import android.widget.ListView; public class NewsListActivity extends ListActivity{ private Rss rss; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); rss = (Rss)getIntent().getSerializableExtra("rss"); DalmacijaNewsAdapter adapter = new DalmacijaNewsAdapter(this, rss.getChannel().getItems()); setListAdapter(adapter); } @Override protected void onListItemClick(ListView l, View v, int position, long id) { Item item = (Item)l.getItemAtPosition(position); Bundle bundle = new Bundle(); bundle.putSerializable("rss", item); Intent intent = new Intent(this, NewsDetailsActivity.class); intent.putExtras(bundle); startActivity(intent); } }

Primjer 122.NewsListActivity aktivnost s ListItemClick listenerom

Zatim se kreira nova layout XML datoteka koja će definirati izgled aktivnosti koja će prikazivati detalje vijesti. Naziv datoteke je „activity_news_details.xml“.


153

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:text="test" android:textColor="#555" android:textSize="18sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/dotted_tile_xml" android:orientation="vertical" > </LinearLayout> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="150dp" android:layout_margin="5dp" android:scaleType="centerCrop" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/dotted_tile_xml" android:orientation="vertical" > </LinearLayout> <WebView android:id="@+id/web" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" android:background="#ede5dc" /> </LinearLayout> </RelativeLayout>

Primjer 123. Activity_news_details layout datoteka


154

Ovaj layout sadrži i WebView koji će služiti za prikaz internetskog sadržaja jer je glavni opis vijesti upisan u HTML-u. To se može vidjeti ako se pogleda <content> element u RSS-u. Zatim se kreira nova klasa NewsDetailsActivity koja nasljeđuje klasu Activity. U onCreate() metodi se dohvati Item objekt i spremi se u varijablu, dohvate se svi potrebni elementi i prikazuje se sadržaj Item objekta u njima.

public class NewsDetailsActivity extends Activity{ private Item item; private TextView title; private ImageView image; private WebView content; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_news_details); item = (Item) getIntent().getSerializableExtra("rss"); } @Override protected void onResume() { super.onResume(); title = (TextView)findViewById(R.id.title); title.setText(item.getTitle()); image = (ImageView) findViewById(R.id.image); ImageLoader.getInstance().displayImage(item.getEnclosure().getUrl(), image); content = (WebView) findViewById(R.id.web); content.loadData(item.getContent(), "text/html; charset=utf-8", "utf-8"); content.setBackgroundColor(0x00000000); if (Build.VERSION.SDK_INT >= 11) // Android v3.0+ try { Method method = View.class.getMethod("setLayerType", int.class, Paint.class); method.invoke(content, 1, new Paint()); // 1 = LAYER_TYPE_SOFTWARE(API11) } catch (Exception e) { } } }

Primjer 124. NewsDetailsActivity klasa

Sav se potreban sadržaj postavlja u elemente koji su definirani u layoutu. Može se primijetiti da WebView ne učitava internetsku stranicu, nego se u njega metodom loadData() direktno ubacu-je HTML sadržaj. Veoma je važno postaviti drugi parametar kao „text/html charset=utf-8“ zbog pravilnog dekodiranja slova. WebView ima poteškoće s prikazivanjem pozadine u boji zbog čega


155

je vrijednost njegove pozadine transparentna. Transparentnost se u verzijama Androida, koji su veći od 3.0, ne može postaviti na klasičan način. Ovisno o tome koja je trenutna verzija Androida na uređaju, poziva se metoda koja postavlja pozadinu WebViewa kao transparentnu pozadinu.

Napisana bi aktivnost trebala izgledati kao na sljedećoj slici:

Slika 133. Izgled NewsDetailsActivity aktivnosti

Na kraju se ubacuju launcher ikone koje se nalaze u direktorijima LDPI, MDPI; HDPI i XHDPI. Ikone se postavljaju u odgovarajuće direktorije ovisno o svojim dimenzijama. Ikone se mogu zamijeniti novim ikonama koje će dobiti isti naziv kao i stare. Nove se ikone nazovu ic_launcher i prekopiraju se preko starih ikona. Iako sve ikone moraju imati isti naziv, postavljaju se u različite direktorije. Launcher ikona se također može zamijeniti tako da se svim četirima ikonama dodijeli isti naziv i prebaci ih se u direktorije koji su za njih namijenjeni. U manifest datoteci se tada mora navesti ikonu koja će služiti kao launcher ikona.


156

Slika 134. Zamjena launcher ikone u manifestu


Poduzetni�tvo

157

Poduzetni�tvo

158

7. PODUZETNIŠTVO

7.1. Što je to poduzetništvo?

Riječ poduzetništvo potječe od francuske riječi entreprendre u značenju „poduzimati nešto“. Iako se pojam poduzetništva najčešće veže uz pokretanje, vođenje i razvijanje poslovnog (po-duzetničkog) poduhvata, obuhvaća mnogo šire područje. Poduzetništvo predstavlja način raz-mišljanja i djelovanja i ne mora nužno biti vezan uz poslovni poduhvat. Najčešće se poduzetniš-tvo objašnjava kao proces u kojem se iz ničega stvara nešto. U svakom je poduzeću, neovisno o njegovoj veličini, djelatnosti kojom se bavi i sl., poduzetničko razmišljanje svakog zaposlenika od iznimne važnosti. Pri tome se misli na kreativnost u rješavanju problema, sposobnost sa-gledavanja problema u cijelosti, inovativnost i proaktivnost. Poduzetničko ponašanje rezultira stvaranjem nove ili povećanjem postojeće vrijednosti organizacije (za vlasnika i sve ostale koji su uključeni u njegovo djelovanje).

Najčešće se spominju tri osnovne vrste poduzetništva:

Tradicionalno je poduzetništvo upravljanje malim i srednjim poduzećima i obrtima kojima je cilj ostvarenje dobiti. S pojmom se tradicionalnog poduzetništva, poduzetništvo najčešće poisto-vjećuje.

a) Socijalno se poduzetništvo odnosi na rad i upravljanje organizacijama kojima je osnovni cilj općedruštvena korist, tj. unaprjeđenje kvalitete življenja, a ne stjecanje dobiti.

b) Korporativno se poduzetništvo veže uz poduzetničko ponašanje u korporacijama, odno-si se na sve zaposlene, a ne samo na najviši menadžment.

7.2. Procjena poduzetničkih sposobnosti

Uspjeh svakog posla, u najvećoj mjeri, ovisi o osobnim karakteristikama poduzetnika, vještinama i financijskoj situaciji. Prije pokretanja nekog posla u obzir se moraju uzeti sve vještine i osobine koje su potrebne za vođenje posla. Čimbenici koji utječu na us-pjeh svakog poslovnog poduhvata dijele se na: osobne čimbenike (predanost poslu, motivacija, preuzimanje rizika, odlučivanje) i vještine (tehničke i upravljačke). Uspjeh također ovisi i o okruženju u kojem se osoba koja vodi posao nalazi. Stoga se u važne čimbenike mora uvrstiti i podrška okoline, posebno obitelji. Mnogi uspješni vlasnici poduzeća nisu posjedovali sve neophodne vještine i prave osobine, nego su ih naučili i razvili tijekom vremena.

Vještine i osobine se mogu unaprijediti na više načina:

a) Razgovarajte o ovim temama sa svojim prijateljima, obitelji, drugim poduzet-nicima

b) Promatrajte druge poslovne ljude i pratite one korake koji ih vode ka uspjehu c)c) Obučavajte se kako biste unaprijedili svoje vještine i znanja. Možete, na primjer, učiti o knjigovodstvu i prodaji.

PODUZETNIŠTVO

159

d) Čitajte knjige iz kojih možete naučiti više o onome što vas zanima.

Istraživanja su pokazala kako poduzetnici u većoj mjeri imaju i iskazuju određene os-obine, vještine i ponašanje. Te su vještine i osobine prikazane u tablici koja slijedi.

Poduzetničke vještine Poduzetničke osobineuvjeravanje

pregovaranje

prezentiranje

rješavanje konflikata

strateško razmišljanje

donošenje odluka

umrežavanje

kreativnost

ambicioznost

samouvjerenost

upornost

inicijativa

znatiželja

predanost poslu

Tablica 4. Poduzetničke vještine i osobine

Poduzetničko ponašanje podrazumijeva traženje i prepoznavanje prilika u okruženju, preuzima-nje inicijativa i prihvaćanje rizika. Prije ulaska u svijet poduzetništva, svaki bi poduzetnik trebao ocijeniti one vještine i osobine koje su ključne za uspjeh njegovog poslovnog poduhvata. Sljede-ći je korak izrada plana za unaprjeđenje onih vještina i osobina koje nisu dobile zadovoljavajuću ocjena, a nakon toga njegova realizacija.

7.3. Poslovni plan

Poslovni je plan pisani dokument koji sadrži detaljno razrađen plan o ulaganju u posao, budućim rezultatima poslovanja i varijantnim rješenjima u slučaju mogućih rizičnih situacija. Temeljna je okosnica planiranja, pokretanja, financiranja, organiziranja, vođenja, razvijanja i kontrole po-duzetničkog pothvata tijekom cjelokupnog vijeka trajanja. Ne postoji univerzalna matrica za sastavljanje poslovnih planova, ali zato postoje standardi i protokoli koji plan čine razumljivim i jasnim. Često se smatra da je poslovni plan dokument koji služi isključivo u svrhu odobra-vanja kredita od strane financijskih institucija. Međutim, najčešći je korisnik poslovnog plana poduzetnik sa svojim timom ljudi koji će pratiti rast i razvoj tvrtke. Poslovni plan usmjerava poslovanje i olakšava donošenje poslovnih odluka. Može ga izraditi poduzetnik ili konzultant ukoliko poduzetnik nema dovoljno iskustva. Kada poslovni plan izrađuje konzultant, poduzetnik i dalje ima veliku ulogu u njegovoj izradi. Zadužen je prikazati sve podatke koji su nužni za izradu poslovnog plana. Poduzetnik odgovara za točnost prikazanih podataka, a konzultant za izračun.

POSLOVNI PLAN

160

Slijedi primjer sadržaja poslovnog plana:

1. PODATCI O PODUZETNIKU

2. POLAZIŠTE

2.1. Nastanak poduzetničke ideje

2.2. Vizija poduzetničkog pothvata

3. PREDMET POSLOVANJA

4. LOKACIJA

5. TEHNIČKO – TEHNOLOŠKI ELEMENTI ULAGANJA

5.1. Opis strukture ulaganja

5.2. Struktura i broj zaposlenika

6. TRŽIŠNA OPRAVDANOST

6.1. Tržište nabave

6.2. Tržište prodaje

6.3. Procjena ostvarenja prihoda

7. FINANCIJSKI ELEMENTI PODUHVATA

7.1. Investicije u osnovna sredstva

7.2. Investicije u obrtna sredstva

7.3. Troškovi poslovanja

7.4. Proračun amortizacije

7.5. Izvori financiranja

7.6. Projekcija računa dobiti i gubitka

7.7. Financijski tijek

7.8. Ekonomski tijek

8. POKAZATELJI UČINKOVITOSTI

9. ZAKLJUČNA OCJENA PROJEKTA

U prvom se dijelu poslovnog plana Podatci o poduzetniku zapisuje kraći životopis po-duzetnika koji pokreće postojeće poslovanje ili je njegov nositelj. Ako je riječ o part-nerstvu, zapisuju se životopisi oba partnera i bilježe se njihovi ulozi. U životopis treba navesti poslove koje je poduzetnik do sada obavljao (dokaz o znanjima i vještinama koje je poduzetnik stekao) i stupanj njegovog obrazovanja (najviše završeno obrazovanje i dodatna usavršavanja). Navode se i sljedeći podatci: iskustva na sličnim poslovima, bivši poslodavci, priznanja i diplome koje su ostvarene u dosadašnjem radu, poznavanje

POSLOVNI PLAN

161

stranih jezika, poznavanje rada na računalu i sl.

U drugom se dijelu Polazište objašnjava kako je poduzetnik došao na ideju baviti se poslom kojim se bavi. U odabiru ideje za posao većina poduzetnika uzima u obzir znanja i vještine koje posjeduje, ali i znanja i vještine ostalih članova obitelji. Nakon što su definirana stečena znanja i vještine i okolnosti koje su dovele do pokretanja određene poduzetničke ideje, opisuje se plan razvoja poslovanja, tj. poslovne ideje.

Treći dio poslovnog plana Predmet poslovanja opisuje djelatnost kojom će se obrt ili društvo s ograničenom odgovornošću baviti. Potrebno je navesti: sjedište djelatnosti, osnivače, temeljni kapital (ako je u pitanju d.o.o.), datum osnivanja, rješenje o registraciji (broj registracije) i dje-latnosti za koje je obrt ili društvo s ograničenom odgovornošću registrirano.

Lokacija je dio poslovnog plana koji podrazumijeva sjedište obrta ili društva s ograničenom od-govornošću. Ako se djelatnost obavlja izvan sjedišta djelatnosti, navode se razlozi zašto je to tako. Primjerice, za obavljanje zidarske djelatnosti sjedište nije toliko bitno jer se svi poslovi obavljaju na mjestu koje klijent odredi, ali za trgovačku djelatnost lokacija ima veliku ulogu u ostvarenju budućih prihoda pa je nužno opisati lokaciju, povezanost s glavnim cestama, osigu-rana parkirališna mjesta za kupce i sl. Postoje i djelatnosti kod kojih je lokacija nebitna, primje-rice IT sektor.

Tehničko-tehnološki elementi ulaganja investitorima daju informacije o samom tijeku poslov-nog procesa (npr. za djelatnost je kemijskog čišćenja iznimno važan detaljan opis procesa čišće-nja kako bi se mogla napraviti računica i shvatiti poslovni proces). Sljedeći je korak opis ulaganja, tj. točna specifikacija ulaganja. Dakle, poduzetnik mora odrediti koliko je sredstava potrebno odvojiti za osnovna sredstva (strojeve, namještaj, aparate, računala i sl.), a koliko za obrtna sredstva (novac na žiro-računu i zalihe repromaterijala).

Ako se poslovni plan koristiti u svrhu dobivanja kredita, treba napomenuti da većina programa za obrtna sredstva ne dopušta više od 30 % ukupne investicije. U dijelu Tehničko–tehnoloških elemenata ulaganja opisuje se i kako će se djelatnost obavljati. Kada poduzetnik sam obavlja djelatnost, nema potrebe zapošljavati druge djelatnike. Ali ako poduzetnik namjerava zapošlja-vati i druge djelatnike, mora odrediti koju stručnu spremu djelatnici trebaju imati, koje će po-slove obavljati, hoće li biti zaposleni na određeno ili neodređeno vrijeme i koliku će mjesečnu plaću imati. Poduzetnik treba biti upućen i u postojeće programe sufinanciranja i zapošljavanja pojedinih skupina nezaposlenih (više informacija u Centru za poduzetništvo Osijek ili Hrvatskom zavodu za zapošljavanje).

U šestom se dijelu Poslovnog plana Tržišna opravdanost naglasak stavlja na tržište nabave, pro-daju i procjenu ostvarenja prihoda. Potrebno je napraviti i popis dobavljača s kojima će podu-zetnik surađivati. Ukoliko poduzetnik posluje s više dobavljača i ako su dobavljači s područja Republike Hrvatske, također se moraju navesti. U planiranju nabave potrebno je odgovoriti na sljedeća pitanja: što će se, po kojoj cijeni (cijena sirovine direktno utječe na kvalitetu i cijenu finalnog proizvoda) i kod kojeg dobavljača nabavljati, koji su rokovi isporuke, postoje li dogo-voreni uvjeti plaćanja, koliki su troškovi nabave (prijevoz, carina, osiguranje). Mora se voditi računa i o sirovinama koje su u zalihama. Tržište prodaje je izuzetno važan dio poslovnog plana jer određuje što će se i po kojoj cijeni ili cijenama proizvoditi (cijenu treba usporediti s cijenom koju nudi konkurencija), na kojem tržištu (tržište općine, mjesta, grada, županije, Republike

POSLOVNI PLAN

162

Hrvatske ili šire) i tko su ciljni kupci (djeca, mladi, umirovljenici, pojedinci, tvrtke). Analiza se tržišta prodaje koristi i podatcima Hrvatske gospodarske komore i Hrvatske obrtničke komore, statističkim podatcima, žutim stranicama i različitim bazama podataka dostupnim u Centru za poduzetništvo Osijek. Prema svim se tim podatcima i planu prodaje određuju proizvodni kapaci-teti i prihodi koje se mogu ostvariti. U ovom se dijelu navode svi konkurenti i sve one prednosti koje poduzetnik ima u odnosu na konkurenciju.

Najzahtjevniji su dio u izradi poslovnog plana Financijski elementi poduhvata i poduzetnici se najčešće oslanjaju na stručnu pomoć u njegovoj izradi. Potrebno je napraviti granicu između investicije za osnovna (dugotrajna imovina: strojevi, namještaj, oprema, aparati i sl.) i obrtna sredstva (sredstva koja su trajno na raspolaganju za kupovinu repromaterijala i plaćanje dospje-lih obveza). Ukupne troškove poslovanja čine svi oni troškovi koji su navedeni u prethodnim poglavljima poslovnog plana: troškovi osoblja (bruto plaće vlasnika i djelatnika), troškovi siro-vina koje su potrebne za finalizaciju vlastitog proizvoda ili usluge i svi ostali iznenadni troškovi. Amortizacija je također trošak, ali njega poduzetnik ne plaća sa svog žiro-računa. Izračunava se samo za dugotrajnu imovinu, tj. osnovna sredstva prema Pravilniku o amortizaciji NN 54/01. Tablica se sa stopama amortizacije nalazi u dodatnim radnim listovima.

U dijelu Izvori financiranja pravi se jasna granica između vlastitih sredstava koja poduzetnik unosi u investiciju i kreditnih sredstava koja je zatražio od odabrane poslovne banke i programa kreditiranja. Navode se i uvjeti kreditiranja (kamatna stopa, poček, rok otplate, traženi iznos, anuitet i interkalarna kamatna stopa), a od banke koja kreditira poduzetnika, traži se plan otpla-te kredita. Nakon što su prihodi izračunati, a troškovi razrađeni, uspoređuju se i izvodi se bruto dobit. Bruto dobit se umanjuje za 20% (koliko iznosi porez na dobit) i dobiva se neto dobit.

Pokazatelji učinkovitosti podrazumijevaju izračune određenih parametara prema unaprijed određenim formulama. U formule treba unijeti podatke koji su dobiveni u računu dobiti i gubi-taka te planirani broj djelatnika koje želite zaposliti.

ukupna investicija / broj zaposlenih =

investicija u osnovna sredstva / broj zaposlenih =

bruto dobit x 100 / ukupne investicije =

neto dobit x 100 / ukupne investicije =

bruto plaće / broj zaposlenih =U zaključnoj se ocjeni sažimlje sve što je navedeno u poslovnom planu. Ističe se broj osoba koje poduzetnik namjerava zaposliti, prihode koje želi ostvariti i ocjene učinkovitosti. Da bi se dobila cjelovita slika investicije, još se jednom navodi: banka od koje poduzetnik traži kreditna sred-stva (ukoliko ih traži), uvjeti potraživanja (kamatna stopa, poček, rok otplate) i svrha (osnovna sredstva, obrtna sredstva).

POSLOVNI PLAN

163

7.4. Marketing i marketing plan

Američko marketinško udruženje marketinga marketing definira kao [17]. „aktivnost, niz insti-tucija i procesa za kreiranje, komuniciranje, isporuku i razmjenu ponuda koje imaju vrijednost za kupce, klijente, partnere i društvo u cjelini.“ Marketinški su ciljevi krajnji ishod koji poduzeće želi ostvariti implementacijom i provođenjem strategije marketinga. Tri su vrste ciljeva:

a) ciljevi koji su orijentirani na prodaju

b) ciljevi koji su orijentirani na proizvod

c) tržišno orijentirani ciljevi [18].

Koncept marketinškog spleta (marketing mix) marketing promatra kao cjelinu koja se sastoji od četiri elementa:

a) proizvoda (engl. product)

b) cijene (engl. price)

c) distribucije (engl. place) i

d) promocije (engl. promotion).

Prema početnim slovima elemenata marketinškog spleta, ovaj je koncept poznat kao 4P kon-cept. Ključ je marketinga identifikacija kupaca jer bez kupaca koji kupuje proizvod ili uslugu, nema ni posla. Proces je segmentacije kupaca podjela tržišta u grupe potrošača koji imaju odre-đene zajedničke karakteristike. Pet je faza segmentacije:

a) identificirati postojeću poziciju poduzeća na tržištu

b) identificirati varijable za segmentaciju i opisati potencijalne segmente

c) vrednovati potencijale svakog segmenta i izabrati ciljni segment

d) identificirati i razviti odgovarajuću strategiju pozicioniranja

e) izabrati i primijeniti odgovarajuću marketinšku strategiju

„Marketinški stručnjak rijetko može zadovoljiti svakoga na tržištu. Ne sviđaju se svima iste žita-rice, hotelske sobe, restorani, automobili, koledži ili filmovi. Stoga marketinški stručnjaci tržište dijele na segmente. Pregledom demografskih i bihevioralnih razlika među kupcima, oni identi-ficiraju i profiliraju različite grupe kupaca koji su skloni ili zahtijevaju slične proizvodne i uslužen spletove. Marketinški stručnjak tada odlučuje koji segmenti predstavljaju najveću priliku, odno-sno, koja su njihova ciljna tržišta. Za svako ciljno tržište tvrtka razvija marketinšku ponudu [19].“

Marketinški je plan temelj svih marketinških aktivnosti i mora biti u skladu sa strategijom poslo-vanja, tj. strateškim planom. Marketinški plan ima sljedeće elemente i korake:

a) Sažetak

b) Prvi korak: Definiranje svrhe (misije) poslovanja

c) Drugi korak: Analiza situacije

d) Treći korak: Utvrđivanje marketinških ciljeva

MARKETING I MARKETING PLAN

164

e) Četvrti korak: Selekcija ciljnog tržišta

f) Peti korak: Oblikovanje marketinških strategija

g) Šesti korak: Provedba marketinških aktivnosti

h) Sedmi korak: Kontrola marketinških aktivnosti

Sažetak je marketinškog plana kratki prikaz najvažnijih informacija koje su prikazane u mar-ketinškom planu. Piše se tek nakon što je cijeli marketinški plan gotov, ali se u planu nalazi na prvom mjestu. Svrha je poslovanja, tj. misija definirana poslovnim, tj. strateškim planom. Analiza situacije najčešće se vrši za izradu SWOT analize. Nakon što se marketinškim planom utvrdi svrha poslovanja i analizira situacija u kojoj se poduzeće nalazi, slijedi definiranje mar-ketinških ciljeva koji proizlaze iz analize situacije. Ciljevi moraju biti definirani i oblikovani tako da doprinose ostvarenju ukupnog cilja poduzeća. Poduzeće istovremeno može imati više ciljeva različite važnosti, ali zajednički moraju doprinijeti ostvarenju ukupnog cilja marketinga, a ukupni cilj marketinga mora doprinositi ostvarenju ukupnog cilja poduzeća. Selekcija je ciljnog tržišta sljedeća faza u izradi marketinškog plana. Proces je segmentacije temelj za odabir ciljnog tržišta, tj. skupine potrošača kojoj će se prilagođavati marketinški splet tvrtke. Nakon što se tvrtka odlu-čila za svoje ciljno tržište i segment kupaca, kreira ponudu i oblikuju se marketinške strategije. Strategije trebaju odgovoriti na sljedeće pitanje: kako ostvariti zacrtane marketinške ciljeve uz postojeće resurse? Marketing poznaje brojne strategije, a poduzetnik bira onu koju smatra naj-boljom za svoju trenutnu situaciju i prilagođava ju u skladu sa specifičnostima vlastitog poslova-nja i okoline u kojoj djeluje. Zadnja dva koraka predstavljaju operativne aktivnosti marketinškog plana. Za provedbu je marketinških aktivnosti potrebno provesti sljedeće aktivnosti:

a) koordinirati marketinške aktivnosti

b) omogućiti protok informacija unutar poduzetničkog subjekta

c) dati ovlaštenje djelatnicima za donošenje i provedbu odluka

Aktivnosti se kontroliraju zbog mogućih odstupanja od plana. Ako neka aktivnost odstupa od plana, mora se korigirati.

MARKETING I MARKETING PLAN

165

7.5. E-marketing

E-marketing ili Internet marketing je oglašavanje proizvoda i usluga putem Interneta. Promovira internetsko sjedište, internetsku trgovinu, landing page ili blog upotrebom jednog ili više servi-sa (sredstava) koji su dostupni na Internetu i/ili privlači posjetitelje ciljanom marketinškom po-rukom. Informatička je era najbrži rastući fenomen kojeg društvo poznaje. Danas se na Googleu obavlja više od 30 milijardi pretraživanja mjesečno. Za doseg od 50 milijuna radiju je trebalo 38, televiziji 13, Internetu 4, iPodu 3, a Facebooku 2 godine. Praćenje razvoja novih trendova iznimno je zahtjevan posao i jedan je od ključnih faktora uspješne online kampanje. Internet oglašavanje ima nekoliko prednosti u odnosu na konvencionalne oblike. Ključna je prednost njegova niska cijena, ciljane skupine i lako mjerljiv povrat na investiciju. Oglašivač može pratiti sve relevantne statistike o posjetiteljima svoje internetske stranice i kupcima pojedinog proi-zvoda ili usluge. U svakom mu je trenutku poznato isplati li se neka investicija i na vrijeme može prekinuti one kampanje koje ne ostvaruju zadovoljavajući povrat. Ako je u promociji propalo 50% novca, znači da je promocija promašila ciljanu skupinu ili je odaslana putem krivog medija u krivo vrijeme. Dakle, učinci se klasične promocije ne mogu izmjeriti. Zbog mogućnosti mjere-nja rezultata i direktnog utjecaja na tijek kampanje Internet marketing ima veliku popularnosti i široku primjenu.

Internet marketing poznaje šest koraka kojima je cilj povećanje prodaje:

a) izrada marketinške strategije: izrada ciljeva kampanje, identifikacija kupaca itd.

b) izrada internetskog sjedišta: dizajn, jednostavna navigacija, podrška za mobilne platforme itd.

c) privlačenje posjetitelja: newsletter, blog, Facebook, Twitter, Forsquere,Google

d) privlačenje posjetitelja: zanimljiv sadržaj, poziv na akciju, privlačne ponude itd.

e) konverzija potencijalnog kupca u kupca (prodaja): jednostavna kupovina, isporuka itd.

f) mjerenje rezultata: posjetitelji, bounce rate, trošak po konverziji itd.

E-mail marketing je alat koji se svakodnevno koristi u komunikaciji s tržištem. Zakon o elektro-ničkim komunikacijama NN 73/08, članak 107 navodi kako je ‘’uporaba pozivnih sustava, s ljud-skim posredovanjem ili bez njega, telefaksnih uređaja ili elektroničke pošte, uključujući kratke tekstovne poruke (SMS) i multimedijske poruke (MMS), u svrhu izravne promidžbe i prodaje dopuštena samo uz prethodno pribavljenu privolu pretplatnika ili korisnika usluga.’’ Elektro-nička pošta e-marketinga treba biti prilagođena mobilnim uređajima. Optimizacija se elektro-ničke pošte za mobilne uređaje postiže izbjegavanjem velikih slika, smanjenjem količine teksta i izbacivanjem tablica. SEO je postupak optimizacije internetskog sjedišta (sadržaj i struktura) i ostvarivanje kvalitetnih linkova prema internetskom sjedištu, a cilj je postizanje bolje organske pozicije na tražilicama. Rezultati istraživanja koje je proveo Google pokazuju da 97% korisnika tražilice ne gleda rezultate iza desetog mjesta. Kako većina kupaca dolazi do internetskih sjedi-šta putem tražilica SEO, proces je ključan za privlačenje korisnika. Problem je što Google algo-ritam za određivanje važnosti internetskog sjedišta koristi preko 200 čimbenika, a nemoguće je izvršiti optimizaciju svih. Svi ovi čimbenici djeluju zajedno i teško je odrediti koji od navedenih čimbenika ima veću važnost.

E-MARKETING

166

7.6. Financiranje poslovnog poduhvata

PROCJENA TROŠKOVA POKRETANJA I POSLOVANJA

Osoba koja pokreće poslovni poduhvat mora biti upoznata sa svim troškovima koji se tijekom poslovanja pojavljuju. Upravo je nerealno sagledavanje i procjena troškova jedna od najvećih i najčešćih pogrešaka u pokretanju poslovanja. Troškovi se definiraju kao novac (vrijednost) koji se ulaže u proizvodnju i prodaju proizvoda/usluga. Troškovi se moraju znati da bi se odredile cijene proizvoda/usluga, da bi se kontrolirale i reducirale u donošenju boljih poslovnih odluka i da bi se mogla lakše planirati budućnost. Visina troškova ovisi o vrsti posla kojom se pojedinac želi baviti i o pravnom obliku poslovanja. Troškovi su:

a) troškovi osoblja: neto plaća zaposlenika uvećana za doprinose na i doprinose iz plaće te porez i prirez.

b) materijalni troškovi: svi troškovi vezani uz nabavu sirovina i materijala, sitnog inventara, rezervnih dijelova, energiju, gorivo. Troškovi se izračunaju tako da se pomnoži količina sirovina, materijala, gotovih proizvoda, energije i drugih materijalnih inputa s njihovom nabavnom cije-nom.

c) troškovi kapitala: svi troškovi vezani uz posuđeni novac (kamate na kreditna sredstva, prekoračenje na žiro-računu i amortizacija).

d) ostali troškovi: troškovi vode, struje, telefona, grijanja, uredskog materijala, najamnina, marketinga, osiguranja, članarine HOK i HGK, računovodstvenog servisa, bankovne naknade, poreza na tvrtku i ostalo.

Troškovi se dijele na fiksne i varijabilne. Fiksni se troškovi javljaju neovisno o tome obavlja li se djelatnost ili ne. To su troškovi najamnine, osiguranja, telefonska pretplata, leasing, kamate itd. Varijabilni troškovi su direktno vezani uz samu djelatnost i u ovisnosti su s količinom proizvodnje (sirovine, energija, transportni troškovi itd.).

PRAVNI OBLICI

Pri odabiru se pravnog oblika u obzir treba uzeti: djelatnost koju će osoba obavljati, odgovor-nost, porez, način vođenja poslovnih knjiga i troškova i složenost registracije.

OBRT

Obrt je samostalno i trajno obavljanje dopuštenih gospodarskih djelatnosti od strane fizičke osobe sa svrhom ostvarivanja dohotka, a koji se ostvaruje proizvodnjom, prometom ili pruža-njem usluga na tržištu.

Tri su vrste obrta:

a) Vezani su obrti oni obrti za čije se obavljanje traži određena stručna sprema, ispit o stručnoj osposobljenosti ili majstorski ispit (npr. frizer). Svi su vezani obrti navedeni u Pravilniku o vezanim i povlaštenim obrtima i načinu izdavanja povlastica [20].

b) Slobodni su obrti svi obrti koji nisu navedeni u pravilniku i za njihovo obavljanje nije važna stručna sprema niti je potrebno imati ispit o stručnoj osposobljenosti ili majstorski ispit.

FINANCIRANJE POSLOVNOG PODUHVATA

167

c) Povlašteni se obrti smiju obavljati samo na temelju povlastice koju izdaje nadležno mi-nistarstvo (ribarstvo, rudarstvo, proizvodnja i prodaja oružja).

Troškovi osnivanja

Obrti se osnivaju u Uredima državne uprave i Službi za gospodarstvo. Troškovi osnivanja su obrtnica (200,00 kn) i upravna pristojba (270,00 kn). Djelatnosti trgovine i ugostiteljstva trebaju dodatnu potvrdu kojom se dokazuje da su zadovoljeni minimalno-tehnički uvjeti za rad (uprav-na pristojba 420,00 kn).

Trošak doprinosa i poreza

Ako osoba nije zaposlena ili osigurana po nekoj drugoj osnovi (npr. kod poslodavca), dužna je obračunavati i uplaćivati doprinose za mirovinsko i zdravstveno osiguranje. Osnovica za utvrđi-vanje navedenih doprinosa mijenja se svake godine. Za 2013. godinu osnovica iznosi 5.133,55 kn. Prema navedenoj bi osnovici mjesečna davanja za doprinose iznosila 1.720,71 kn. Prvu go-dinu poslovanja obrtnik početnik ne plaća porez na dohodak, a nakon podnošenja prve pore-zne prijave, određuje se iznos poreza i prireza koji obrtnik mora platiti za prethodnu godinu. Određuje mu se i iznos akontacije poreza i prireza za sljedeću godinu. Obrtnici su obvezni plaćati članarinu Hrvatskoj obrtničkoj komori. Obrtnici s područja grada Osijeka plaćaju članarinu u iznosu od 93,00 kn mjesečno (uplaćuje se tromjesečno). Obrtnici su obveznici poreza na doho-dak (stope 12%, 25% i 40 %) i na zahtjev mogu postati obveznici poreza na dobit (20 %).

Sljedeće su prednosti osnivanja obrta:

a) brzina i niski troškovi osnivanja

b) podizanje novca sa žiro računa bez ikakvog pravdanja (svi novci koji nisu opravdani porezno priznatim troškovima, smatraju se dohotkom i oporezuju se)

c) jednostavnije i jeftinije knjigovodstvo

d) PDV se plaća samo ako je naplaćen od kupaca

e) jednostavnije i jeftinije mijenjanje podataka (promjena adrese, djelatnosti i sl.).

f) brzina i niski troškovi zatvaranja obrta

J.D.O.O.

Izmjenama Zakona o trgovačkim društvima, otvorena je mogućnost osnivanja jednostavnog društva s ograničenom odgovornošću. Jednostavni d.o.o. ima većinu obilježja d.o.o., ali se razli-kuje od d.o.o. jer ima smanjeni prag temeljnog kapitala (deset kuna), smanjene troškove osni-vanja i ubrzani postupak osnivanja. Jednostavni d.o.o. ima zakonske rezerve u koje mora unijeti četvrtinu iznosa dobiti društva iskazane u godišnjim financijskim izvješćima umanjene za iznos gubitka iz prethodne godine.

Troškovi osnivanja j.d.o.o.

Prvi je korak u osnivanju j.d.o.o. odabir imena za tvrtku, a nakon toga odlazak u servis HITRO.HR ili ured javnog bilježnika. Kod javnog se bilježnika potpisuje i ovjerava sva potrebna dokumenta-


168

cija za osnivanje tvrtke (Zapisnik o osnivanju, Prijava za upis društva u sudski registar i potvrda o nepostojanju duga). Trošak javnog bilježnika iznosi 500,00 kn, a ovjera izjave o nepostojanju dugovanja 47,50 kn. Sa svom se dokumentacijom odlazi u banku, otvara se račun i uplaćuje se temeljni kapital u minimalnom iznosu od deset kuna.

Treba se uplatiti i sudska pristojba u iznosu od 60,00 kn i naknada za objavu oglasa u Narodnim novinama u iznosu od 200,00 kn. Ponovno se odlazi u ured javnog bilježnika sa svom dokumen-tacijom i podnosi se zahtjev za osnivanje j.d.o.o. Ako je cjelokupna dokumentacija ispravna, Registar Trgovačkog suda mora u roku od 24 sata dostaviti rješenje o osnivanju. Ukupan trošak osnivanja j.d.o.o. iznosi 807,50 kn.

S rješenjem o registraciji odlazi se u HITRO.HR i popunjava se obrazac za dobivanje Obavijesti o razvrstavanju poslovnog subjekta prema NKD (Nacionalna klasifikacija djelatnosti). HITRO.HR šalje obrazac u Državni zavod za statistiku koji za jedan dan šalje Obavijest o razvrstavanju poslovnog subjekta prema NKD.

D.O.O.

Trgovačko društvo je pravna osoba koja samostalno i trajno obavlja gospodarsku djelatnost kako bi ostvarila dobiti proizvodnjom, prometom robe ili pružanjem usluga na tržištu. D.o.o. je trgo-vačko društvo u koje jedna ili više pravnih ili fizičkih osoba ulažu svoje temeljne uloge i sudjeluju u unaprijed dogovorenom temeljnom kapitalu (glavnici).

Troškovi osnivanja d.o.o.

Društvo se s ograničenom odgovornošću osniva na temelju Izjave o osnivanju (ako društvo osni-va samo jedna osoba) ili Društvenog ugovora (ako postoji više osnivača), a oba se sastavljaju kod javnog bilježnika. Prvi je korak u osnivanju d.o.o. prikupljanje osnovnih informacija o osnivanju, obrazaca i uplatnica na HITRO.HR. Javni bilježnik izrađuje cjelokupnu dokumentaciju za osniva-nje, a cjelokupni troškovi iznose oko 2.500,00 kn. Ostali su troškovi: sudska pristojba (400,00 kn), objava oglasa u Narodnim novinama (900,00 kn), potvrda o uplati osnivačkog uloga (39,00 kn), obavijest o razvrstavanju (25,00 kn) te online osnivanje (100,00 kn). Za osnivanje d.o.o. po-trebno je imati 20.000,00 kn osnivačkog kapitala koji se polaže na račun tvrtke. Osnivački ulog može biti u novcima ili stvarima: ulog u novcu mora iznositi minimalno 10.000,00 kn, a ako su ulog stvari, nužna je procjena.

Trošak doprinosa i poreza

Ako je osoba nezaposlena i otvara d.o.o., nije obvezna biti u radnom odnosu, ali obvezna je plaćati doprinose na poduzetničku plaću. Osnovica za obračun doprinosa iznosi 8.653,70 kn, a doprinosi za mirovinsko i zdravstveno osiguranje 2.911,97 kn. Međutim, osoba se može prija-viti i na manju osnovicu, a doprinosi se uplaćuju ovisno o visini iznosa plaće. D.o.o. i j.d.o.o. su obveznici poreza na dobit koji iznosi 20 %. Sve su tvrtke obvezne plaćati i prirez na porez (visina se određuje ovisno o mjestu registracije; npr. za Osijek je prirez 13 %). D.o.o. je obvezan plaćati članarinu HGK-u u iznosu od 55,00 kn (za male poslovne subjekte).


169

PROCJENA CIJENA PROIZVODA/USLUGA

Kalkulacija je izračunavanje ukupnih troškova proizvodnje i prodaje proizvoda ili pružanja usluga.

IZRAČUN TOČKE POKRIĆA

Točka pokrića je točka u kojoj su prihodi jednaki rashodima, tj. koliko se proizvoda ili usluga mora prodati da bi se bilo na ništici.

AMORTIZACIJA

„Amortizacija je gubitak vrijednosti opreme i strojeva u dugotrajnoj imovini poduzeća i kao takva predstavlja trošak. Obračunava se na dugotrajnu imovinu, čija je pojedinačna nabavna vrijednost veća od 2.000,00 kn. Osnovna sredstva amortiziraju se prema vijeku trajanja, odno-sno stopi amortizacije“ [21].

Financiranje poslovnog poduhvata

Prije pokretanja poslovanja procjenjuje se vrijednost cjelokupne investicije, tj. iznos koji je do-voljan za neometano poslovanje. Sljedeći je korak pronalaženje izvora sredstva za financiranje poslovnog poduhvata, a neki od izvora su:

a) vlastita sredstva

b) posudba od obitelji i prijatelja

c) kreditna sredstva

d) poslovni anđeli

e) leasing

f) državne potpore


170

8. LITERATURA

[1] Dribbble LLC, www.dribble.com

[2] Android Developers, www.developers.android.com

[3] GIMP (GNU Image Manipulation Program), www.gimp.org

[4] Color Scheme Designer, www. colorschemedesigner.com

[5] Colors on the Web, Color Wizard, www.colorsontheweb.com/colorwizard.asp

[6] http://docs.oracle.com/javase/tutorial/java/nutsandbolts/variables.html

[7] http://www.tutorialspoint.com/java/java_basic_operators.htm

[8] http://docs.oracle.com/javase/tutorial/java/nutsandbolts/if.html

[9] http://docs.oracle.com/javase/tutorial/java/javaOO/methods.html

[10] http://docs.oracle.com/javase/tutorial/java/IandI/abstract.html

[11] http://www.techotopia.com/index.php/Understanding_Android_Views,_View_Gro ups_and_Layouts

[12] http://developer.android.com/training/basics/supporting-devices/languages.html

[13] http://developer.android.com/training/basics/supporting-devices/screens.html

[14] http://developer.android.com/training/basics/activity-lifecycle/index.html

[15] http://developer.android.com/training/basics/activity-lifecycle/starting.html

[16] http://developer.android.com/training/basics/activity-lifecycle/recreating.html

[17]. American Marketing Association (AMA), definicija marketinga, Listopad 2007, http://www.marketingpower.com/AboutAMA/Pages/DefinitionofMarketing.aspx

[18]. Grbac, B., Identitet marketinga, Ekonomski fakultet Rijeka, str 355, 2006.

[19]. Kotler, Ph. i Keller, K.L., Upravljanje marketingom, dvanaesto izdanje, Mate, Zagreb, str. 24, 2006

[20]. Hrvatska obrtnička komora (HOK), http://www.hok.hr/cro/o_hok_u/propisi/ pravilnik_o_vezanim_i_povlastenim_obrtima_i_nacinu_izdavanja_povlastica

[21]. Orkis, http://www.orkis.hr/Stope-amortizacije~1

LITERATURA

171

9. POPIS SLIKASlika 1. Newtonov „kotač boja“ ............................................................................................................................................................2

Slika 2. Alati za izbor boja .....................................................................................................................................................................3

Slika 3. Primjeri vintage dizajna kod izrade UI-a i logotipa [1] ..............................................................................................................3

Slika 4. Primjeri logotipa [1] .................................................................................................................................................................4

Slika 5. Primjer smjernica izvedenih iz imena tvrtke ili pojedinca .......................................................................................................4

Slika 6. Nekoliko prijedloga logotipa za istu tvrtku [1] ..........................................................................................................................5

Slika 7. Veze između vizualnog identiteta i izgleda aplikacije [1] ..........................................................................................................6

Slika 8. Razne veličine Android uređaja [2] ..........................................................................................................................................6

Slika 9. Primjer veličine jedne ikone za različite gustoće piksela [2] .....................................................................................................6

Slika 10. Odnosi veličine ekrana mobilnog telefona i tablet računala [2] .............................................................................................7

Slika 11. Optimalna veličina nekog „klikabilnog“ elementa sučelja [2] ................................................................................................7

Slika 12. Primjeri izbornika i sadržaja [1] ..............................................................................................................................................8

Slika 13. Primjeri dviju vrsta izbornika [1].............................................................................................................................................8

Slika 14. Od skice na papiru do gotovog sučelja [1] ..............................................................................................................................9

Slika 15. Primjer stanja gumba ...........................................................................................................................................................10

Slika 16. Primjer dizajna koji je prilagođen korisniku [2] ....................................................................................................................10

Slika 17. Primjeri nekih bezvremenskih inačica dizajna [2] ................................................................................................................11

Slika 18: Primjeri digitalnog oblika koncepta, tj. wireframe ..............................................................................................................12

Slika 19: Primjer postavljanja smjernica .............................................................................................................................................12

Slika 20. Koraci u izradi koncepta, tj. wireframea ...............................................................................................................................12

Slika 21. Animacija od prve do zadnje sličice [1] ................................................................................................................................13

Slika 22. Dizajn aplikacije ....................................................................................................................................................................14

Slika 23. Primjer ikona [2] ...................................................................................................................................................................14

Slika 24. Primjer dviju standardnih tema Android sustava [2] ............................................................................................................15

Slika 25. Primjer efekta nakon dodira prstom [2] ...............................................................................................................................15

Slika 26. Primjer dimenzionalnih odredbi i raspored elemenata[2] ...................................................................................................15

Slika 27. Izgled Roboto službenog fonta [2] ........................................................................................................................................16

Slika 28. Predefinirane veličine teksta [2] ...........................................................................................................................................17

Slika 29. Primjeri raspona boja ...........................................................................................................................................................17

Slika 30. Primjer ikona, tj. dubine kod početnog zaslona [2] ..............................................................................................................17

Slika 31. Ikona za alatnu traku ima propisanu veličinu 32x32dp [2] ...................................................................................................18

Slika 32. Korisničko sučelje GIMP-a: 1. Traka s alatima; 2. Radna površina; 3. Traka s bojama i slojevima........................................18

Slika 33. Postavljanje novog dokumenta u GIMP-u ............................................................................................................................19

Slika 34. Postavljanje alata u GIMP-u: 1. označava se „Rectangle selection tool“; 2. u postavkama „Rectangle selection tool“ označa-va se da kvadrat ima zaobljen rub, a nakon toga se zadaje polumjer od 12px; 3. držanjem lijevog klika na mišu i povlačenjem miša preko radne površine ocrtava se osnovni oblik kvadrata sa zaobljenim rubom .................................................................................20

Slika 35. Postavljanje alata za bojenje u GIMP-u: 1. označava se „Bucket fill tool“ i otvara se dijalog za izmjenu boje ispune; 2. u otvorenom dijalogu odabire se boja za ispunu objekta; 3. klikom unutar granica objekta (iscrtan dio) nanosi se boja ispune čime završava bojanje objekta ....................................................................................................................................................................20

Slika 36. Kopiranje objekta u GIMP-u: 1. klikom na tipku za kopiranje „Layera“, odnosno sloja radi se kopija objekta; 2. klikom na tipku (simbol oka) pored kopiranog sloja skriva se kopija od pogleda ...............................................................................................21

Slika 37. Blur filter u GIMP-u: 1. u glavnom se izborniku bira Filters; 2. u padajućem se izborniku obilježava Blur i klika se na Gaussian Blur ..................................................................................................................................................................................................... 21

Slika 38. Blur filter u GIMP-u: 1. u novootvorenom dijalogu postavljaju se vrijednosti blur po horizontalnoj i vertikalnoj osi; 2. priti-skom na tipku OK dodajemo efekt na naš objekt ...............................................................................................................................22

POPIS SLIKA

172

Slika 39. Izgled jedne gotove ikone sa zaobljenim rubovima i sjenom na Android uređaju s određenom pozadinskom slikom. .......22

Slika 40. Primjer obavijesti dolazne poruke .......................................................................................................................................23

Slika 41. Primjer jedne alatne trake koja sadrži osnovne alate: pretraga, opcije itd. [2] ....................................................................23

Slika 42. Primjer Swipe View navigacije pokretom u lijevo [2] ...........................................................................................................24

Slika 43. Confirming & Acknowledging [2] .........................................................................................................................................24

Slika 44. Najpopularniji primjeri widgeta [2] ......................................................................................................................................24

Slika 45. Primjeri Reusable UI elemenata [1] ......................................................................................................................................25

Slika 46. Google Play i Scrollable tabs .................................................................................................................................................26

Slika 47. Primjer fiksnih kartica (Fixed tabs) .......................................................................................................................................26

Slika 48. Liste s jednim i više redova podataka ...................................................................................................................................27

Slika 49. Primjer rešetke s vertikalnim pomakom ...............................................................................................................................27

Slika 50. Rešetke sa slikom i naslovima ..............................................................................................................................................28

Slika 51. Primjer spinnera u formi ili alatnoj traci ...............................................................................................................................28

Slika 52. Primjer malog i velikog gumba .............................................................................................................................................29

Slika 53. Primjer gumba bez ruba .......................................................................................................................................................29

Slika 54. Primjer tekstualnog unosa ...................................................................................................................................................30

Slika 55. Primjer klizača u standardnim Android 4.0 temama ............................................................................................................30

Slika 56. Traka napretka sa standardnom temom Android 4.0 sustava ..............................................................................................31

Slika 57. Traka aktivnosti sa standardnom temom Android 4.0 sustava .............................................................................................31

Slika 58. Lijevo je prikazan neispravan, a desno ispravan način prikazivanja kružnog indikatora .......................................................31

Slika 59. Unikatni indikator napretka ..................................................................................................................................................32

Slika 60 Prikaz checkboxa i izgled svih njegovih stanja .......................................................................................................................32

Slika 61. Prikaz radio buttona i izgled svih njegovih stanja .................................................................................................................32

Slika 62. Prikaz on/off gumba i izgled svih njegovih stanja .................................................................................................................33

Slika 63. Primjer dijaloga ....................................................................................................................................................................33

Slika 64. Nekoliko različitih verzija dijaloga.........................................................................................................................................34

Slika 65. Prikaz standardnog Pickera koji je smješten u dijalogu .......................................................................................................34

Slika 66. Prikaz specijalnog pickera: vrijeme i datum .........................................................................................................................34

Slika 67. Back ili tipka za povratak na prijašnji sadržaj........................................................................................................................35

Slika 68. Primjer rada Back tipke kao dijela aplikacije i kao dijela uređaja .........................................................................................35

Slika 69. Primjer navigacije kroz sučelje widgeta ................................................................................................................................36

Slika 70. Primjer distorzije na gumbu s unikatnom grafikom .............................................................................................................38

Slika 71. Izgled datoteka za različite gustoće zaslona .........................................................................................................................38

Slika 72. Izgled početnog zaslona aplikacije za izradu 9.png grafika ...................................................................................................39

Slika 73. Izgled zaslona aplikacije za izradu 9.png grafika nakon dodavanja grafike ...........................................................................39

Slika 74. Dodavanje točaka koje kontroliraju širenje slike ..................................................................................................................40

Slika 75. Raspored elemenata u horizontalnom layoutu ....................................................................................................................42

Slika 76. Raspored elemenata u Relative layoutu ...............................................................................................................................43

Slika 77. Opći oblik jednodimenzionalnog polja .................................................................................................................................51

Slika 78. Ispis stanja objekta ormar u konzoli .....................................................................................................................................55

Slika 79. Ispis opsega dviju kružnica u konzoli ....................................................................................................................................56

Slika 80. U drugoj klasi nije moguće pozvati private metode .............................................................................................................57

Slika 81. Instalacija Android SDK plugina ............................................................................................................................................66

Slika 82. Android SDK Manager ..........................................................................................................................................................67

173

Slika 83. Kreiranje Android emulatora ................................................................................................................................................68

Slika 84. Kreiranje Android projekta ...................................................................................................................................................68

Slika 85.Arhitektura Android projekta ................................................................................................................................................70

Slika 86. Hello World aplikacija ...........................................................................................................................................................71

Primjer 51. XML element podržava veći broja atributa ......................................................................................................................73

Slika 87. Odnos strukture objekata i XML strukture ...........................................................................................................................73

Slika 88. Spajanje XML layouta u aktivnost ........................................................................................................................................74

Slika 89. Micanje Title Bar programski ...............................................................................................................................................75

Slika 89. Pokretanje aktivnosti u emulatoru .......................................................................................................................................81

Slika 90. Životni ciklus aktivnosti [15] .................................................................................................................................................82

Slika 91. Android Log s prikazom ispisanih vrijednosti u svakom stanju životnog ciklusa ..................................................................84

Slika 92.Spremanje i ponovno kreiranje stanja aktivnosti [16] ...........................................................................................................85

Slika 93. Direktoriji i datoteke za lokalizaciju .....................................................................................................................................86

Slika 94. Direktoriji za slike za uređaje različitih gustoća ekrana ........................................................................................................88

Slika 95. Aktivnost koja sadrži dva fragmenta ....................................................................................................................................91

Slika 96. Dretve jedne Android aplikacije ...........................................................................................................................................92

Slika 97 Preference Activity.................................................................................................................................................................97

Slika 98. Dohvaćanje vrijednosti iz Shared Preferences ......................................................................................................................98

Slika 99. ListView sa stavkama gradova ..............................................................................................................................................99

Slika 100. ListView koji reagira na pritisak korisnika .........................................................................................................................101

Slika 101. Primjer izgleda stavke ListViewa ......................................................................................................................................104

Slika 102. ListView s vlastitim adapterom.........................................................................................................................................106

Slika 103. HotelDetalsActivity aktivnost ...........................................................................................................................................108

Slika 104. Action Bar .........................................................................................................................................................................109

Slika 105. Prikaz menija s atributom ifRoom ....................................................................................................................................110

Slika 106. Prikaz menija s atributom never .......................................................................................................................................110

Slika 107. Action Bar s tab navigacijom ............................................................................................................................................115

Slika 108. Odabrani Tab1 ..................................................................................................................................................................117

Slika 109. Odabrani Tab2 ..................................................................................................................................................................117

Slika 110. Odnos atributa objekta i stupaca u tablici ........................................................................................................................118

Slika 111. Prvotna pozicija Cursor objekta ........................................................................................................................................121

Slika 112. Aktivnost unosa podataka o osobi ...................................................................................................................................122

Slika 113. Popis svih osoba iz baze ...................................................................................................................................................124

Slika 114. Prikaz vrijednosti akcelerometra ......................................................................................................................................127

Slika 115. Postavljanje Google Maps API-a .......................................................................................................................................128

Slika 116. Google Play Services biblioteka u SDK Manageru ............................................................................................................128

Slika 117. Dodavanje biblioteke u aplikaciju .....................................................................................................................................129

Slika 118. Kreiranje projekta na Google konzoli ...............................................................................................................................129

Slika 119. Postavljanje korištenja Google Maps Android API v2 u Google konzoli ...........................................................................130

Slika 120. Dijalog za upisivanje SHA1 ključa + package .....................................................................................................................130

Slika 121. Generiranje SHA1 ključa preko CMD ................................................................................................................................131

Slika 122. Package koji se treba upisati zajedno sa SHA1 ključem ....................................................................................................131

Slika 123 Unos SHA1 ključa + package u Google konzolu .................................................................................................................132

Slika 124. Generirani API key u Google konzoli ................................................................................................................................132

174

Slika 125. Prikaz Android Google Maps API v2 .................................................................................................................................135

Slika 126. Pokrenute aplikacije na uređaju .......................................................................................................................................136

Slika 127. Ponašanje Android stoga ..................................................................................................................................................137

Slika 128. Item element u RSS-u .......................................................................................................................................................139

Slika 129. Opći izgled RSS-a ..............................................................................................................................................................141

Slika 130. Lista elemenata kada je inline = false ...............................................................................................................................142

Slika 131. Splash Activity ..................................................................................................................................................................147

Slika 132. Izgled NewsListActivity aktivnosti .....................................................................................................................................151

Slika 133. Izgled NewsDetailsActivity aktivnosti ...............................................................................................................................155

Slika 134. Zamjena launcher ikone u manifestu ...............................................................................................................................156

175

10. POPIS TABLICATablica 1. Aritmetički operatori ......................................................................................................................................................... 47

Tablica 2. Relacijski operatori ............................................................................................................................................................ 47

Tablica 3. Logički operatori ................................................................................................................................................................ 48

Tablica 4. Poduzetničke vještine i osobine ....................................................................................................................................... 159

176

11. POPIS PRIMJERAPrimjer 1. Parametri metode ............................................................................................................................................................. 47

Primjer 2. If-then naredba ................................................................................................................................................................. 48

Primjer 3. If-then naredba u jednom retku ....................................................................................................................................... 48

Primjer 4. If-then-else naredba ......................................................................................................................................................... 49

Primjer 5. If-the-else grananje ........................................................................................................................................................... 49

Primjer 6. Switch naredba ................................................................................................................................................................. 49

Primjer 7. While petlja ....................................................................................................................................................................... 50

Primjer 8. Neograničena while petlja ................................................................................................................................................ 50

Primjer 9. Do-while petlja.................................................................................................................................................................. 50

Primjer 10. Opći oblik for petlje ........................................................................................................................................................ 50

Primjer 11. For petlja ......................................................................................................................................................................... 50

Primjer 12. Popunjavanje i indeksiranje polja ................................................................................................................................... 51

Primjer 13. Popunjavanje polja u deklaraciji ..................................................................................................................................... 51

Primjer 14. Polje u polju (dvodimenzionalno polje) .......................................................................................................................... 52

Primjer 15. Opći oblik dvodimenzionalnog polja ............................................................................................................................... 52

Primjer 16. Pretvaranje ulaznih jedinica u izlazne ............................................................................................................................. 52

Primjer 17. Metoda s dva parametra ................................................................................................................................................ 53

Primjer 18. Potpis metode ................................................................................................................................................................. 53

Primjer 19. Primjeri naziva metoda ................................................................................................................................................... 53

Primjer 20. Preopterećivanje metoda ............................................................................................................................................... 53

Primjer 21. Klasa ormar ..................................................................................................................................................................... 54

Primjer 22. Izmjena stanja objekta kroz metode ............................................................................................................................... 54

Primjer 23. Klasa kružnica s metodom izračunajOpseg() .................................................................................................................. 55

Primjer 24. Računanje opsega dviju različitih kružnica ...................................................................................................................... 55

Primjer 25. Private i public metode Kružnice .................................................................................................................................... 57

Primjer 26. Klasa kružnica ................................................................................................................................................................. 58

Primjer 27. Dodjeljivanje jednostavnog tipa podataka ...................................................................................................................... 58

Primjer 28. Dodjeljivanje vlastitog tipa podataka .............................................................................................................................. 58

Primjer 29. Direktni pristup varijabli ................................................................................................................................................. 59

Primjer 30. Enkapsulacija varijabli ..................................................................................................................................................... 59

Primjer 31. Pristup varijabli preko set metode .................................................................................................................................. 59

Primjer 32. Konstruktor kružnice s parametrima koordinata i polumjerom ...................................................................................... 60

Primjer 33. Konstruiranje objekta pomoću vlastitog konstruktora.................................................................................................... 60

Primjer 34. Klasa s većim brojem konstruktora ................................................................................................................................. 60

Primjer 35. Kreiranje objekta s osnovnim konstruktorom ................................................................................................................. 60

Primjer 36.Klasa Zaposlenik............................................................................................................................................................... 61

Primjer 37. Klasa Inženjer nasljeđuje klasu Zaposlenik ..................................................................................................................... 62

Primjer 38. Apstraktna klasa pomakni ............................................................................................................................................... 62

Primjer 39. Apstraktna klasa s apstraktnom metodom ..................................................................................................................... 62

Primjer 40. Klasa Zaposlenik koja će služiti kao nadklasa .................................................................................................................. 62

Primjer 41. Klasa Inženjer mora implementirati apstraktne metode ................................................................................................ 63

Primjer 42. Metoda printDescription() .............................................................................................................................................. 63

177

Primjer 43.Klasa Inženjer ................................................................................................................................................................... 64

Primjer 44. Klasa Arhitekt .................................................................................................................................................................. 64

Primjer 45. Polimorfizam:sva su tri zaposlenika istog tipa, ali su instancirani kao različiti objekti .................................................... 65

Primjer 46. Metoda kao parametar prima tip Zaposlenik ................................................................................................................. 65

Primjer 47. U metodu se mogu slati sve podklase klase Zaposlenik ................................................................................................. 65

Primjer 48 Najmanja i najviša podržana verzija OS-a u manifestu .................................................................................................... 70

Primjer 49. Definiranje aktivnosti u manifestu .................................................................................................................................. 70

Primjer 50. Identifikator activity_main layouta ................................................................................................................................. 72

Primjer 51. osnovni XML element ..................................................................................................................................................... 72

Primjer 52. XML atribut elementa ..................................................................................................................................................... 72

Primjer 53. XML element koji je istovremeno otvoren i zatvoren ..................................................................................................... 73

Primjer 54. XML prikaz strukture podataka ....................................................................................................................................... 73

Primjer 55. Button View u Android XML-u ........................................................................................................................................ 74

Primjer 56. Micanje Title Bara u manifestu ....................................................................................................................................... 75

Primjer 57. Definiranje XML layouta .................................................................................................................................................. 76

Primjer 58 Definiranje string resursa u string.xml datoteci ............................................................................................................... 77

Primjer 59. Referenciranje string resursa u TextViewu ...................................................................................................................... 77

Primjer 60. XMl layout datoteka s Buttonom .................................................................................................................................... 78

Primjer 61. Pokretanje aktivnosti pomoći Intent objekta .................................................................................................................. 79

Primjer 62. XML layout datoteka druge aktivnosti ............................................................................................................................ 80

Primjer 63. Aktivnost koja se pokreće pomoću Intent objekta .......................................................................................................... 80

Primjer 64 Definiranje aktivnosti u manifestu ................................................................................................................................... 81

Primjer 65. Ispis stanja životnog ciklusa aktivnosti u Log .................................................................................................................. 83

Primjer 66. Primjer lokalizacije za engleski jezik ................................................................................................................................ 86

Primjer 67. Primjer lokalizacije za španjolski jezik ............................................................................................................................. 86

Primjer 68. Primjer lokalizacije za francuski jezik .............................................................................................................................. 87

Primjer 69. Definiranje fragmenta u layout XMLu ............................................................................................................................. 89

Primjer 70. Definiranje XML layout datoteke za fragment ................................................................................................................ 89

Primjer 71. Kreiranje FirstFragment klase ......................................................................................................................................... 90

Primjer 72. Definiranje dva fragmenta u layout aktivnosti ................................................................................................................ 90

Primjer 73. XML layout prvog fragmenta .......................................................................................................................................... 91

Primjer 74. XML layout drugog fragmenta ........................................................................................................................................ 91

Primjer 75. Kreiranje MyAsyncTask klase .......................................................................................................................................... 93

Primjer 76 Ugniježđena MyAsyncTask klasa ...................................................................................................................................... 94

Primjer 77. Pokretanje asinkronog poziva ......................................................................................................................................... 95

Primjer 78.. XML layout za aktivnost korisničkih postavki ................................................................................................................. 96

Primjer 79. Kreiranje PrefActivity klase ............................................................................................................................................. 97

Primjer 80. XML layout aktivnosti koja sadrži ListVIew ..................................................................................................................... 98

Primjer 81. Kreiranje adaptera u aktivnosti i postavljanje u ListView ................................................................................................ 99

Primjer 82. Postavljanje OnItemClickListener na ListView .............................................................................................................. 100

Primjer 83. Klasa Hotel .................................................................................................................................................................... 101

Primjer 84. Postavljanje vrijednosti u Bundle objekt ....................................................................................................................... 102

Primjer 85. Postavljanje serijaliziranog objekta u Bundle objekt .................................................................................................... 102

Primjer 86.. Popunjavanje liste, instanciranje adaptera i popunjavanje ListViewa ......................................................................... 103

178

Primjer 87. Definiranje XML layouta za izgled stavke ListViewa ...................................................................................................... 104

Primjer 88. Kreiranje vlastitog adaptera .......................................................................................................................................... 105

Primjer 89. Postavljanje OnItemClickListenera na ListView ............................................................................................................. 107

Primjer 90. Kreiranje HotelDetailsActivity klase .............................................................................................................................. 108

Primjer 91. Kreiranje ListActivity aktivnosti ..................................................................................................................................... 109

Primjer 92. Menu s jednim gumbom ............................................................................................................................................... 110

Primjer 93. Učitavanje menija ......................................................................................................................................................... 111

Primjer 94. Rukovanje odabira elemenata u meniju ....................................................................................................................... 111

Primjer 95. Postavljanje Home elementa kao navigaciju unazad .................................................................................................... 112

Primjer 96. Kreiranje tabova kao tipove navigacije ......................................................................................................................... 113

Primjer 97. Klasa s Tab navigacijom ................................................................................................................................................. 114

Primjer 98. Main Activity s izmjenom fragmenata u tabovima ....................................................................................................... 116

Primjer 99. Android SQLiteOpenHelper klasa .................................................................................................................................. 119

Primjer 100. PersonDataSource klasa .............................................................................................................................................. 120

Primjer 101. Person klasa ................................................................................................................................................................ 122

Primjer 102. Aktivnost za unos podataka u bazu ............................................................................................................................. 123

Primjer 103. Čitanje podataka iz baze i učitavanje u listu................................................................................................................ 124

Primjer 104. Korištenje senzora....................................................................................................................................................... 126

Primjer 105. Meta data element za manifest .................................................................................................................................. 132

Primjer 106. Permission element za manifest ................................................................................................................................. 133

Primjer 107. Uses feature element za OpenGL ES 2 ........................................................................................................................ 133

Primjer 108. Manifest sa svim potrebnim elementima za korištenje Android Google Maps API v2 ............................................... 134

Primjer 109.Referenciranje Map fragmenta u layoutu aktivnosti ................................................................................................... 135

Primjer 110. Aktivnost koja sadrži Google mape ............................................................................................................................. 135

Primjer 111. RSS klasa ..................................................................................................................................................................... 141

Primjer 112. Channel klasa .............................................................................................................................................................. 142

Primjer 113. Item klasa .................................................................................................................................................................... 143

Primjer 114. Enclosure klasa ............................................................................................................................................................ 144

Primjer 115. DalmacijaNewsLIstener interface ............................................................................................................................... 144

Primjer 116. Asinkrono skidanje i parsiranje RSS-a ......................................................................................................................... 145

Primjer 117. Splash Activity klasa .................................................................................................................................................... 146

Primjer 118.. Layout SplashActivity aktivnosti ................................................................................................................................ 147

Primjer 119. NewsListActivity klasa ................................................................................................................................................. 148

Primjer 120. list_item_dalmacija_news layout datoteka ................................................................................................................ 149

Primjer 121. DalmacijaNewsAdapter klasa ..................................................................................................................................... 150

Primjer 122.NewsListActivity aktivnost s ListItemClick listenerom ................................................................................................. 152

Primjer 123. Activity_news_details layout datoteka ....................................................................................................................... 153

Primjer 124. NewsDetailsActivity klasa ........................................................................................................................................... 154

Documents

Skripta - Dizajn i Programiranje Mobilnih Aplikacija