Tipy pre Android vývojára: vlastné dialógové okná

V aplikácií sa často zobrazujú tzv. dialógy, vyskakovacie okná s textom resp. tlačidlami. Je síce pravda, že sa čiastočne dajú štýlovať, no mnohokrát nie dostačujúco. Tento tutoriál vám ukáže ako vytvoriť dialóg podľa svojich predstáv.

Najideálnejším spôsobom štýlovania dialógov je neštýlovať ich. Omnoho flexibilnejším riešením je implementácia vlastných dialógov s požadovanou funkcionalitou a ľubovoľným rozložením komponentov.

V praxi to opäť znamená vytvorenie novej triedy (DialogCustom) dediacej od triedy Dialog, no tentoraz je žiadúce vytvoriť aj XML súbor s rozložením prvkov podľa vlastnej potreby. V rámci triedy DialogCustom je potrebné implementovať vnorenú triedu (Builder), ktorá bude akýmsi sprostredkovateľom pre inicializáciu novej inštancie triedy. Jej úlohou bude na základe volaných metód zkonštruovať dialóg a prispôsobiť rozloženie prvkov. Predpokladajme, že existuje požiadavka pre zobrazenie dialógu s nejakým nadpisom, textom, tlačidlom na potvrdenie akcie, na jej zrušenie a v pozadí nech sa zobrazí ľubovoľný obrázok.

Inicializácia nového objektu vyzerá nasledovne:

DialogCustom.Builder customBuilder = new DialogCustom.Builder(context);
customBuilder.setTitle(title);
customBuilder.setMessage(message).
customBuilder.setPositiveButton(positiveButton, listener);
customBuilder.setNegativeButton(negativeButton, listener);
customBuilder.setBackgroundResource(backgroundResource);
Dialog dialog = customBuilder.show();

Spôsob ako to dosiahnuť je principiálne jednoduchý. Metódy setTitle, setMessage, setPositiveButton, setNegativeButton a setBackgroudResource priradia hodnoty privátnym premenným a metóda show() zostrojí a zobrazí požadovaný dialóg.   Na začiatku metódy show() je potrebné získať vopred vytvorený XML súbor s vlastným rozložením komponentov (R.layout.dialog) a nastaviť ho ako View objekt pre obsah novovytvorenej inštancie objektu:

LayoutInflater inflater =
(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// instantiate the dialog
final DialogCustom dialog = new DialogCustom(context);
View layout = inflater.inflate(R.layout.dialog, null);
// set content view
dialog.addContentView(layout,
new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)
);

a následne ponastavovať príslušné hodnoty a vlastnosti komponentov, napríklad:

// set the dialog title
((TextView) layout.findViewById(R.id.title)).setText(title);

// set dialog backgroud
layout.findViewById(R.id.ll_background)
.setBackgroundResource(backgroundResource);

// set the confirm button
if (positiveButtonText != null) {
((Button) layout.findViewById(R.id.positiveButton))
.setText(positiveButtonText);
if (positiveButtonClickListener != null) {
((Button) layout.findViewById(R.id.positiveButton))
.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
positiveButtonClickListener.onClick(dialog, DialogInterface.BUTTON_POSITIVE);
}
});
}
} else {
// if no confirm button, just set the visibility to GONE
layout.findViewById(R.id.positiveButton).setVisibility(View.GONE);
}

Na konci stačí zavolať metódu show()tentokrát rodičovskej triedy:

dialog.show();

Výsledok:

Keďže ide o komplexnejšiu metódu, nebudem ju tu celú vypisovať, bližšie si ju preskúmate v zdrojovom kóde. Rozhodol som sa všetky tutoriály robiť v jednom projekte. Ten aktuálny si môžeťe stiahnuť v prílohe TutorialCustomDialog.zip.