4. diel - Android AlertDialog - Výber jednej položky zo zoznamu

V minulej časti, Android AlertDialog - Ikona v hlavičke , sme si do hlavičky nášho dialógového okna pripravili a pridali ikonu. Tiež sme si doplnili znalosti o zatváraní dialógového okna a ukázali sme, ako ho môžeme zavrieť pomocou Java kódu.

Nie na každú otázku je možné odpovedať spôsobom Áno/Nie. V dnešnom Android tutoriále si preto ukážeme, ako pomocou dialógového okna užívateľovi ponúknuť výber z väčšieho počtu možných odpovedí zobrazených v zozname.

Výber položky zo zoznamu

Existujú tri spôsoby výberu zo zoznamu zobrazeného v dialógovom okne typu AlertDialog:

• výber jednej položky s automatickým zatvorením dialógového okna,
• výber jednej položky s nutnosťou výber potvrdiť tlačidlom,
• výber viac ako jednej položky.

Dnes si ukážeme prvý z uvedených spôsobov. Užívateľovi umožníme vybrať iba jednu možnosť. Po výbere sa dialógové okno automaticky zatvorí.

Doplnenie ukážkového projektu

Aby sme si popísané vyskúšali v praxi, doplníme projekt našej ukážkovej aplikácie o druhý príklad. Hlavnú aktivitu doplníme o nové tlačidlo, ktorým budeme zobrazovať AlertDialog so zoznamom.

Súbor activity_main.xml

Najprv doplníme XML návrh vzhľadu hlavnej aktivity o jedno tlačidlo:

<Button
    android:id="@+id/btn_02"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Výber jednej položky z ponuky"
    android:textAllCaps="false" />

Na nasledujúcom obrázku máme vzhľad hlavnej aktivity s pridaným druhým tlačidlom:

Súbor MainActivity.java

Teraz sa presunieme do hlavnej aktivity. Otvoríme si súbor MainActivity.java. Tu postupne doplníme nový Java kód.

Premenné

Pod premennú btn_01 pridáme novú premennú btn_02 typu Button:

Button btn_02;

Metóda onCreate()

V kóde hlavnej aktivity doplníme prepísanú metódu onCreate() o inicializácii premennej btn_02 referencií na novo pridané tlačidlo v XML návrhu vzhľadu aktivity:

btn_02 = findViewById(R.id.btn_02);

btn_02.setOnClickListener(this);

Novému tlačidlu ďalej nastavujeme poslucháčov udalosti kliknutí. Týmto poslucháčom je celá hlavná aktivita, preto budeme musieť neskôr doplniť aj prepísanú metódu onClick().

Metóda showInfo()

Teraz v súbore MainActivity.java deklarujeme novú metódu showInfo(). Táto metóda bude slúžiť na zobrazenie textu položky, zvolenej z ponuky dialógového okna. Na zobrazenie textu použijeme Snackbar.

Snackbar umožňuje užívateľovi na niekoľko sekúnd zobraziť krátku správu v spodnej časti obrazovky.

Než sa pustíme do samotnej metódy showInfo(), pridáme do súboru res/values/colors.xml novú konštantu farby textu pre náš Snackbar:

<color name="snackbar_text_color">#C9F8FF</color>

Naša metóda showInfo() bude vyzerať takto:

private void showInfo(String text) {
    Snackbar snackbar = Snackbar
            .make(findViewById(android.R.id.content), text, Snackbar.LENGTH_LONG)
            .setTextColor(getResources().getColor(R.color.snackbar_text_color))
            .setAction("Zavrieť", new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                }
            });
    snackbar.show();
}

Metóda showInfo() prijíma jeden parameter typu String predstavujúci textový reťazec, ktorý má byť zobrazený. Najprv vytvárame novú inštanciu triedy Snackbar, ktorú ďalej nastavujeme. Volaním metódy make() pre Snackbar ako zobrazovaný text nastavujeme parameter text, s ktorým bola zavolaná metóda showInfo(). Posledným parametrom metódy make() nastavujeme systémovú konštantu Snackbar.LENGTH_LONG dobu, počas ktorej bude Snackbar zobrazený.

Metódou setTextColor() nastavujeme farbu zobrazeného textu odkazom na našu konštantu snackbar_text_color zo súboru res/values/colors.xml. Metódou setAction() nastavujeme text tlačidla pre Snackbar a tiež akciu, ktorá bude stlačením tohto tlačidla vykonaná.

Metóda showSingleChoiceList()

Teraz sa pozrieme na deklaráciu našej ďalšej novej metódy showSingleChoiceList(), ktorá bude volaná po stlačení druhého tlačidla v hlavnej aktivite našej ukážkovej aplikácie. Túto metódu deklarujeme v súbore MainActivity.java a bude vyzerať takto:

public void showSingleChoiceList() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
    alertDialogBuilder.setTitle("Vyber zviera"); // !!! Nesmie byť nastavený nasledujúci zakomentovaný parameter. Inak nebude zoznam zobrazený !!!
    // alertDialogBuilder.setMessage("Správa pre užívateľov");

    final String[] animals = new String[]{
            "Pes",
            "Mačka",
            "Králik",
            "Sliepka",
            "Krava",
            "Prasa",
            "Ovce",
            "Kuna",
            "Jeleň",
            "Orol"
    };

    alertDialogBuilder.setItems(animals, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            showInfo(animals[which]);
        }
    });

    alertDialogBuilder.setNeutralButton("Zavrieť", null);

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

Vo vyššie uvedenej metóde známym spôsobom vytvárame nový AlertDialog, ktorému následne nastavujeme text v jeho hlavičke. Nasleduje zakomentovaný riadok s nastavením textu obsahu dialógu. Tento riadok neskôr môžeme skúsiť odkomentovať a vyskúšať si, čo sa bude diať.

Ak chceme AlertDialog použiť na zobrazenie zoznamu, nesmieme dialógu nastaviť text metódou setMessage(). Ak text takto nastavíme, nebude zobrazený zoznam položiek.

V ďalšom kroku vytvárame pole textových reťazcov animals s názvami zvierat, ktoré v ďalšom riadku dosadzujeme do prvého parametra metódy setItems(). V druhom parametri tejto metódy vytvárame poslucháčov udalosti výberu položky zo zoznamu.

V prepísanej metóde onClick() poslucháča voláme našu metódu showInfo(), ktorá zaistí zobrazenie vybraného zvieraťa v Snackbar okne. Informáciu o tom, ktorý textový reťazec bol v zozname vybraný, získame z parametra which prepísané metódy onClick(). Takto získame index položky v našom poli so zvieratami, ktoré sme dialógu nastavili prvým parametrom metódy setItems().

Po výbere ktorejkoľvek položky bude dialóg automaticky zatvorený. Preto nie je nutné definovať pozitívne tlačidlo pre potvrdenie voľby. Jediné tlačidlo, ktoré nastavíme, je neutrálne tlačidlo na zatvorenie dialógu bez voľby položky. Jeho nastavenie máme v ďalšom riadku metódy showSingleChoiceList(). Ďalej už známym spôsobom dokončujeme vytvorenie dialógového okna.

Na záver voláme metódu show(), bez ktorej by vytvorené dialógové okno nemohlo byť zobrazené.

Metóda onClick()

Napriek tomu, že máme pripravené všetko potrebné na zobrazenie druhého príkladu v našej ukážkovej aplikácii, druhé tlačidlo v hlavnej aktivite nebude na stlačenie reagovať. Ešte nám totiž chýba doplnenie prepísanej metódy onClick() v súbore MainActivity.java. V tejto metóde iba doplníme konštrukciu switch o túto ďalšiu možnosť:

case R.id.btn_02:
    showSingleChoiceList();
    break;

V druhej vetve switch voláme našu metódu showSingleChoiceList(), ktorá zobrazí AlertDialog s naším zoznamom zvierat.

Teraz je teda všetko pripravené na vyskúšanie druhého príkladu. Aplikáciu spustíme a klikneme na novo pridané druhé tlačidlo:

Stlačením druhého tlačidla je zobrazené dialógové okno s ponukou zoznamu zvierat. Kliknutím na ktorúkoľvek položku zoznamu je dialógové okno zatvorené av spodnej časti displeja je na niekoľko sekúnd zobrazený Snackbar s vybraným zvieraťom:

Uloženie zoznamu do resources

Polia so zoznamom zvierat vytvárame až tesne pred zobrazením dialógového okna. Existuje ale lepšia možnosť. Môžeme mať takéto pole so zoznamom zvierat uložené v resources projekte. Ako na to? V priečinku res/values/ vytvoríme nový súbor, ktorý pomenujeme napríklad string_array.xml a doplníme ho takto:

<resources>
    <string-array name="zvieratá">
        <item>Pes</item>
        <item>Mačka</item>
        <item>Králik</item>
        <item>Sliepka</item>
        <item>Krava</item>
        <item>Prasa</item>
        <item>Ovce</item>
        <item>Kuna</item>
        <item>Jeleň</item>
        <item>Orol</item>
    </string-array>
</resources>

Vytvorený súbor string_array.xml obsahuje jedno pole textových reťazcov pomenované zvirata.

Na vytvorené pole v resources sa v Java kóde odkážeme a vytvoríme z neho klasické pole textových reťazcov takto:

String[] animals = getResources().getStringArray(R.array.zvirata);

Pod článkom je opäť k dispozícii na stiahnutie archív s doplneným projektom našej ukážkovej aplikácie.

V nasledujúcom kvíze, Kvíz - Základné systémové dialógové okno v Androide, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

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