Preddiplomski studij

Diplomski studij

Ak.g. 2015./2016.

Razvoj usluga i aplikacija za

operacijski sustav Android

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

06. 04. 2016.

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

06. 04. 2016.

Sadržaj predavanja

Model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Fragmenti

06. 04. 2016.

Android aplikacije

Upravljanje prati korisničke radnje

i reagira na njih

Prikaz predočava informacije

korisniku aplikacije

Model obuhvaća cjelokupnu

aplikacijsku i podatkovnu logiku

aplikacije

06. 04. 2016.

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

06. 04. 2016.

Sadržaj projekta Android aplikacije u Android Studiju

Mapa manifests sadrži AndroidManifest.xml –definira osnovne elemente Android aplikacije te putem ovlasti i filtra namjera definira njihovu interakciju

Mapa java – ovdje stavljamo cijeli programski kod values - jednostavni resursi (strings,

colors, dimensions, styles te string ili integer polja)

drawable layouts menu

Mapa Gradle Scripts – sadrži skripte za: Dependency management Prevođenje i izvršavanje

Mapa res – ovdje stavljamo vanjske resurse:

06. 04. 2016.

Pristup resursima koji se nalaze u mape res

Resursima se pristupa preko njihovih identifikatora (ID)

Oznaka je jedinstveni cijeli broj koji jednoznačno identificira

pojedini resurs

Identifikatori se dinamički generiraju pri prevođenju koda

Prevođenjem nastaje klasa R koja sadrži sve identifikatore svih resursa iz mape res

Pojedinom resursu se može pristupiti iz koda ili iz XML-a:

Iz koda R.vrsta.naziv, npr. R.string.hello

Iz XML-a @vrsta/naziv, npr. @string/hello

06. 04. 2016.

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

06. 04. 2016.

<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

06. 04. 2016.

Android Studio 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" />

<Buttonandroid:id="@+id/buttonR"

android:layout_width="match_parent"

android:layout_height="wrap_content"

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

</LinearLayout>

Učitavanje prikaza aktivnosti:this.setContentView(R.layout.result_activity);

06. 04. 2016.

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);

06. 04. 2016.

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

06. 04. 2016.

Button button =

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

button.setOnClickListener(newView.OnClickListener() {

public void onClick(View v) {…

}

});Dohvat objekta s

određenim ID-jem

Aktivnost: Prosljeđivanje podataka modelu

06. 04. 2016.

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

Model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Fragmenti

06. 04. 2016.

Primjer jed. aplikacije: množenje 2 kompleksna broja

Dvije aktivnosti Prva aktivnost: unos dva broja

Druga aktivnost: prikaz rezultata

06. 04. 2016.

Tko što radi kod ove aplikacije?

Prikaz Aktivnost unosa brojeva

Aktivnost prikaza rezultata

Upravljanje Prepoznavanje korisničkog klika na gumbe

Dohvaćanje unesenih vrijednosti brojeva

Model Množenje brojeva

Mijenjanje prikaza

Pozivanje jedne aktivnosti iz druge

06. 04. 2016.

Sadržaj predavanja

Model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Fragmenti

06. 04. 2016.

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 Npr. prilagodba različitim veličinama zaslona

06. 04. 2016.

Prikaz korisničkog sučelja

Vrši se postavljanjem elemenata prikaza u aktivnosti

Pri tome su grupe elemenata prikaza najčešće hijerarhijski

organizirane

Bitno je uočiti da korijenski element može biti samo jedan

06. 04. 2016.

Hijerarhija grafičkih komponenti

06. 04. 2016.

Razmještaji (layouts)

Razmještaji nasljeđuju grupe prikaza

Mogu se definirati XML dokumentom ili programski

Postoje četiri glavna razmještaja LinearLayout

• Horizontalni

• Vertikalni

RelativeLayout

ListView

GridView

Primjeri: http://developer.android.com/guide/topics/ui/declaring-

layout.html06. 04. 2016.

Sadržaj predavanja

Kratki uvod u model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Namjere

06. 04. 2016.

Kontrole unosa

Ključni interaktivni elementi 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)

06. 04. 2016.

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

06. 04. 2016.

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

06. 04. 2016.

Gumb (Button)

Treba definirati ID, 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 klikanjaButton button = (Button) findViewById(R.id.button);button.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {… }

});

06. 04. 2016.

Tekstualno polje (Text Field)

Treba definirati ID, 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 gumbEditText editText = (EditText) findViewById(R.id.editText);String input = editText.getText().toString();

06. 04. 2016.

Kvačica (Checkbox)

Treba definirati ID i 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 gumbCheckBox checkBox = (CheckBox) findViewById(R.id.checkBox);

boolean checked = checkBox.isChecked();

06. 04. 2016.

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 gumbRadioButton rb = (RadioButton) findViewById(R.id.rb);boolean checked = rb.isChecked();

06. 04. 2016.

Prekidač (Toggle Button, Switch)

Treba definirati ID, 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 gumbToggleButton tb = (ToggleButton) findViewById(R.id.tb);boolean on = tb.isChecked();

String tbText;if (on) {

tbText = tb.getTextOn().toString();} else {

tbText = tb.getTextOff().toString();}

06. 04. 2016.

Padajući izbornik (Spinner)

Treba ga dodati u layout (tj. definirati ID, izgled, naslov i vrijednosti)<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 gumbSpinner spinner = (Spinner)findViewById(R.id.spinner);String selected = spinner.getSelectedItem().toString();

06. 04. 2016.

Sadržaj predavanja

Model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Fragmenti

06. 04. 2016.

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();

06. 04. 2016.

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", newDialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int id) {

CurrentActivity.this.finish();} });adb.setNegativeButton("No", newDialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int id) {

dialog.cancel(); } });

adb.show();

06. 04. 2016.

Sadržaj predavanja

Model Android aplikacija

Primjer jednostavne aplikacije

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

Skočne poruke i dijalozi

Fragmenti

06. 04. 2016.

Fragmenti

Ideja je da se aktivnost (tj. njen prikaz) se dijeli na manje

komponente – fragmente

Glavne karakteristike fragmenata Enkapsuliraju dijelove korisničkog sučelja

Mogu se jednostavno ponovno koristiti

Svaki ima svoj vlastiti životni ciklus

Dinamički se mogu dodavati i uklanjati

Sučelje se lakše prilagođava uređaju

Za razliku od aktivnosti ne trebaju se registrirati u manifestu

06. 04. 2016.

Primjer korištenja fragmenata

06. 04. 2016.

Usporedba životnog ciklusa aktivnosti i fragmenta

06. 04. 2016.

Primjer dodavanja fragmenta u aktivnost XML-om

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"android:id="@+id/LinearLayout"

android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" >

<fragmentandroid:name="android.support.v4.app.ListFragment"

android:layout_width="match_parent"

android:layout_height="wrap_content"tools:layout="@layout/fragment_my" />

</LinearLayout>

Koristi se za statički prikaz i prilagodbu različitim

veličinama zaslona Android uređaja

Aktivnost mora naslijediti klasu FragmentActivity!

06. 04. 2016.

Primjer programskog dodavanja fragmenta u aktivnost

public class MyFragment extends Fragment {@Override

public View onCreateView(LayoutInflater inflater, ViewGroupcontainer,Bundle savedInstanceState) {

// If this Fragment has no UI then return null.

return inflater.inflate(R.layout.my_fragment, container, false);

}}

Ovo se naziva dinamičko dodavanje, obavlja se transakcijskiFragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();fragmentTransaction.add(R.id.myfragment_container, newMyFragment(), getString(R.string.myfragment_tag));

fragmentTransaction.commit();

Dinamički fragment je potrebno dodati u postojeći ViewGroup

unutar aktivnosti06. 04. 2016.

ViewGroup u koji

ga dodajemo

Dinamička zamjena i uklanjanje fragmenata

Zamjena i uklanjanje se također vrši transakcijski:FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();//zamjenafragmentTransaction.replace(R.id.myfragment_container, newMyFragment());//uklanjanjeFragment myfragment = getFragmentManager().findFragmentById(R.id.myfragment_container);

fragmentTransaction.remove(myfragment);fragmentTransaction.commit();

Force-anje commit-afragmentManager.executePendingTransactions();

Pronalaženje fragmentafindFragmentById(R.id.myfragment_container)findFragmentByTag(getString(R.string.myfragment_tag))

06. 04. 2016.

Dohvaćanje aktivnosti u kojoj se nalazi fragment

Vrlo korisna opcija Dohvaćanje trenutnog Context-a,

Pristup ostalim fragmentima iste aktivnosti

Pristup ostalim elementima prikaza aktivnosti

Primjer dohvaćanja gumba Button button = (Button) myfragment.getActivity().findViewById(R.id.button);

Fragmenti ne bi trebali komunicirati direktno, već bi

aktivnost trebala biti posrednik u komunikaciji Održava se slaba međusobna povezanost fragmenata

Ukoliko fragment treba o nečemu obavijestiti aktivnost,

preporuka je da aktivnost implementira odgovarajuće

sučelje koje će fragment pozvati po potrebi

06. 04. 2016.