Lekce 4 - Android AlertDialog - Výběr jedné položky ze seznamu

V minulé části, Android AlertDialog - Ikona v hlavičce, jsme si do hlavičky našeho dialogového okna připravili a přidali ikonu. Také jsme si doplnili znalosti o zavírání dialogového okna a ukázali jsme, jak jej můžeme zavřít pomocí Java kódu.

Ne na každou otázku lze odpovědět způsobem Ano/Ne. V dnešním Android tutoriálu si proto ukážeme, jak pomocí dialogového okna uživateli nabídnout výběr z většího počtu možných odpovědí zobrazených v seznamu.

Výběr položky ze seznamu

Existují tři způsoby výběru ze seznamu zobrazeného v dialogovém okně typu AlertDialog:

• výběr jedné položky s automatickým zavřením dialogového okna,
• výběr jedné položky s nutností výběr potvrdit tlačítkem,
• výběr více než jedné položky.

Dnes si ukážeme první z uvedených způsobů. Uživateli umožníme vybrat pouze jednu možnost. Po výběru se dialogové okno automaticky zavře.

Doplnění ukázkového projektu

Abychom si popsané vyzkoušeli v praxi, doplníme projekt naší ukázkové aplikace o druhý příklad. Hlavní aktivitu doplníme o nové tlačítko, kterým budeme zobrazovat AlertDialog se seznamem.

Soubor activity_main.xml

Nejprve doplníme XML návrh vzhledu hlavní aktivity o jedno tlačítko:

<Button
    android:id="@+id/btn_autoclose_list_dialog"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Výběr jedné položky z nabídky"
    android:textAllCaps="false" />

Na následujícím obrázku máme vzhled hlavní aktivity s přidaným druhým tlačítkem:

Soubor MainActivity.java

Nyní se přesuneme do hlavní aktivity. Otevřeme si soubor MainActivity.java. Zde postupně doplníme nový Java kód.

Proměnné

Pod proměnnou btn_basic_dialog přidáme novou proměnnou btn_autoclose_list_dialog typu Button:

Button btn_autoclose_list_dialog;

Metoda onCreate()

V kódu hlavní aktivity doplníme přepsanou metodu onCreate() o inicializaci proměnné btn_autoclose_list_dialog referencí na nově přidané tlačítko v XML návrhu vzhledu aktivity:

btn_autoclose_list_dialog = findViewById(R.id.btn_autoclose_list_dialog);

btn_autoclose_list_dialog.setOnClickListener(this);

Novému tlačítku dále nastavujeme posluchače události kliknutí. Tímto posluchačem je celá hlavní aktivita, proto budeme muset později doplnit i přepsanou metodu onClick().

Metoda showInfo()

Nyní v souboru MainActivity.java deklarujeme novou metodu showInfo(). Tato metoda bude sloužit k zobrazení textu položky, zvolené z nabídky dialogového okna. K zobrazení textu použijeme Snackbar.

Snackbar umožňuje uživateli na několik vteřin zobrazit krátkou zprávu ve spodní části obrazovky.

Než se pustíme do samotné metody showInfo(), přidáme do souboru res/values/colors.xml novou konstantu barvy textu pro náš Snackbar:

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

Naše metoda showInfo() bude vypadat 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("Zavřít", new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                }
            });
    snackbar.show();
}

Metoda showInfo() přijímá jeden parametr typu String představující textový řetězec, který má být zobrazen. Nejprve vytváříme novou instanci třídy Snackbar, kterou dále nastavujeme. Voláním metody make() pro Snackbar jako zobrazovaný text nastavujeme parametr text, se kterým byla zavolána metoda showInfo(). Posledním parametrem metody make() nastavujeme systémovou konstantou Snackbar.LENGTH_LONG dobu, po kterou bude Snackbar zobrazený.

Metodou setTextColor() nastavujeme barvu zobrazeného textu odkazem na naší konstantu snackbar_text_color ze souboru res/values/colors.xml. Metodou setAction() nastavujeme text tlačítka pro Snackbar a také akci, která bude stisknutím tohoto tlačítka provedena.

Metoda showSingleChoiceList()

Nyní se podíváme na deklaraci naší další nové metody showSingleChoiceList(), která bude volána po stisknutí druhého tlačítka v hlavní aktivitě naší ukázkové aplikace. Tuto metodu deklarujeme v souboru MainActivity.java a bude vypadat takto:

public void showSingleChoiceList() {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
    alertDialogBuilder.setTitle("Vyber zvíře");

    // !!! Nesmí být nastaven následující zakomentovaný parametr. Jinak nebude seznam zobrazen !!!
    // alertDialogBuilder.setMessage("Zpráva pro uživatele");

    final String[] animals = new String[]{
            "Pes",
            "Kočka",
            "Králík",
            "Slepice",
            "Kráva",
            "Prase",
            "Ovce",
            "Kuna",
            "Jelen",
            "Orel"
    };

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

    alertDialogBuilder.setNeutralButton("Zavřít", null);

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

Ve výše uvedené metodě známým způsobem vytváříme nový AlertDialog, kterému následně nastavujeme text v jeho hlavičce. Následuje zakomentovaný řádek s nastavením textu obsahu dialogu. Tento řádek později můžeme zkusit odkomentovat a vyzkoušet si, co se bude dít.

Pokud chceme AlertDialog použít pro zobrazení seznamu, nesmíme dialogu nastavit text metodou setMessage(). Pokud text takto nastavíme, nebude zobrazen seznam položek.

V dalším kroku vytváříme pole textových řetězců animals s názvy zvířat, které v dalším řádku dosazujeme do prvního parametru metody setItems(). Ve druhém parametru této metody vytváříme posluchače události výběru položky ze seznamu.

V přepsané metodě onClick() posluchače voláme naší metodu showInfo(), která zajistí zobrazení vybraného zvířete ve Snackbar okně. Informaci o tom, který textový řetězec byl v seznamu vybrán, získáme z parametru which přepsané metody onClick(). Takto získáme index položky v našem poli se zvířaty, které jsme dialogu nastavili prvním parametrem metody setItems().

Po výběru kterékoliv položky bude dialog automaticky zavřen. Proto není nutné definovat pozitivní tlačítko pro potvrzení volby. Jediné tlačítko, které nastavíme, je neutrální tlačítko pro zavření dialogu bez volby položky. Jeho nastavení máme v dalším řádku metody showSingleChoiceList(). Dále již známým způsobem dokončujeme vytvoření dialogového okna.

Na závěr voláme metodu show(), bez které by vytvořené dialogové okno nemohlo být zobrazeno.

Metoda onClick()

Přestože máme připraveno vše potřebné k zobrazení druhého příkladu v naší ukázkové aplikaci, druhé tlačítko v hlavní aktivitě nebude na stisknutí reagovat. Ještě nám totiž chybí doplnění přepsané metody onClick() v souboru MainActivity.java. V této metodě pouze doplníme konstrukci switch o tuto další možnost:

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

Ve druhé větvi switch voláme naší metodu showSingleChoiceList(), která zobrazí AlertDialog s naším seznamem zvířat.

Nyní je tedy vše připravené k vyzkoušení druhého příkladu. Aplikaci spustíme a klikneme na nově přidané druhé tlačítko:

Stisknutím druhého tlačítka je zobrazeno dialogové okno s nabídkou seznamu zvířat. Kliknutím na kteroukoliv položku seznamu je dialogové okno zavřeno a ve spodní části displeje je na několik vteřin zobrazen Snackbar s vybraným zvířetem:

Uložení seznamu do resources

Pole se seznamem zvířat vytváříme až těsně před zobrazením dialogového okna. Existuje ale lepší možnost. Můžeme mít takové pole se seznamem zvířat uložené v resources projektu. Jak na to? Ve složce res/values/ vytvoříme nový soubor, který pojmenujeme například string_array.xml a doplníme ho takto:

<resources>
    <string-array name="zvirata">
        <item>Pes</item>
        <item>Kočka</item>
        <item>Králík</item>
        <item>Slepice</item>
        <item>Kráva</item>
        <item>Prase</item>
        <item>Ovce</item>
        <item>Kuna</item>
        <item>Jelen</item>
        <item>Orel</item>
    </string-array>
</resources>

Vytvořený soubor string_array.xml obsahuje jedno pole textových řetězců pojmenované zvirata.

Na vytvořené pole v resources se v Java kódu odkážeme a vytvoříme z něj klasické pole textových řetězců takto:

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

Pod článkem je opět k dispozici ke stažení archiv s doplněným projektem naší ukázkové aplikace.

V příští lekci, Android AlertDialog - Výběr ze seznamu s potvrzením, naší ukázkovou aplikaci doplníme o další příklad dialogového okna. Vytvoříme seznam, ze kterého bude moci uživatel vybrat jen jednu položku a výběr bude muset potvrdit pozitivním tlačítkem.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.