Progettazione dell'interfaccia utente Android Conferma password

Esistono numerosi tipi di finestre di dialogo disponibili nell'SDK di Android, come DatePickerDialogs, ProgressDialogs e finestre di dialogo generiche come AlertDialogs. È anche possibile creare finestre di dialogo personalizzate da utilizzare all'interno delle applicazioni.

Le finestre di dialogo personalizzate come una finestra di dialogo di conferma password (Figura 1) sono generate da una speciale classe AlertDialog (android.app.AlertDialog). L'aspetto personalizzato della finestra di dialogo deriva dal fatto che invece di utilizzare i tipi di finestre di dialogo predefinite, con i loro layout predefiniti, si carica invece un layout definito dallo sviluppatore. In questo breve tutorial, forniamo i passaggi necessari per implementare una finestra di dialogo di conferma della password personalizzata per raccogliere una nuova password da parte dell'utente.

Prerequisiti: Nozioni di base sulla finestra di dialogo

Abbiamo già discusso su come aggiungere i controlli di base della finestra di dialogo alle tue classi di attività. Questo breve tutorial si basa sulle tue conoscenze dal tutorial di Android User Interface: Lavorare con le finestre di dialogo. È possibile aggiungere questa finestra di dialogo all'applicazione di esempio della finestra di dialogo fornita nel tutorial sopra menzionato o creare la propria applicazione.

Passaggio 1: progettare il layout della finestra di dialogo personalizzata

Innanzitutto è necessario progettare il contenuto della finestra di dialogo personalizzata in un file di risorse di layout. In questo caso, il nostro layout personalizzato sarà una finestra di dialogo di conferma della password, il che significa che avremo bisogno di due controlli EditText per inserire la password. Vogliamo anche altri controlli di testo per etichette e simili.

Crea una risorsa di layout chiamata /res/layout/password_dialog.xml. I contenuti di questo file di risorse sono mostrati di seguito:

        

Questo semplice file di layout si basa su poche altre risorse di stringa che dovrai definire (etichette, vedere il codice sorgente completo per i dettagli se hai bisogno di aiuto per definire le risorse stringa) e l'attributo del tipo di input EditText chiamato textPassword, che maschera la password come è stato digitato nel controllo. Questa figura mostra come appare il layout design:

Passaggio 2: definire una finestra di dialogo Nuova password all'interno della propria classe di attività

Ora aggiungiamo la nuova finestra di dialogo alla tua classe di attività di base.

Inizia modificando la tua classe di attività e aggiungendo la seguente variabile membro della classe:

 private static final int MY_PASSWORD_DIALOG_ID = 4;

Questo definisce un identificatore di finestra di dialogo univoco per la nostra classe di attività. Il valore è un numero arbitrario, ma deve essere univoco all'interno dell'attività.

Passaggio 3: gonfiare il layout della finestra di dialogo personalizzata

Per creare istanze di dialogo, è necessario fornire un caso per la finestra di dialogo di conferma della password personalizzata nel metodo onCreateDialog () della classe di attività. Quando viene chiamato il metodo showDialog (), attiva una chiamata a questo metodo, che deve restituire l'istanza della finestra di dialogo appropriata. Pertanto, iniziamo la specifica case statement per la tua nuova finestra di dialogo all'interno del metodo onCreateDialog () qui gonfiando il nostro file di layout personalizzato che è stato progettato nel passaggio precedente e recuperando i controlli importanti con cui vorremmo interagire da dentro usando findViewById ( ) metodo.

 case MY_PASSWORD_DIALOG_ID: LayoutInflater inflater = (LayoutInflater) getSystemService (Context.LAYOUT_INFLATER_SERVICE); layout di visualizzazione finale = inflater.inflate (R.layout.password_dialog, (ViewGroup) findViewById (R.id.root)); final EditText password1 = (EditText) layout.findViewById (R.id.EditText_Pwd1); final EditText password2 = (EditText) layout.findViewById (R.id.EditText_Pwd2); errore TextView finale = (TextView) layout.findViewById (R.id.TextView_PwdProblem); // TODO: Crea finestra di dialogo qui e restituiscilo (vedi i passaggi successivi)

Come puoi vedere, prendiamo i due controlli EditText che memorizzeranno i dati della password, così come il controllo TextView dove possiamo visualizzare il testo dell'errore della password (le password corrispondono o non corrispondono).

Passaggio 4: implementare Password TextWatcher

Il prossimo passo della nostra implementazione della dichiarazione case onCreateDialog () per la finestra di dialogo personalizzata è registrare un TextWatcher sul secondo controllo EditText in modo che possiamo ascoltare e rilevare le corrispondenze delle password mentre l'utente digita per visualizzare il testo corretto della stringa nell'errore Controllo TextView (corrisponde / non corrisponde).

Ecco l'implementazione di TextWatcher, che viene assegnato al controllo EditText della seconda password utilizzando il metodo addTextChangedListener ().

 password2.addTextChangedListener (new TextWatcher () public void afterTextChanged (Editable s) String strPass1 = password1.getText (). toString (); String strPass2 = password2.getText (). toString (); if (strPass1.equals (strPass2 )) error.setText (R.string.settings_pwd_equal); else error.setText (R.string.settings_pwd_not_equal); public public beforeTextChanged (CharSequence s, int start, int count, int after)  vuoto pubblico onTextChanged (CharSequence s, int start, int before, int count) );

TextWatcher ha tre metodi di callback, ma in realtà ci interessa solo l'implementazione del metodo afterTextChanged (). Qui controlliamo il testo dei due controlli EditText, li confrontiamo e impostiamo il testo dell'errore in TextView. Ecco cosa può mostrare TextWatcher quando le password corrispondono:

Passaggio 5: utilizzare il Generatore di finestre di dialogo per configurare la finestra di dialogo

Il prossimo passo della nostra implementazione della dichiarazione case onCreateDialog () per la finestra di dialogo di conferma della password personalizzata consiste nell'utilizzare la classe AlertDialog.Builder per iniziare a configurare le impostazioni della finestra di dialogo.

 AlertDialog.Builder builder = new AlertDialog.Builder (this); builder.setTitle ("Inserisci password"); builder.setView (layout);

Impostiamo il titolo della finestra di dialogo usando il metodo setTitle (), ma la cosa più importante che facciamo qui è usare il metodo setView () per collegare il nostro layout personalizzato che abbiamo appena gonfiato nella finestra di dialogo. Questo è il modo in cui modifichiamo i controlli utilizzati all'interno della nostra finestra di dialogo, rendendola dotata di display personalizzato e comportamento definito dallo sviluppatore.

Passaggio 6: impostare i gestori di pulsanti positivi e negativi per la finestra di dialogo Password personalizzata

Successivamente, dobbiamo configurare i pulsanti positivi e negativi associati alla nostra finestra di dialogo. Ricorda che le finestre di dialogo saranno riutilizzate se visualizzate più di una volta. Con la nostra finestra di dialogo di conferma della password, vogliamo essere sicuri di rimuovere con forza la finestra di dialogo dal pool di finestre di Activity in modo che non possa essere riutilizzata. Non vogliamo che le informazioni sulla password residua vengano archiviate dopo che la nostra finestra di dialogo della password è stata chiusa, indipendentemente dal fatto che sia stata confermata o chiusa.

 builder.setNegativeButton (android.R.string.cancel, new DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int whichButton) removeDialog (MY_PASSWORD_DIALOG_ID);); builder.setPositiveButton (android.R.string.ok, new DialogInterface.OnClickListener () public void onClick (DialogInterface dialog, int which) String strPassword1 = password1.getText (). toString (); String strPassword2 = password2.getText ( ) .toString (); if (strPassword1.equals (strPassword2)) Toast.makeText (SuperSimpleDialogsActivity.this, "Password di corrispondenza =" + strPassword2, Toast.LENGTH_SHORT) .show (); removeDialog (MY_PASSWORD_DIALOG_ID);) ;

Ci liberiamo della finestra di dialogo in entrambi i gestori di clic sui pulsanti negativi e positivi utilizzando il metodo removeDialog (). Tuttavia, nel gestore di pulsanti positivo, recuperiamo anche il contenuto dei controlli EditText e, se corrispondono, visualizziamo la password come messaggio Toast. Nella maggior parte dei casi, non useresti un Toast, ma salvi la password usando il metodo che preferisci (preferenze, ecc.).

Passaggio 7: generare Custom AlertDialog dal Builder

La tua finestra di dialogo è completamente configurata. Ora usa il metodo create () della classe AlertDialog.Builder per generare l'AlertDialog appropriato e restituiscilo, terminando così l'istruzione case per questa finestra di dialogo all'interno del metodo onCreateDialog () della classe Activity.

 AlertDialog passwordDialog = builder.create (); return passwordDialog;

Passaggio 8: attivazione della finestra di dialogo di conferma della password da visualizzare

Infine, sei pronto per attivare la finestra di dialogo di conferma della password da visualizzare come richiesto. Ad esempio, potresti aggiungere un altro controllo Button allo schermo della tua attività per attivare la visualizzazione della finestra di dialogo. Il suo gestore di clic potrebbe essere simile a questo:

 public void onPasswordDialogButtonClick (Visualizza v) showDialog (MY_PASSWORD_DIALOG_ID); 

Conclusione

Le finestre di dialogo sono un potente strumento di interfaccia utente che può aiutarti a mantenere l'interfaccia utente dell'applicazione flessibile e senza fronzoli. Le finestre di dialogo possono contenere risorse di layout personalizzate con controlli diversi, consentendo di creare controlli personalizzati come le finestre di dialogo di conferma password. Le finestre di dialogo personalizzate vengono generalmente create utilizzando la classe AlertDialog, con tutte le sue funzionalità.

Riguardo agli Autori

Gli sviluppatori mobili Lauren Darcey e Shane Conder hanno coautore diversi libri sullo sviluppo di Android: un libro di programmazione approfondito intitolato Sviluppo di applicazioni wireless Android, seconda edizione e Sams ti insegna a sviluppare applicazioni Android in 24 ore, seconda edizione. Quando non scrivono, passano il loro tempo a sviluppare software mobile presso la loro azienda ea fornire servizi di consulenza. Possono essere contattati via email a [email protected], tramite il loro blog su androidbook.blogspot.com e su Twitter @androidwireless.

Hai bisogno di più aiuto nella scrittura di app per Android? Consulta i nostri ultimi libri e risorse!

я я