Zaženimo aplikacijo

Vse, kar moramo napraviti, da našo aplikacijo zaženemo, je, da v meniju izberemo Run > Run 'FirstAndroid'. Pokaže se nam Emulator in v njem naša aplikacija izpiše »Hello World, MyActivity«. Zagon Emulatorja in aplikacije traja kar dolgo, vendar ga zaženemo samo enkrat, potem pa ga ni treba zapreti, ampak le nalagamo nove različice našega programa v že odprt Emulator.

Kako je aplikacija sestavljena?
Na levi strani IDE-ja vidimo seznam map in datotek, ki sestavljajo naš program. Idea je ustvarila nekaj datotek, ki za samo aplikacijo niso pomembne, so pa pomembne za razvojno okolje. Teh datotek v naši Mali šoli ne bomo spreminjali, zato si poglejmo le tiste, ki so za nas pomembne:

V mapi gen bomo našli datoteko R.java. Ta datoteka je povezava med podatki, zapisanimi v .xml datotekah, in med programsko kodo. Idea bo to datoteko urejala sama glede na podatke, ki jih zapišemo v .xml datoteke, tako da je nam ni treba.

Mapa res vsebuje večino podatkov, ki jih bo naša aplikacija prikazovala. Ti podatki so razdeljeni po mapah:

V mapi layout najdemo datoteko main.xml, ki določa videz naše aplikacije. V njej je zapisano, katere komponente (besedila, gumbi, vnosna polja, fotografije …) bodo na posameznih zaslonih naše aplikacije, kako se bodo razporedile na zaslonu, kakšne barve bodo te komponente itd. Če bomo kakšen videz gradili v odvisnosti od spremenljivk, ga lahko določimo tudi v kodi sami, sicer pa je bolje, da je sam videz ločen od logike aplikacije. K tej datoteki se vrnemo pozneje.

V mapi values je datoteka strings.xml. Vanjo zapišemo vsa besedila, ki se bodo izpisala v naši aplikaciji. Besedila bi sicer lahko vpisali neposredno v kodo, vendar je dobro, da so vsa besedila zbrana na enem mestu, ker jih je potem pozneje lažje urejati.

V mapi src najdemo Java kodo naše aplikacije, na kateri bomo delali čez celoten tečaj Male šole.

Datoteka AndroidManifest.xml določa osnove naše aplikacije. Značka <activity android:name="MyActivity" android:label="@string/app_name"> določa ime naše aplikacije in zagonsko kodo. MyActivity je ime Java razreda, ki se uporabi za zagon aplikacije, @string/app_name pa je povezava do imena aplikacije. To ime je vidno v zagonskem meniju Android naprave, določimo pa ga v strings.xml pod značko <string name="app_name">. V datoteki AndroidManifest.xml bomo pozneje določili tudi ikono za našo aplikacijo ter urejali pravice za dostop do posameznih funkcionalnosti telefona (internet, GPS, senzorji ipd.).

Sestavljanje videza aplikacije

Kot smo že omenili, videz aplikacije določamo v datoteki main.xml.

Korenska značka LinearLayout predstavlja zunanji rob naše aplikacije. Z lastnostmi android:layout_width="fill_parent" in android:layout_height="fill_parent" povemo, da naj ta pogled zapolni celoten prostor, ki je na voljo, kar je v primeru korenske značke nepotrebno, ker aplikacija vedno zapolni celoten zaslon. Sta pa ti lastnosti obvezni za vsak element, zato sta prisotni tudi tu.

Ime značke LinearLayout pomeni, da bodo elementi znotraj te značke razporejeni v vrsti, lastnost android:orientation="vertical" pa, da bo ta vrsta usmerjena navpično.

Znotraj korenske značke je značka TextView. Ta prikaže besedilo, ki je zapisano v android:text="Hello World, MyActivity". Lastnosti android:layout_width="fill_parent" in android:layout_height="wrap_content" nam povesta, da bo ta element po širini zavzel celoten prostor značke nad njim, torej bo čez celoten zaslon, v višino pa bo meril le toliko, da prikaže celotno vsebino tega elementa - torej toliko, da se vidi besedilo.

Besedilo te značke smo že videli, ko smo prvič zagnali aplikacijo. Spremenimo ga v android:text=“@strings/insert_name”. To pomeni, da bomo besedilo prebrali iz datoteke strings.xml, in sicer tisto značko string, ki bo imela lastnost name=”insert_name”. V strings.xml torej vnesemo vrstico <string name="insert_name">Vpiši svoje ime:</string> . Zdaj bo v programu namesto Hello World, MyActivity pisalo Vpiši svoje ime:.

Pod to značko, torej še vedno znotraj značke LinearLayout, dodamo nov element EditText, v katerega lahko znotraj aplikacije napišemo besedilo. Prav tako kot TextView naj zavzame celotno širino in le toliko višine, kot je potrebuje. Temu elementu dodajmo še lastnost android:id="@+id/name_input", ki bo povezava, prek katere bomo do tega elementa dostopali iz Java kode.

Nato dodajmo še element Button z lastnostmi android:text="@string/ok_text" ter android:id="@+id/ok_button", ki naj bo širok in visok le toliko, kot je potrebno. Kot nam ime pove, bo v aplikaciji to gumb, njegovo akcijo pa bomo določili pozneje. Ne pozabimo v strings.xml dodati besedilo za ta gumb: <string name="ok_text">Ok</string>.

Na koncu dodamo še en TextView, ki nam bo prikazal sporočila - določimo mu android:id="@+id/message".

Če ste si namestili zadnjo različico Idee, ste lahko na desni strani ves čas spremljali videz aplikacije in že približno veste, kako bo bila videti. V vsakem primeru pa lahko zdaj aplikacijo ponovno zaženemo in preverimo, kako je videti v Emulatorju.

Logika aplikacije

Doslej smo ustvarili videz naše aplikacije, vendar je za zdaj prav dolgočasna, ker vpisovanje imena pač ni pretirano zabavno. Sprogramirajmo zdaj še akcijo gumba.

V datoteki AndroidManifest.xml je zapisano, da se ob zagonu aplikacije požene razred MyActivity. Če odpremo ta razred, vidimo, da je v njem že vključena metoda public void onCreate(Bundle savedInstanceState). Ta metoda se, kot že ime pove, požene takoj, ko se ustvari razred, v katerem se nahaja. V tej metodi lahko vidimo vrstico setContentView(R.layout.main);, ki pomeni, da se bo videz aplikacije ustvaril iz vsebine datoteke main.xml. Ko se videz zgradi, lahko dodajamo nadaljnje funkcionalnosti. Najprej poiščimo naš gumb. Komponente iščemo tako, da metodi findViewById(int id) podamo identifikacijo elementa, ki ga iščemo. Našemu gumbu smo dali id ok_button, zato ga dobimo tako:

Button okButton = (Button) findViewById(R.id.ok_button);

Kot je bilo že omenjeno, se v razredu R samodejno ustvarjajo povezave med .xml ter Javo, in v tem primeru smo to prvič izkoristili.
Zdaj imamo gumb in mu lahko dodamo akcijo. To storimo z ukazom:

okButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
}
});

Metoda public void onClick(View view) bo poklicana vsakič, ko uporabnik pritisne na gumb. V metodi zdaj poiščemo vnosno polje z id-jem name_input ter polje za izpis besedila z id-jem message:

EditText nameInput = (EditText) findViewById(R.id.name_input);
TextView messageView = (TextView) findViewById(R.id.message);

V strings.xml dodamo še sporočilo, ki ga želimo izpisati:

<string name="hello_text">Pozdravljen/a, %s!</string>

Java bo %s zamenjala s parametrom, ki ga bomo še podali. V datoteki MyActivity.java naložimo to besedilo:

String helloText = getString(R.string.hello_text);

V to besedilo nato vstavimo ime, ki ga preberemo iz vnosnega polja:

String message = String.format(helloText, nameInput.getText());

Na koncu pa samo še izpišemo sporočilo:

messageView.setText(message);

Akcija je tako končana in jo lahko preizkusimo v Emulatorju.

Zaključek

S tem smo zaključili začetno poglavje Male šole razvijanja Android aplikacij. Zdaj znamo ustvariti nov projekt, izbrati nekaj elementov, jih postaviti v aplikacijo in jim dodati nekaj funkcionalnosti. To so temelji programiranja v Android okolju, zato smo se vsega lotili počasi in natančno. Naslednjič bomo aplikacijo nadgradili in se ne bomo več ozirali na pravila platforme Android, temveč se bomo bolj posvetili možnostim, ki nam jih ta ponuja.

Tisti, ki se v Javi že malce bolje znajdete, lahko do naslednjega prispevka skušate sami dodati naši aplikaciji kakšno novo funkcionalnost. Vsi tisti, ki potrebujete dodatne informacije in pojasnila, pa si lahko celotno kodo tokratnega prispevka ogledate na spletni strani www.logica.pro/mojmikro, kjer lahko tudi postavljate vprašanja v zvezi s projektom, skupaj pa jih bomo skušali rešiti.