Preddiplomski studij Diplomski studij

Razvoj usluga i aplikacija za operacijski sustav Android

5. Elementi grafikog suelja u Androidu

Ak.g. 2012./2013.
Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/2.5/hr/
7. 11. 2012.

Creative Commons
slobodno smijete:

dijeliti umnoavati, distribuirati i javnosti priopavati djelo remiksirati preraivati djelo

pod sljedeim uvjetima:

imenovanje. Morate priznati i oznaiti autorstvo djela na nain kako je specificirao autor ili davatelj licence (ali ne nain koji bi sugerirao da Vi ili Vae koritenje njegova djela imate njegovu izravnu podrku). nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe. dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristei ga, preradu moete distribuirati samo pod licencom koja je ista ili slina ovoj.

U sluaju daljnjeg koritenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete ovog djela. Najbolji nain da to uinite je linkom na ovu internetsku stranicu. Od svakog od gornjih uvjeta mogue je odstupiti, ako dobijete doputenje nositelja autorskog prava. Nita u ovoj licenci ne naruava ili ograniava autorova moralna prava.
Tekst licencije preuzet je s http://creativecommons.org/.
7. 11. 2012.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone poruke i dijalozi

Namjere

7. 11. 2012.

Android aplikacije

Temelje se na arhitekturnom obrascu Model-PrikazUpravljanje (Model-View-Controller, MVC)

Prikaz predoava informacije korisniku aplikacije Upravljanje prati korisnike radnje i reagira na njih Model obuhvaa cjelokupnu aplikacijsku i podatkovnu logiku aplikacije

7. 11. 2012.

Osnovni elementi Android aplikacije

Aktivnosti (Activities)
Jednostavni fokusirani zadatak kojeg korisnik moe initi

Usluge (Services)
Pozadinski procesi, nevidljivi u pozadini

Pruatelji sadraja (Content Providers)

Trajna pohrana i pristup podacima

Namjere (Intents)
Poruke koje razmjenjuju dijelovi aplikacije i aplikacije meusobno

Primatelji namjera (Broadcast Receivers)

Pokretai aplikacija

Aplikacije na poetnom zaslonu (Widgets) Obavijesti (Notifications)

Obavjeivanje korisnika bez prekidanja trenutne aktivnosti

7. 11. 2012.

Sadraj projekta Android aplikacije u Eclipse-u

Mapa src ovdje stavljamo cijeli programski kod Mapa res ovdje stavljamo vanjske resurse:

Mapa gen programski kod kojeg Eclipse sam generira

Jednostavni resursi (strings, colors, dimensions, styles te string ili integer polja) Styles and Themes Drawables Layouts Animations Menus

AndroidManifest.xml definira osnovne elemente Android aplikacije te putem ovlasti i filtra namjera definira njihovu interakciju
7. 11. 2012.

Datoteka R.java pridruuje svakom resursu jedan jedinstveni ID

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

<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>
7. 11. 2012.

Aktivnost: Definiranje prikaza

Prikaz aktivnosti se moe definirati programski i/ili putem layout-a (XML datoteka) Programsko definiranje je vrlo nepraktino i naporno te se stoga izbjegava Layout je standardni nain definiranja prikaza

Eclipse sadri GUI za olakano definiranje layout-a Novi elementi prikaza se lako dodaju u layout (drag and drop) Prilikom kreiranja aktivnosti, samo se pozove uitavanje prikaza iz layouta:
this.setContentView(R.layout.layout_name);
7. 11. 2012.

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:

7. 11. 2012.

this.setContentView(R.layout.result_activity);

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 korisnike radnje tj. upravljati njima

odabir iz izbornika, unos parametra, pritisak gumba

Potrebno je prepoznati korisnike radnje koje su bitne za aplikacijsku logiku (npr. zahtijevaju auriranje ili promjenu prikaza) od onih koje to nisu Primjer: Prepoznavanje pritiska gumba

Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { } });

7. 11. 2012.

Aktivnost: Prosljeivanje podataka modelu

Aplikacijska logika (model) je sr aplikacije Prihvaa, prilagoava i prosljeuje 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);

7. 11. 2012.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone poruke i dijalozi

Namjere

7. 11. 2012.

Jednostavni kalkulator za mnoenje 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 korisnikog klika na gumbe Dohvaanje unesenih vrijednost brojeva

Model
Obavljanje operacije nad brojevima Mijenjanje prikaza Pozivanje jedne aktivnosti iz druge

7. 11. 2012.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone poruke i dijalozi

Namjere

7. 11. 2012.

Podjela elemenata korisnikog suelja

Elementi prikaza (views)

Objekti koji neto prikazuje na zaslonu i s kojima korisnik moe biti u interakciji

Grupe elemenata prikaza (view groups)

Objekti koji sadre i vre razmjetaj elemenata prikaza (i drugih grupa) po zaslonu

Aktivnosti predstavljaju prozor prikazan na zaslonu Fragmenti enkapsuliraju dijelove korisnikog suelja te omoguavaju njihovo jednostavno ponovno koritenje

Prilagodba razliitim veliinama zaslona

7. 11. 2012.

Prikaz korisnikog suelja

Vri se dodjelom pogleda (najee razmjetaja ili fragmenata) aktivnosti Pri tome su grupe pogleda najee hijerarhijski organizirane Korijenski element moe biti samo jedan

7. 11. 2012.

Razmjetaji (layouts)

Razmjetaji nasljeuju grupe pogleda Mogu se XML dokumentom ili programski Postoje etiri glavna razmjetaja
LinearLayout
Horizontalni Vertikalni

RelativeLayout ListView GridView

Primjeri: http://developer.android.com/guide/topics/ui/layout/linear.html
7. 11. 2012.

Savjet: iskljuiti automatsko formatiranje XML-a

Viegodinji bug u Eclipse-u

7. 11. 2012.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone poruke i dijalozi

Namjere

7. 11. 2012.

Kontrole unosa

Kljuni interaktivni elemente korisnikog suelja

Gumbi (Buttons) Tekstualna polja (Text Fields) Kvaice (Checkboxes) Izbornici (Radio Buttons) Prekidai (Toggle Buttons, Switches) Padajui izbornici (Spinners) Gumbi za odabir vremena i datuma (Pickers)

7. 11. 2012.

Dogaaji 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 dranja 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, putanja ili bilo kakva dodira elementa prikaza

7. 11. 2012.

Naini definiranja sluaa dogaaja

Da bi se odreeni dogaaj mogao uhvatiti potrebno je definirati njegovog sluaa (Listener) Ovo se moe napraviti na dva naina

Programski u klasi Aktivnosti i

Za svaki element prikaza se moe definirati vlastiti slua

Jedan slua po vrsti dogaaja, isti za sve elemente prikaza Zbog toga se svaki put treba provjeravati o kojem elementu prikaza se radi

putem layout-a (XML datoteka)

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 dogaa 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 poetni 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 sadraja prilikom klikanja na gumb

EditText editText = (EditText) findViewById(R.id.editText); String input = editTextA.getText().toString();

7. 11. 2012.

Kvaica (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 ponuene 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.

Padajui 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.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone poruke i dijalozi

Namjere

7. 11. 2012.

Skona 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.

Sadraj predavanja
Kratki uvod u model Android aplikacija Stvaranje jednostavne aplikacije od nule Osnovni elementi korisnikog suelja

Kontrole unosa i dogaaji nad njima Skone 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) vraamo 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 sljedeu 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 mie sa stoga

7. 11. 2012.

Implicitno pokretanje nove aktivnosti

Koristi se kada znamo koju zadau elimo sljedeu obaviti, ali nam je nepoznata aktivnost koja to omoguava Na ovaj nain anonimne komponente aplikacija mogu nuditi obavljati zadae 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

Intent.putExtras()

Za prosljeivanje privremenih podataka preporua se metoda

Sloeni privremeni objekti

Ukoliko se primitivni tipovi podataka trebaju pohraniti trajno, preporua se mehanizam Preferences
Za prosljeivanje sloenih privremenih objekata se preporua se jedan od sljedeih pristupa:
Singleton klasa Javni (public) atribut ili metoda HashMap referenci objekata aktivnosti se prosljeuje ID objekta putem metode Intent.putExtras()

Perzistentni (trajni) objekti

Za prosljeivanje trajnih objekata se preporua se jedan od sljedeih pristupa:

Application Preferences

datoteke

Content Providers

SQLite DB

7. 11. 2012.

Primjer prosljeivanja primitivnih tipova podataka

Na strani aktivnosti poiljatelja

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 zatraiti podatke od novopokrenute aktivnosti?

Eksplicitno pokretanje aktivnosti koja vraa rezultat

private static final int REQUEST_CODE = 1; Intent intent = new Intent(this, MyOtherActivity.class); startActivityForResult(intent, REQUEST_CODE);

Implicitno pokretanje aktivnosti koja vraa 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 zavri kod zahtjeva (REQUEST_CODE) e biti vraen 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) - najee Activity.RESULT_OK ili Activity.RESULT_CANCELED i Podatke koji se vraaju u obliku namjere (Intent)

Namjera najee sadri 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 doi do podataka koje je vratila pret. aktivnost?

Pri povratku iz aktivnosti koja vraa rezultat poziva se metoda onActivityResult() aktivnosti koja ju prethodno pozvala Ova metoda ima 3 argumenta:
Kod zahtjeva proslijeen 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.