1. diel - Android AlertDialog - Základné systémové dialógové okno

Dnešným Android tutoriálom zahájime kurz na tému dialógové okná v Androide. Dnes vo vývojovom prostredí Android Studio založíme nový projekt ukážkovej aplikácie nazvanej Dialogs, v ktorej budeme postupne vytvárať rôzne typy dialógových okien.

Dialógové okná používame na komunikáciu s užívateľom. Zobrazujeme mu informačné správy alebo od neho požadujeme nejaké rozhodnutie. Ďalej v nich napríklad žiadame o zadanie nejakých dát.

Minimálne požiadavky kurzu

K úspešnému absolvovaniu kurzu nie sú potrebné žiadne pokročilé znalosti. Všetko si postupne vysvetlíme. Predpokladáme však znalosť základov objektovo orientovaného programovania v Jave a kurze Základy vývoja Android aplikácií v Jave, v ktorom sa zoznamujeme s vývojovým prostredím Android Studio.

Založenie projektu ukážkovej aplikácie

Teraz vo vývojovom prostredí Android Studio založíme nový projekt pomenovaný Dialogs. Tento projekt nás bude sprevádzať celým kurzom a umožní nám prakticky si vyskúšať popisovanú teóriu.

V ľavej časti okna pre vytvorenie nového projektu zvolíme možnosť Phone and Tablet av pravej časti vyberieme šablónu Empty Activity. Voľbu potvrdíme tlačidlom Next:

V ďalšom okne do políčka Name napíšeme názov projektu, v našom prípade Dialogs. Políčko Package name vyplníme textom cz.itnetwork.dialogs. Všetko potvrdíme tlačidlom Finish:

Vývojové prostredie nám v projekte vygeneruje niekoľko základných súborov. Tými najdôležitejšími sú súbory activity_main.xml s XML návrhom vzhľadu hlavnej aktivity aplikácie a MainActivity.java s jej Java kódom.

Úprava súboru activity_main.xml

Súbor s návrhom vzhľadu grafického užívateľského rozhrania hlavnej aktivity aplikácie upravíme do tejto podoby:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="20dp">

        <Button
            android:id="@+id/btn_01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="AlertDialog"
            android:textAllCaps="false" />

    </LinearLayout>

</ScrollView>

Hlavným elementom tejto aktivity bude komponent ScrollView obsahujúci LinearLayout. Do tohto layoutu budeme postupne pridávať tlačidlá na zobrazovanie príkladov, ktoré budeme postupne počas kurzu vytvárať. Na konci kurzu budeme mať tlačidiel viac. Mohlo by sa teda stať, že sa všetky tlačidlá na displej telefónu nezmestia. Preto je hlavným komponentom aktivity práve ScrollView.

Do layoutu sme zároveň pridali prvé tlačidlo s textom AlertDialog, ktoré bude slúžiť na zobrazenie nášho prvého dialógového okna.

Doplnenie súboru MainActivity.java

Súbor s Java kódom hlavnej aktivity doplníme do nasledujúcej podoby:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btn_01;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn_01 = findViewById(R.id.btn_01);

        btn_01.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_01:
                break;
        }
    }
}

V súbore MainActivity.java najskôr doplníme hlavičku triedy MainActivity o implementácii rozhrania View.OnClickListener. Po tomto kroku nás Android štúdio upozorní na nutnosť prepísania metódy onClick() spomínaného rozhrania. Túto metódu teda doplníme. Metóda onClick() obsahuje konštrukciu switch, ktorá bude určovať ďalšie správanie aplikácie. Podľa toho, ktoré tlačidlo bolo stlačené, zobrazíme dané dialógové okno.

Zatiaľ máme deklarované iba jedno tlačidlo. Preto tu máme iba jednu možnosť, ktorá ale zatiaľ neobsahuje žiadny obslužný kód.

V úvode triedy MainActivity máme premennú btn_01 typu Button, ktorú ďalej v metóde onCreate() inicializujeme referenciou na naše tlačidlo v XML návrhu vzhľadu aktivity. V metóde onCreate() zároveň tomuto tlačidlu nastavujeme poslucháčov udalosti kliknutí. Poslucháčom je hlavná aktivita, preto do parametra metódy setOnClickListener() dosadzujeme hodnotu this. Teraz máme pripravené prvé tlačidlo, ktorého úlohou bude zobrazenie jednoduchého dialógového okna typu AlertDialog.

Základné systémové dialógové okno

AlertDialog je základné systémové dialógové okno, ktorého vzhľad je vždy prispôsobený vzhľadu konkrétnej verzie Androidu, na ktorej aplikácia pobeží. AlertDialog má tieto tri časti:

• hlavičku, ktorá môže obsahovať textový reťazec a ikonu,
• obsah, ktorý v najjednoduchšom prípade obsahuje textový reťazec s nejakou informáciou pre užívateľov, možností nastavenia obsahu ale existuje viac a všetky si ich postupne ukážeme,
• tlačidlá v spodnej časti dialógu, nemusíme tu použiť žiadne tlačidlo alebo až tri defaultné tlačidlá.

Na základné nastavenie okna AlertDialog môžeme použiť pripravené metódy triedy AlertDialog.Builder. Tieto metódy slúžia na nastavenie textu hlavičky, na nastavenie textu v obsahu pre AlertDialog a na nastavenie až troch tlačidiel:

Toto nám bohato stačí na vytvorenie jednoduchého informačného dialógového okna, ktorého Java kód zaberie len niekoľko riadkov. Možnosti základného nastavenia vzhľadu základného okna sú značne obmedzené, preto máme možnosť v hlavičke a obsahu dialógu nastaviť vlastný vzhľad definovaný XML súborom, podobne ako vzhľad aktivity. Najprv si prejdeme možnosti základného nastavenia a až neskôr si ukážeme, ako je možné AlertDialog upraviť na nepoznanie od jeho základnej verzie použitím vlastného layoutu s komponentmi z ponuky Android Studia.

Základ dialógového okna

Teraz si ukážeme základný Java kód potrebný na vytvorenie základného dialógového okna. Do triedy MainActivity preto pridáme deklaráciu našej prvej metódy showMyAlert() podľa nasledujúcej ukážky:

public void showMyAlert() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

    // ... prostor pro nastavení dialogu

    AlertDialog alertDialog = alertDialogBuilder.create();
    alertDialog.show();
}

V metóde showMyAlert() najprv vytvárame inštanciu triedy AlertDialog.Builder, ktorá umožňuje definovanie vzhľadu a vlastností pre budúceho AlertDialog. Samotné nastavenie dialógu v ukážke chýba a je nahradené bodkami. Parametrov, ktoré je možné dialógu nastaviť, je viac a budeme si ich ukazovať postupne. Po nastavení vzhľadu dialógu vytvárame volaním metódy create() inštanciu triedy AlertDialog. Takto máme dialóg pripravený na zobrazenie užívateľovi.

Samotné zobrazenie dialógu však docielime až volaním metódy show().

Titulok a obsah dialógu

Teraz si ukážeme najjednoduchšiu možnosť, ako AlertDialog nastaviť. Necháme v ňom zobraziť textový reťazec v jeho hlavičke a ďalší v jeho obsahu. Upravený kód metódy showMyAlert() bude vyzerať takto:

public void showMyAlert() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

    alertDialogBuilder.setTitle("Titulok");
    alertDialogBuilder.setMessage("Text zobrazený v dialógu");

    AlertDialog alertDialog = alertDialogBuilder.create();
    alertDialog.show();
}

Aby sme mohli popísaný AlertDialog zobraziť užívateľovi, musíme sa postarať o zavolanie našej metódy showMyAlert(). Táto metóda bude zavolaná stlačením nášho zatiaľ jediného tlačidla. Preto volanie tejto metódy pridáme do zatiaľ jedinej vetvy konštrukcie switch v prepísanej metóde onClick():

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.btn_01:
            showMyAlert();
            break;
    }
}

Po spustení aplikácie a po stlačení jediného tlačidla bude zobrazené toto jednoduché dialógové okno:

Ako bolo spomenuté vyššie, vzhľad základného dialógového okna je závislý od verzie Androidu, na ktorom aplikácia beží. Jeho vzhľad sa preto môže na rôznych zariadeniach líšiť.

V úvode bolo tiež spomenuté, že text titulku pre AlertDialog nie je povinný. Ak v metóde showMyAlert() zakomentujeme riadok s volaním metódy setTitle(), nebude hlavička zobrazená:

To isté platí aj pre obsah, ktorý tiež nie je pre AlertDialog povinný. V takom prípade bude zobrazený iba titulok dialógu.

Pod článkom je k dispozícii na stiahnutie projekt našej ukážkovej aplikácie s jedným tlačidlom.

V budúcej časti, Android AlertDialog - Defaultné tlačidlá , nášmu prvému dialógovému oknu nastavíme defaultné tlačidlá a tiež si ukážeme, ako vyriešiť reakciu kliknutia na tieto tlačidlá. Do Java kódu aplikácie si tak pridáme poslucháčov udalostí.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.