Creare dei dialoghi personalizzati

Prima di iniziare è doveroso fare una breve introduzione su cos'è la classe Dialog (precisamente android.app.Dialog). La classe Dialog, come dice il nome stesso, permette di visualizzare dei dialoghi, ovvero quelle finestre che vediamo comparire quando ci viene chiesta una conferma. Quando viene visualizzato un dialogo l'Activity sottostante viene momentaneamente bloccata.


Quando si hanno molti dialoghi da gestire il mio consiglio è sempre quello di creare una apposita classe (che io chiamo Dialoghi) e fare al suo interno un metodo mostra(int idDialogo) con delle variabili Intere statiche che passerete poi al metodo mostra. Un esempio pratico può chiarire le idee.
 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class Dialoghi { public final static int DIALOGO1 = 1; public final static int DIALOGO2 = 2; Context context; public Dialoghi(Context context) { this.context = context; } public void mostra(int id) { switch(id) { case DIALOGO1: //Esegui le operazioni concernenti la gestione del DIALOGO1 break; case DIALOGO2: //Esegui le operazioni concernenti la gestione del DIALOGO2 break; } } }

In questo caso manca tutta la gestione vera e propria del dialogo, che effettueremo tra poco, ma sommariamente questa impostazione è molto comoda e organizzata poichè basta istanziare la classe Dialoghi passandogli il contesto e successivamente, tramite il metodo mostra, scegliere il dialogo da visualizzare facendo
 

1 2	Dialoghi dialoghi = new Dialoghi(this); dialoghi.mostra(Dialoghi.DIALOGO1);

Ma vediamo ora come fare a creare il nostro dialogo personalizzato. Visto che ce l'abbiamo già sotto mano cominciamo dalla classe Dialoghi. Cosa dobbiamo aggiungere? La risposta è molto semplice: dobbiamo istanziare l'oggetto AlertDialog.Builder. Vediamo come fare.
 

1	builder = new AlertDialog.Builder(context);

Consiglio di inializzarlo nel metodo mostra ma anche nel costruttore va bene. Ora è chiaro che per poter avere un dialogo personalizzato dobbiamo definire noi il layout che deve avere e quindi andiamo a crearlo. Andiamo in /res/layout/ e creiamo un file XML che chiamiamo layout_dialogo. Potete mettere al suo interno tutto quello che volete e personalizzarlo come volete. In questo caso, giusto per fare un esempio, mettiamo una EditText, una TextView ed un Button. Procediamo.
 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="250.0dip" android:layout_height="fill_parent"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:fontFamily="sans-serif-light" android:textColor="@color/blu_holo" android:textSize="17sp"/> <EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:layout_marginRight="5.0dp" android:layout_marginLeft="5.0dp" android:layout_below="@+id/textView1" android:fontFamily="sans-serif-light"/> <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/editText1" android:layout_marginTop="20dp" android:background="?android:selectableItemBackground" android:fontFamily="sans-serif-light" android:text="Cliccami"/> </RelativeLayout>

Ho scelto e consiglio di usare il RelativeLayout perchè tramite gli attributi below, above, toRightOf ecc. permette di facilitare la gestione del posizionamento della varie Views. C'è ben poco da commentare. La TextView avrà una distanza dal margine superiore di 10dp e altrettanto dal margine sinistro. Il font scelto è il sans-serif-light, molto bello, elegante e minimale e le dimensioni del testo ammontano a 17sp. La EditText oltre al margine deve essere centrata orizzontalmente e deve stare sotto (below) la TextView. Infine, il Button occuperà tutto lo spazio disponibile in larghezza (fill_parent) e starà sotto la EditText. Il nostro layout XML è finito qui. Torniamo alla classe Dialoghi.

Dobbiamo ora "infilare" il layout poc'anzi creato nel dialogo e per questo si usa la classe LayoutInflater che come dice il nome stesso consente di infilare i layout. Istanziamo l'oggetto sempre nel metodo mostra facendo
 

1	inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

In uno dei due case (scegliete voi se quello del DIALOGO1 o del DIALOGO2) inserite.

1 2 3

view = inflater.inflate(R.layout.layout_dialogo, null); textView = (TextView)view.findViewById(R.id.nessunControllo);  builder.setView(view);

Abbiamo usato una View per infilarci dentro il layout e tramite essa abbiamo ottenuto il riferimento alla TextView. Infine, abbiamo applicato il layout al dialogo tramite il metodo setView. Ovviamente se volete potete anche ottenere il riferimento al Button ed impostare ad esso il metodo onClickListener per decidere cosa deve fare quando viene premuto. Per fare ciò inserite

1 2 3 4 5 6 7

bottone = (Button)view.findViewById(R.id.button1); bottone.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub     } });

Infine, alla fine del metodo mostra è assolutamente necessario inserire quanto segue per poter creare e visualizzare il dialogo. 
 

1	builder.create().show();

NOTA
Nel file colors.xml (values/colors.xml) il colore esadecimale corrispondente al blu_holo è #ff0099cc.

Fatto! Abbiamo finito. Eseguendo l'applicazione avremmo questo.