Lekce 3 - Android AlertDialog - Ikona v hlavičce

V minulé části, Android AlertDialog - Defaultní tlačítka, jsme našemu prvnímu dialogovému oknu nastavili defaultní tlačítka a také jsme si ukázali, jak vyřešit reakci kliknutí na ně.

V dnešním Android tutoriálu budeme pokračovat na vylepšování našeho prvního dialogového okna, které máme hotové z dřívějška. Dnes si ukážeme, jak do jeho hlavičky umístit ikonu. Vrátíme se také ještě k tématu zavírání dialogového okna.

Vytvoření ikony pro AlertDialog

Před umístěním obrázku do hlavičky dialogu musíme takový obrázek nejprve vytvořit. K vytvoření obrázku využijeme možností vývojového prostředí Android Studio. Součástí Android Studia je totiž i Asset Studio, sloužící k vytváření a úpravě obrázkových zdrojů pro použití v našich projektech. My v našem projektu použijeme jednu ze základních ikon z nabídky Android Studia.

Vytvořené obrázky ve struktuře projektu ukládáme do složky res/drawable/.

Práci na ikoně zahájíme kliknutím pravého tlačítka myši na složku res/drawable/ ve struktuře projektu vývojového prostředí. V zobrazeném menu, přes položku New, zvolíme možnost Vector Asset:

V zobrazeném okně Asset Studia máme v řádku Asset Type možnost zvolit zdroj obrázku. My ponecháme zaškrtnutou možnost Clip Art, protože budeme vybírat z nabídky ikon systému Android:

V okně Asset Studia, v řádku Clip Art, klikneme na malý obrázek, kterým otevřeme okno Select Icon a vybereme požadovanou ikonu:

V horní části okna Select Icon máme k dispozici políčko pro vyhledávání. V našem případě je zadán text warn pro vyhledání ikon vhodných pro nějaké upozornění. Volbu ikony potvrdíme tlačítkem OK a budeme vráceni do okna Asset Studia, kde v jeho pravé části vidíme náhled zvolené ikony. Dále přejdeme do řádku Color, kde můžeme změnit barvu obrázku:

Okno s nastavením barvy nemá tlačítko pro potvrzení. Po nastavení barvy stačí kliknout kamkoliv mimo okno volby barvy nebo můžeme stisknout klávesu Esc. Nastavení obrázku dokončíme stisknutím tlačítka Next. Než tak učiníme, můžeme ještě změnit název souboru, ve kterém bude obrázek uložen. K tomu slouží políčko v řádku Name. My původní jméno obrázku zkrátíme na ic_warning:

Před uložením nového obrázku ještě zkontrolujeme a potvrdíme umístění souboru. To provedeme tlačítkem Finish:

Nyní můžeme ve struktuře projektu ve složce res/drawable/ vidět nově přidaný soubor s vektorovým obrázkem ic_warning.xml:

XML kód souboru vektorového obrázku je možné v Android Studiu ručně editovat.

Tímto máme připravenou ikonu, kterou můžeme použít pro náš AlertDialog na doplnění jeho hlavičky.

Takto vytvořená ikona není určena pouze pro náš AlertDialog. Můžeme ji použít kdekoliv v našem projektu, například v komponentě ImageView nebo jako pozadí nějaké komponenty.

Použití ikony v dialogovém okně

Připravenou ikonu pro AlertDialog přidáme do jeho hlavičky úpravou metody showMyAlert(). Do té doplníme následující řádek:

alertDialogBuilder.setIcon(getResources().getDrawable(R.drawable.ic_warning));

Celá naše metoda showMyAlert() bude po doplnění nastavení ikony vypadat takto:

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

    // Nastavení textu titulku
    alertDialogBuilder.setTitle("Titulek");

    // Nastavení textu obsahu
    alertDialogBuilder.setMessage("Máte velký hlad?");

    // Nastavení ikony v hlavičce
    alertDialogBuilder.setIcon(getResources().getDrawable(R.drawable.ic_warning));

    // Nastavení tlačítek
    alertDialogBuilder.setPositiveButton("Ano", dialogBtnClickListener);
    alertDialogBuilder.setNegativeButton("Ne", dialogBtnClickListener);
    alertDialogBuilder.setNeutralButton("Zavřít", dialogBtnClickListener);

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

Po spuštění naší ukázkové aplikace a zobrazení našeho dialogového okna můžeme v jeho hlavičce vidět zobrazenou ikonu:

Zavírání dialogového okna

O zavírání dialogového okna jsme si něco řekli již dříve. Zmínili jsme možnost zakázat zrušení dialogového okna v souvislosti s reakcemi na události, které může uživatel na dialogovém okně vyvolat. Již víme, že dialogové okno zrušíme kliknutím na tlačítko Zpět na telefonu nebo kliknutím na displej mimo dialogové okno. Budeme-li se bavit o zavření dialogového okna, máme na mysli tyto možnosti zavření:

• obsluhou tlačítek dialogu,
• výběrem ze seznamu položek nabídnutých dialogovým oknem,
• zavoláním metody dismiss() třídy AlertDialog.

Zavření dialogu tlačítkem Zpět nebo kliknutím mimo jeho oblast

Standardně lze tlačítko Zpět na telefonu použít k zavření dialogového okna. Další možností, jak dialogové okno zavřít, je kliknutí na displej mimo jeho oblast. Již víme, že tyto dvě možnosti zavírání dialogu můžeme jedním krokem zakázat metodou setCancelable() při jeho nastavování. Pokud požadujeme zmíněné způsoby zavření dialogového okna zakázat, dosadíme do parametru metody setCancelable() hodnotu false:

alertDialogBuilder.setCancelable(false);

Výše uvedený řádek kódu přidáme do naší metody showMyAlert() a aplikaci spustíme. Zobrazené dialogové okno lze zavřít pouze stisknutím jednoho ze tří jeho tlačítek. Kliknutím mimo oblast dialogového okna nebo stisknutím tlačítka Zpět dialogové okno zavřít nelze.

Je-li při zobrazeném dialogového okna stisknuto tlačítko Zpět na telefonu, není volána metoda onBackPressed() patřící aktivitě, ve které je toto dialogové okno zobrazeno.

Zavření dialogu metodou dismiss()

Metoda dismiss() patří třídě AlertDialog a slouží k zavření dialogového okna z Java kódu aplikace.

Pokus o zavření dialogového okna zavoláním metody dismiss() bude vždy úspěšný bez ohledu na nastavení metodou setCancelable().

Použití metody dismiss() si ukážeme na příkladu, kde se dialogové okno samo zavře po uplynutí nastaveného času. Za tímto účelem přidáme na konec metody showMyAlert() následující kód:

CountDownTimer cdt = new CountDownTimer(5000, 1000) {
    @Override
    public void onTick(long l) {
        alertDialog.setMessage("" + l / 1000);
    }

    @Override
    public void onFinish() {
        alertDialog.dismiss();
    }
};

cdt.start();

Výše uvedená ukázka kódu vytváří objekt typu CountDownTimer, který umožňuje jednoduché nastavení odpočtu času. Konstruktor nového objektu této třídy přijímá dva parametry. V prvním parametru zadáváme celkovou délku odpočtu a ve druhém parametru interval, ve kterém bude periodicky vracena aktuální hodnota zbývajícího času do konce odpočtu. Oba parametry jsou typu long a oba tyto časové údaje zadáváme v milisekundách.

V objektu typu CountDownTimer musíme poté přepsat metody onTick() a onFinish(). Metoda onTick() je volána v pravidelných intervalech podle druhého parametru v konstruktoru objektu. Toho využijeme pro náš AlertDialog, a to k aktualizaci textu v obsahu.

Hodnota parametru l, přijatého v metodě onTick(), obsahuje čas v milisekundách. Proto tuto hodnotu dělíme tisícem, abychom získali údaj v sekundách.

Metoda onFinish() je zavolána po dokončení nastaveného odpočtu. Zde na instanci alertDialog voláme metodu dismiss(), což způsobí zavření tohoto dialogu.

Pod článkem máme k dispozici ke stažení doplněný archiv s projektem naší ukázkové aplikace. Tímto máme náš první AlertDialog dokončený a příště se pustíme do práce na nové ukázce použití systémového dialogového okna.

V příští části, Android AlertDialog - Výběr jedné položky ze seznamu, vytvoříme nové dialogové okno, které uživateli nabízí výběr jedné možnosti z většího počtu položek.

 

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