Námetom príkladu bude interakcia medzi dvomi najpoužívanejšími prvkami používateľského rozhrania – dotykovým tlačidlom, pomocou ktorého používateľ dá aplikácii impulz a prvkom pre zadanie, prípadne výpis textu. Po kliknutí prsta na tlačidlo sa bude inkrementovať počítadlo.
Zdá sa vám takáto aplikácia príliš “cvičná” a neužitočná. V mechanickej podobe takéto zariadenia používajú na spočítanie ľudí letušky, prípadne organizátori rôznych podujatí, pričom možnosť prepojenia takýchto počítadiel cez GSM s výstupom na mobilný tablet hasiča, ktorý má nad podujatím dozor by možno zabránil tragédii na poslednej Love Parade…
Vizuálny návrh používateľského rozhrania sa realizuje nad súborom /res/layout/main.xml.
Najčastejšie sa pre návrh používateľského rozhrania využívajú prvky
- TextView – prvok umožní zobrazenie textového výpisu, napríklad hodnoty nejakej textovej premennej a podobne. Základným parametrom, ktorý nastavujeme u tohto prvku je text
- EditText -zatiaľ čo prvok TextView slúži pre jednosmernú komunikáciu, od aplikácie k používateľovi, to znamená, že len zobrazuje výpisy, EditText je jednoduché alebo viacriadkové editačné okno pre zadávanie textových údajov. Prvok podporuje aj zarovnávanie slov
- Spinner kompozitný prvok pre výber viacerých položiek prispôsobený výberu na malej ploche dotykového displeja telefónu. Zoznam možností je možné rozvinúť a niektorú z nich dotykom vybrať.
- Button štandardné tlačidlo aktivované dotykom
- CheckBox Tento dvojstavový ovládací prvok umožňuje prepínať medzi dvomi hodnotami pravda – nepravda (true – false). Ak je symbol prvku zaškrtnutý nadobúda hodnotu true.
- RadioButton Ovládací prvok RadioButton sám o sebe veľký zmysel nemá, je potrebné použiť týchto prvkov niekoľko, potom fungujú ako prepínač (odtiaľ analógia RadioButton – tlačidlová sada pre prepínanie rozsahov rozhlasového prijímača)
Na plochu formulára aplikácie pridajte prvky Button a EditText.
Pridanie prvkov používateľského rozhrania v režime vizuálneho návrhu
V XML súbore sa vizuálny návrh prejaví nasledovne
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
<Button android:text=”Pripočítaj” android:id=”@+id/btAkcia1″ android:layout_width=”fill_parent” android:layout_height=”200px” android:ellipsize=”none” android:textSize=”40px”></Button>
<EditText android:text=”Oznam” android:id=”@+id/etOznam” android:layout_width=”fill_parent” android:layout_height=”wrap_content”></EditText>
</LinearLayout>
Tento XML dokument má jeden koreňový element do ktorého sa postupne vnorujú prvky, ktoré tvoria používateľské rozhranie aplikácie. Po vizuálnom návrhu sme zmenili len šírku prvkov na celú obrazovku nastavením parametra layout_width=”fill_parent”, teda aby mal prvok rovnakú šírku ako jeho rodič a definovali čo najväčšiu výšku tlačidla (zadáva sa v pixeloch, napr 200px). Hodnota wrap_cotent špecifikuje, že šírka prvku sa prispôsobí aktuálnemu obsahu, takže čím dlhší text, tým širšie tlačidlo.
Ak teraz aplikáciu spustíte, tlačidlo sa na ploche síce zobrazí, ale po dotyku sa nič neudeje. Je to pochopiteľné, zatiaľ ste len vytvorili widget, ale aby sa niečo udialo, je potrebné naprogramovať obsluhu udalosti zatlačenia tlačidla. Referencia sa vykoná cez názov btAkcia1 v parametri android:id=”@+id/btAkcia1″.
Znaky “@+” v atribútoch signalizujú, že nasledujúci text sa bude interpretovať ako identifikátor, pomocou ktorého bude možné na element odkazovať z programového kódu.
V súbore /src/com.example.nazovaplikacie/nazov_aplikácie.java je potrebné importovať widget Button
import android.widget.Button;
a priradiť objekt vizuálnej definícii. Vizuálna definícia tlačidla sa priradí pomocou funkcie findViewById().
Button b = (Button)this.findViewById(R.id.btAkcia1)
Pre vytvorenie obslužnej procedúry kliknutia na tlačidlo je potrebné importovať listener
import android.view.View.OnClickListener;
Väzbu medzi definíciou prvkov cez názvy a samotný výpis textu v tele obslužnej procedúry najlepšie objasní kompletný java kód
package com.example.testovaciaaplikacia;
import android.widget.Button;
import android.widget.EditText;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
public class Testovacia_aplikacia extends Activity {
public int nPocitadlo = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button b = (Button)this.findViewById(R.id.btAkcia1);
final EditText Oznam = (EditText)this.findViewById(R.id.etOznam);
b.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
nPocitadlo++;
Oznam.setText(Integer.toString(nPocitadlo));
}
});
}
}
Test aplikácie. Po kliknutí na tlačidlo sa zmení hodnota počítadla
smartmobil 