Preddiplomski studij

Diplomski studij

Ak.g. 2012./2013.

Razvoj usluga i aplikacija za

operacijski sustav Android

Zaštićeno licencom http://creativecommons.org/licenses/by-nc-sa/2.5/hr/

7. 11. 2012.

5.

Elementi grafičkog sučelja u Androidu

Zaštićeno licencom http://creativecommons.org/licenses/by-nc-sa/2.5/hr/

Creative Commons

slobodno smijete: dijeliti — umnožavati, distribuirati i javnosti priopćavati djelo

remiksirati — prerađivati djelo

pod sljedećim uvjetima: imenovanje. Morate priznati i označiti autorstvo djela na način kako je

specificirao autor ili davatelj licence (ali ne način koji bi sugerirao da Vi ili Vaše korištenje njegova djela imate njegovu izravnu podršku).

nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe.

dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristeći ga, preradu možete distribuirati samo pod licencom koja je ista ili slična ovoj.

U slučaju daljnjeg korištenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete

ovog djela. Najbolji način da to učinite je linkom na ovu internetsku stranicu.

Od svakog od gornjih uvjeta moguće je odstupiti, ako dobijete dopuštenje nositelja autorskog prava.

Ništa u ovoj licenci ne narušava ili ograničava autorova moralna prava.

Tekst licencije preuzet je s http://creativecommons.org/.

7. 11. 2012.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Android aplikacije

Prikaz predočava informacije

korisniku aplikacije

Upravljanje prati korisničke radnje

i reagira na njih

Model obuhvaća cjelokupnu

aplikacijsku i podatkovnu logiku

aplikacije

7. 11. 2012.

Temelje se na arhitekturnom obrascu Model-Prikaz-

Upravljanje (Model-View-Controller, MVC)

Osnovni elementi Android aplikacije

Aktivnosti (Activities) Jednostavni fokusirani zadatak kojeg korisnik može činiti

Usluge (Services) Pozadinski procesi, nevidljivi u pozadini

Pružatelji sadržaja (Content Providers) Trajna pohrana i pristup podacima

Namjere (Intents) Poruke koje razmjenjuju dijelovi aplikacije i aplikacije međusobno

Primatelji namjera (Broadcast Receivers) Pokretači aplikacija

Aplikacije na početnom zaslonu (Widgets)

Obavijesti (Notifications) Obavješćivanje korisnika bez prekidanja trenutne aktivnosti

7. 11. 2012.

Sadržaj projekta Android aplikacije u Eclipse-u

Mapa src – ovdje stavljamo cijeli programski kod

Mapa res – ovdje stavljamo vanjske resurse: Jednostavni resursi (strings, colors, dimensions,

styles te string ili integer polja) Styles and Themes Drawables Layouts Animations Menus

Mapa gen – programski kod kojeg Eclipse sam generira Datoteka R.java pridružuje svakom resursu jedan

jedinstveni ID AndroidManifest.xml – definira

osnovne elemente Android aplikacije te putem ovlasti i filtra namjera definira njihovu interakciju

7. 11. 2012.

Aktivnost: Stvaranje

Glavna aktivnost se stvara u 2 koraka: 1. Stvaranje Java klase koja predstavlja aktivnost

2. Definiranje aktivnosti u manifestu – povezuje se programski kod

sa njegovom ulogom u aplikaciji

7. 11. 2012.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" … <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:theme="@style/AppTheme"> <activity android:name="FirstActivity"> <intent-filter> <category android:name="android.intent.category.LAUNCHER"/> <action android:name="android.intent.action.MAIN"/> </intent-filter> </activity> </application> </manifest>

Aktivnost: Definiranje prikaza

Prikaz aktivnosti se može definirati programski i/ili putem

layout-a (XML datoteka)

Programsko definiranje je vrlo nepraktično i naporno te se

stoga izbjegava

Layout je standardni način definiranja prikaza

7. 11. 2012.

Eclipse sadrži GUI za olakšano

definiranje layout-a

Novi elementi prikaza se lako dodaju u

layout (drag and drop)

Prilikom kreiranja aktivnosti, samo se

pozove učitavanje prikaza iz layouta:

this.setContentView(R.layout.layout_name);

Definiranje prikaza aktivnosti XML datotekom

XML datoteka res/result_activity.xml <?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:clickable="true"

android:orientation="vertical" >

<TextView

android:id="@+id/textViewR"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/r_text" />

<Button

android:id="@+id/buttonR"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/r_button_text" />

</LinearLayout>

Napuhavanje prikaza aktivnosti: this.setContentView(R.layout.result_activity);

7. 11. 2012.

Programski definiran prikaz aktivnosti

LinearLayout layout = new LinearLayout(this);

layout.setOrientation(LinearLayout.VERTICAL);

TextView textViewR = new TextView(this);

textViewR.setText(R.string.r_text);

textViewR.setLayoutParams(new

LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT, 0.0F));

layout.addView(textViewR);

Button buttonR = new Button(this);

buttonR.setText(R.string.r_button_text);

buttonR.setLayoutParams(new

LinearLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT, 0.0F));

layout.addView(buttonR);

this.setContentView(layout);

7. 11. 2012.

Aktivnost: Definiranje upravljanja kor. radnjama

Aplikacija treba pratiti i reagirati na korisničke radnje tj.

upravljati njima odabir iz izbornika, unos parametra, pritisak gumba

Potrebno je prepoznati korisničke radnje koje su bitne za

aplikacijsku logiku (npr. zahtijevaju ažuriranje ili promjenu

prikaza) od onih koje to nisu

Primjer: Prepoznavanje pritiska gumba

7. 11. 2012.

Button button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

…

}

});

Aktivnost: Prosljeđivanje podataka modelu

7. 11. 2012.

Aplikacijska logika (model) je srž aplikacije

Prihvaća, prilagođava i prosljeđuje podatke

Mijenja prikaz

Koordinira aktivnosti

Primjer: eksplicitno pokretanje nove aktivnosti putem

namjere

Intent intent = new Intent(PresentActivity.this,

FutureActivity.class);

intent.putExtra("result", result);

startActivity(intent);

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Jednostavni kalkulator za množenje dva broja

Dvije aktivnosti Prva aktivnost: unos dva broja

Druga aktivnost: prikaz rezultata

7. 11. 2012.

Tko što radi kod ove aplikacije?

Prikaz Aktivnost unosa brojeva

Aktivnost prikaza rezultata

Upravljanje Prepoznavanje korisničkog klika na gumbe

Dohvaćanje unesenih vrijednost brojeva

Model Obavljanje operacije nad brojevima

Mijenjanje prikaza

Pozivanje jedne aktivnosti iz druge

7. 11. 2012.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Podjela elemenata korisničkog sučelja

Elementi prikaza (views) Objekti koji nešto prikazuje na zaslonu i s kojima korisnik može

biti u interakciji

Grupe elemenata prikaza (view groups) Objekti koji sadrže i vrše razmještaj elemenata prikaza (i drugih

grupa) po zaslonu

Aktivnosti predstavljaju prozor prikazan na zaslonu

Fragmenti enkapsuliraju dijelove korisničkog sučelja te

omogućavaju njihovo jednostavno ponovno korištenje Prilagodba različitim veličinama zaslona

7. 11. 2012.

Prikaz korisničkog sučelja

Vrši se dodjelom pogleda (najčešće razmještaja ili

fragmenata) aktivnosti

Pri tome su grupe pogleda najčešće hijerarhijski

organizirane

Korijenski element može biti samo jedan

7. 11. 2012.

Razmještaji (layouts)

Razmještaji nasljeđuju grupe pogleda

Mogu se XML dokumentom ili programski

Postoje četiri glavna razmještaja LinearLayout

• Horizontalni

• Vertikalni

RelativeLayout

ListView

GridView

Primjeri:

http://developer.android.com/guide/topics/ui/layout/linear.html

7. 11. 2012.

Savjet: isključiti automatsko formatiranje XML-a

Višegodišnji bug u Eclipse-u

7. 11. 2012.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Kontrole unosa

Ključni interaktivni elemente korisničkog sučelja Gumbi (Buttons)

Tekstualna polja (Text Fields)

Kvačice (Checkboxes)

Izbornici (Radio Buttons)

Prekidači (Toggle Buttons, Switches)

Padajući izbornici (Spinners)

Gumbi za odabir vremena i datuma (Pickers)

7. 11. 2012.

Događaji nad kontrolama unosa

View.OnClickListener.onClick() Poziva se pri klikanju na element prikaza ili prilikom njegova

fokusiranja i pritiskanja tipke odabira (enter key) View.OnLongClickListener.onLongClick()

Poziva se prilikom klikanja i držanja elementa prikaza ili prilikom njegova fokusiranja i dugog pritiskanja tipke odabira

View.OnFocusChangeListener.onFocusChange() Poziva se prilikom fokusiranja na element prikaza ili micanja

fokusa s njega View.OnKeyListener.onKey()

Poziva se prilikom pritiskanja neke hardverske tipke za vrijeme dok je element prikaza fokusiran

View.OnTouchListener.onTouch() Poziva se prilikom pritiskanja, puštanja ili bilo kakva dodira

elementa prikaza

7. 11. 2012.

Načini definiranja slušača događaja

Da bi se određeni događaj mogao uhvatiti potrebno je

definirati njegovog slušača (Listener)

Ovo se može napraviti na dva načina Programski u klasi Aktivnosti i

• Za svaki element prikaza se može definirati vlastiti slušač

putem layout-a (XML datoteka) • Jedan slušač po vrsti događaja, isti za sve elemente prikaza

• Zbog toga se svaki put treba provjeravati o kojem elementu prikaza se radi

7. 11. 2012.

Gumb (Button)

Treba definirati izgled i tekst <Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button_text" />

Treba definirati što se događa prilikom klikanja Button button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { …

} });

7. 11. 2012.

Tekstualno polje (Text Field)

Treba definirati izgled i početni tekst <EditText android:id="@+id/editText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"

android:ems="10" android:inputType="number" />

Treba definirati čitanje sadržaja prilikom klikanja na gumb EditText editText = (EditText) findViewById(R.id.editText); String input = editTextA.getText().toString();

7. 11. 2012.

Kvačica (Checkbox)

Treba definirati tekst <CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/checkbox_text" />

Treba definirati čitanje odabira prilikom klikanja na gumb CheckBox checkBox =

(CheckBox) findViewById(R.id.checkBox); boolean checked = checkBox.isChecked();

7. 11. 2012.

Izbornik (Radio Button)

Treba definirati ponuđene vrijednosti i orijentaciju izbornika <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/rb1"

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/rb1_text"/>

<RadioButton android:id="@+id/rb2" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="@string/rb2_text"/> </RadioGroup>

Treba definirati čitanje odabira prilikom klikanja na gumb RadioButton rb = (RadioButton) findViewById(R.id.rb); boolean checked = rb.isChecked();

7. 11. 2012.

Prekidač (Toggle Button, Switch)

Treba definirati tekst i vrijednosti za on i off <ToggleButton android:id="@+id/tb" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="@string/tb_on_text" android:textOff="@string/tb_off_text"/>

Treba definirati čitanje odabira prilikom klikanja na gumb

ToggleButton tb = (ToggleButton) findViewById(R.id.tb); boolean on = tb.isChecked(); String tbText; if (on) { tbText = tb.getTextOn().toString(); } else { tbText = tb.getTextOn().toString(); }

7. 11. 2012.

Padajući izbornik (Spinner)

Treba ga dodati u layout <Spinner android:id="@+id/spinner1" android:layout_width="match_parent" android:layout_height="wrap_content" android:entries="@array/spinner_choices" android:prompt="@string/spinner_text" />

Treba definirati naslov i vrijednosti u strings.xml <string name="spinner_text">Select one</string> <string-array name="spinner_choices"> <item>First</item> <item>Second</item> <item>Third</item> </string-array>

Treba definirati čitanje odabira prilikom klika na gumb Spinner spinner = (Spinner)findViewById(R.id.spinner); String selected = spinner.getSelectedItem().toString();

7. 11. 2012.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Skočna poruka (Toast)

Vrlo jednostavno se definira

Potrebno je definirati tekst i trajanje Context context = getApplicationContext(); CharSequence text = "Voilà"; int duration = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(context, text, duration); toast.show();

7. 11. 2012.

Dijalog (Dialog)

AlertDialog,DatePickerDialog i TimePickerDialog

Potrebno je koristiti poseban Builder

AlertDialog.Builder adb = new AlertDialog.Builder(this);

adb.setTitle("Are you sure you want to exit?");

adb.setMessage("You will lose all unsaved data");

adb.setCancelable(false);

adb.setPositiveButton("Yes", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int id) {

CurrentActivity.this.finish();} });

adb.setNegativeButton("No", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int id) {

dialog.cancel(); } });

adb.show();

7. 11. 2012.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Stvaranje jednostavne aplikacije od nule

Osnovni elementi korisničkog sučelja Kontrole unosa i događaji nad njima

Skočne poruke i dijalozi

Namjere

7. 11. 2012.

Stog aktivnosti

Nove aktivnosti se mogu pokrenuti implicitno ili eksplicitno

Trenutno aktivna aktivnost je na vrhu stoga

Kad se ona zatvori (ili pritisne tipka nazad) vraćamo se na

prethodno aktivnu aktivnost – ona je sada na vrhu stoga

7. 11. 2012.

Eksplicitno pokretanje nove aktivnosti

Koristi se kada znamo koju aktivnost želimo sljedeću

aktivirati i prikazati na zaslonu

Stvaranje, startanje i ponovno pokretanje nove aktivnosti: Intent intent = new Intent(MyActivity.this, MyOtherActivity.class);

startActivity(intent);

Eksplicitnim pokretanjem aktivnost se stavlja na vrh stoga

aktivnosti, dotad aktivna aktivnost ostaje na stogu

Pozivanjem metode finish() ili pritiskanjem tipke back,

aktivnost se zatvara i miče sa stoga

7. 11. 2012.

Implicitno pokretanje nove aktivnosti

Koristi se kada znamo koju zadaću želimo sljedeću obaviti,

ali nam je nepoznata aktivnost koja to omogućava

Na ovaj način anonimne komponente aplikacija mogu nuditi

obavljati zadaće drugim dijelovima aplikacija

Primjer: implicitno pokretanje pozivanja tel. broja Intent intent =

new Intent(Intent.ACTION_DIAL, Uri.parse(“tel:6129-754”));

startActivity(intent);

7. 11. 2012.

Kako proslijediti podatke novopokrenutoj aktivnosti?

Primitivni tipovi podataka Za prosljeđivanje privremenih podataka preporuča se metoda

Intent.putExtras()

Ukoliko se primitivni tipovi podataka trebaju pohraniti trajno, preporuča se mehanizam Preferences

Složeni privremeni objekti Za prosljeđivanje složenih privremenih objekata se preporuča se jedan

od sljedećih pristupa: • Singleton klasa • Javni (public) atribut ili metoda • HashMap referenci objekata – aktivnosti se prosljeđuje ID objekta putem

metode Intent.putExtras()

Perzistentni (trajni) objekti Za prosljeđivanje trajnih objekata se preporuča se jedan od sljedećih

pristupa: • Application Preferences

• datoteke • Content Providers

• SQLite DB

7. 11. 2012.

Primjer prosljeđivanja primitivnih tipova podataka

Na strani aktivnosti pošiljatelja Float passed = 5.0f;

Intent intent = new Intent(InputActivity.this,

OutputActivity.class);

intent.putExtra("passed", passed);

startActivity(intent);

Na strani aktivnosti primatelja

Bundle extras = getIntent().getExtras();

if (extras != null) {

float passed = extras.getFloat(„passed");

//do something with the passed data

}

7. 11. 2012.

Kako zatražiti podatke od novopokrenute aktivnosti?

Eksplicitno pokretanje aktivnosti koja vraća rezultat private static final int REQUEST_CODE = 1; Intent intent = new Intent(this, MyOtherActivity.class); startActivityForResult(intent, REQUEST_CODE);

Implicitno pokretanje aktivnosti koja vraća rezultat private static final int REQUEST_CODE = 2; Uri uri = Uri.parse(“content://contacts/people”);

Intent intent = new Intent(Intent.ACTION_PICK, uri); startActivityForResult(intent, REQUEST_CODE);

Kada aktivnost završi kod zahtjeva (REQUEST_CODE) će biti

vraćen u metodi onActivityResult()

7. 11. 2012.

Kako vratiti podatke pri povratku na prethodnu akt.?

Potrebno je pozvati metodu setResult prije povratka na

prethodnu aktivnost Ova metoda prima 2 argumenta:

• Kod rezultata (RESULT_CODE) - najčešće Activity.RESULT_OK ili

Activity.RESULT_CANCELED i

• Podatke koji se vraćaju u obliku namjere (Intent)

Namjera najčešće sadrži URI podataka i kolekciju dodatnih

prim. podataka dodanih metodom Intent.putExtras() long selected_item_id = listView.getSelectedItemId();

Uri selectedItem = Uri.parse(“content://items/” +

selected_item_id);

Intent result = new Intent(Intent.ACTION_PICK, selectedItem);

setResult(RESULT_OK, result);

finish();

7. 11. 2012.

Kako doći do podataka koje je vratila pret. aktivnost?

Pri povratku iz aktivnosti koja vraća rezultat poziva se metoda onActivityResult() aktivnosti koja ju prethodno pozvala

Ova metoda ima 3 argumenta: Kod zahtjeva proslijeđen pri pozivu startActivityForResult() Kod rezultata postavljen pri pozivu metode setResult Namjeru (Intent) u kojoj se nalaze podaci protected void onActivityResult(int requestCode, int resultCode, Intent data) { // Check which request we're responding to if (requestCode == PICK_CONTACT_REQUEST) { // Make sure the request was successful if (resultCode == RESULT_OK) { // The user picked a contact. // The Intent's data Uri identifies which contact was selected. // Do something with the contact here (bigger example below) } } }

7. 11. 2012.