3. diel - Android AlertDialog - Ikona v hlavičke

V minulej časti, Android AlertDialog - Defaultné tlačidlá , sme nášmu prvému dialógovému oknu nastavili defaultné tlačidlá a tiež sme si ukázali, ako vyriešiť reakciu kliknutí na ne.

V dnešnom Android tutoriále budeme pokračovať na vylepšovaní nášho prvého dialógového okna, ktoré máme hotové z minulosti. Dnes si ukážeme, ako do jeho hlavičky umiestniť ikonu. Vrátime sa tiež ešte k téme zatvárania dialógového okna.

Vytvorenie ikony pre AlertDialog

Pred umiestnením obrázku do hlavičky dialógu musíme takýto obrázok najskôr vytvoriť. Na vytvorenie obrázku využijeme možnosti vývojového prostredia Android Studio. Súčasťou Android Studia je totiž aj Asset Studio, slúžiaci na vytváranie a úpravu obrázkových zdrojov na použitie v našich projektoch. My v našom projekte použijeme jednu zo základných ikon z ponuky Android Studia.

Vytvorené obrázky v štruktúre projektu ukladáme do zložky res/drawable/.

Prácu na ikone zahájime kliknutím pravého tlačidla myši na zložku res/drawable/ v štruktúre projektu vývojového prostredia. V zobrazenom menu, cez položku New, zvolíme možnosť Vector Asset:

V zobrazenom okne Asset Studia máme v riadku Asset Type možnosť zvoliť zdroj obrázku. My ponecháme zaškrtnutú možnosť Clip Art, pretože budeme vyberať z ponuky ikon systému Android:

V okne Asset Studia, v riadku Clip Art, klikneme na malý obrázok, ktorým otvoríme okno Select Icon a vyberieme požadovanú ikonu:

V hornej časti okna Select Icon máme k dispozícii políčko na vyhľadávanie. V našom prípade je zadaný text warn na vyhľadanie ikon vhodných pre nejaké upozornenie. Voľbu ikony potvrdíme tlačidlom OK a budeme vrátení do okna Asset Studia, kde v jeho pravej časti vidíme náhľad zvolenej ikony. Ďalej prejdeme do riadku Color, kde môžeme zmeniť farbu obrázku:

Okno s nastavením farby nemá tlačidlo na potvrdenie. Po nastavení farby stačí kliknúť kamkoľvek mimo okna voľby farby alebo môžeme stlačiť kláves Esc. Nastavenie obrázku dokončíme stlačením tlačidla Next. Než tak urobíme, môžeme ešte zmeniť názov súboru, v ktorom bude obrázok uložený. Na to slúži políčko v riadku Name. My pôvodné meno obrázku skrátime na ic_warning:

Pred uložením nového obrázku ešte skontrolujeme a potvrdíme umiestnenie súboru. To prevedieme tlačidlom Finish:

Teraz môžeme v štruktúre projektu v priečinku res/drawable/ vidieť novo pridaný súbor s vektorovým obrázkom ic_warning.xml:

XML kód súboru vektorového obrázku je možné v Android Studiu ručne editovať.

Týmto máme pripravenú ikonu, ktorú môžeme použiť pre náš AlertDialog na doplnenie jeho hlavičky.

Takto vytvorená ikona nie je určená iba pre náš AlertDialog. Môžeme ju použiť kdekoľvek v našom projekte, napríklad v komponente ImageView alebo ako pozadie nejaké komponenty.

Použitie ikony v dialógovom okne

Pripravenú ikonu pre AlertDialog pridáme do jeho hlavičky úpravou metódy showMyAlert(). Do tej doplníme nasledujúci riadok:

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

Celá naša metóda showMyAlert() bude po doplnení nastavenia ikony vyzerať takto:

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

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

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

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

    // Nastavení tlačítek
    alertDialogBuilder.setPositiveButton("Áno", dialogBtnClickListener);
    alertDialogBuilder.setNegativeButton("Nie", dialogBtnClickListener);
    alertDialogBuilder.setNeutralButton("Zavrieť", dialogBtnClickListener);

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

Po spustení našej ukážkovej aplikácie a zobrazení nášho dialógového okna môžeme v jeho hlavičke vidieť zobrazenú ikonu:

Zatváranie dialógového okna

O zatváraní dialógového okna sme si niečo povedali už skôr. Spomínali sme možnosť zakázať zrušenie dialógového okna v súvislosti s reakciami na udalosti, ktoré môže používateľ na dialógovom okne vyvolať. Už vieme, že dialógové okno zrušíme kliknutím na tlačidlo Späť na telefóne alebo kliknutím na displej mimo dialógového okna. Ak sa budeme baviť o zatvorení dialógového okna, máme na mysli tieto možnosti zatvorenia:

• obsluhou tlačidiel dialógu,
• výberom zo zoznamu položiek ponúknutých dialógovým oknom,
• zavolaním metódy dismiss() triedy AlertDialog.

Zatvorenie dialógu tlačidlom Späť alebo kliknutím mimo jeho oblasti

Štandardne je možné tlačidlo Späť na telefóne použiť na zatvorenie dialógového okna. Ďalšou možnosťou, ako dialógové okno zavrieť, je kliknutie na displej mimo jeho oblasti. Už vieme, že tieto dve možnosti zatvárania dialógu môžeme jedným krokom zakázať metódou setCancelable() pri jeho nastavovaní. Pokiaľ požadujeme spomenuté spôsoby zatvorenia dialógového okna zakázať, dosadíme do parametra metódy setCancelable() hodnotu false:

alertDialogBuilder.setCancelable(false);

Vyššie uvedený riadok kódu pridáme do našej metódy showMyAlert() a aplikáciu spustíme. Zobrazené dialógové okno je možné zavrieť iba stlačením jedného z troch jeho tlačidiel. Kliknutím mimo oblasť dialógového okna alebo stlačením tlačidla Späť dialógové okno zavrieť nie je možné.

Ak je pri zobrazenom dialógovom okne stlačené tlačidlo Späť na telefóne, nie je volaná metóda onBackPressed() patriaca aktivite, v ktorej je toto dialógové okno zobrazené.

Zatvorenie dialógu metódou dismiss()

Metóda dismiss() patrí triede AlertDialog a slúži na zatvorenie dialógového okna z Java kódu aplikácie.

Pokus o zatvorenie dialógového okna zavolaním metódy dismiss() bude vždy úspešný bez ohľadu na nastavenie metódou setCancelable().

Použitie metódy dismiss() si ukážeme na príklade, kde sa dialógové okno samo zavrie po uplynutí nastaveného času. Na tento účel pridáme na koniec metódy showMyAlert() nasledujúci 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();

Vyššie uvedená ukážka kódu vytvára objekt typu CountDownTimer, ktorý umožňuje jednoduché nastavenie odpočtu času. Konštruktor nového objektu tejto triedy prijíma dva parametre. V prvom parametri zadávame celkovú dĺžku odpočtu av druhom parametri interval, v ktorom bude periodicky vrátená aktuálna hodnota zostávajúceho času do konca odpočtu. Oba parametre sú typu long a oba tieto časové údaje zadávame v milisekundách.

V objekte typu CountDownTimer musíme potom prepísať metódy onTick() a onFinish(). Metóda onTick() je volaná v pravidelných intervaloch podľa druhého parametra v konštruktore objektu. To využijeme pre náš AlertDialog, a to na aktualizáciu textu v obsahu.

Hodnota parametra l prijatého v metóde onTick() obsahuje čas v milisekundách. Preto túto hodnotu delíme tisícom, aby sme získali údaj v sekundách.

Metóda onFinish() je zavolaná po dokončení nastaveného odpočtu. Tu na inštancii alertDialog voláme metódu dismiss(), čo spôsobí zatvorenie tohto dialógu.

Pod článkom máme k dispozícii na stiahnutie doplnený archív s projektom našej ukážkovej aplikácie. Týmto máme náš prvý AlertDialog dokončený a nabudúce sa pustíme do práce na novej ukážke použitia systémového dialógového okna.

V budúcej časti, Android AlertDialog - Výber jednej položky zo zoznamu , vytvoríme nové dialógové okno, ktoré používateľovi ponúka výber jednej možnosti z väčšieho počtu položiek.

 

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