Accentsconagua
Share
Cosa starai creandoUN UIAlertController viene utilizzato per visualizzare un messaggio di avviso in un'app. Ad esempio, se si verifica un errore, l'avviso può mostrare una descrizione e pulsanti per intraprendere ulteriori azioni. È possibile utilizzare gli avvisi per consentire agli utenti di accedere o registrarsi, mostrare i risultati di un'azione intrapresa o offrire alcune altre opzioni di impostazione, ad esempio quando non si ha spazio per pulsanti aggiuntivi su uno schermo, ma è necessario che gli utenti siano in grado di per eseguire altre azioni su un oggetto specifico nell'app.
Da iOS 9, Apple ha sostituito UIAlertView con UIAlertController. Non devi più aggiungere il UIAlertViewDelegate nella tua classe e ora puoi modellare il tuo avviso come desideri. È possibile personalizzare i caratteri del titolo e del messaggio, modificare il colore di sfondo e aggiungere campi di testo.Per questo tutorial abbiamo creato un'app demo con tre pulsanti, ognuno dei quali genera un avviso personalizzato diverso. Puoi scaricarlo dal repository sorgente tutorial su GitHub. Ora vediamo come è facile costruire questi avvisi personalizzati!
Il primo avviso che stiamo per costruire ha un Campo di testo allegato dove puoi inserire tutto ciò che vuoi dalla tastiera iOS. Per inizializzare a UIAlertController, devi iniziare con queste tre linee:
let alert = UIAlertController (titolo: "AlertController Tutorial", messaggio: "Invia qualcosa", preferredStyle: .alert)
Nella prima riga, impostiamo una stringa semplice come titolo dell'avviso. Nella seconda riga c'è la stringa del messaggio che verrà visualizzata sotto il titolo. Nella terza riga, il tipo di avviso è impostato su .mettere in guardia. (Un'altra opzione è .actionSheet, ma non è possibile personalizzare un foglio di azione come se fosse possibile un avviso.)
In un controller di avviso, i pulsanti sono definiti come UIAlertAction elementi. Quindi creeremo un UIAlertAction, che sarà il primo pulsante in basso a sinistra del nostro avviso.
// Pulsante Invia let submitAction = UIAlertAction (titolo: "Submit", style: .default, handler: (action) -> Void in // Trova 1st TextField's text lascia textField = alert.textFields! [0] print (textField. testo!) )
Abbiamo chiamato questa azione submitAction, imposta il suo titolo a "Sottoscrivi", dato lo stile di default, e per il suo gestore, ha stampato il contenuto di un campo di testo. Poiché i campi di testo nell'avviso hanno un indice, abbiamo selezionato il primo alla posizione 0. In seguito vedremo come aggiungere più campi di testo a un avviso.
Una volta che hai toccato il Sottoscrivi pulsante nel tuo avviso, la console Xcode stamperà il testo che hai inserito e chiuderà l'avviso.
Creiamo un pulsante per nascondere semplicemente il nostro avviso:
// Annulla pulsante let cancel = UIAlertAction (titolo: "Annulla", stile: .destructive, handler: (action) -> Void in)
Come puoi vedere, questa azione non ha alcun gestore. Questo perché vogliamo eliminare l'avviso e non eseguire altre azioni. Questo pulsante mostrerà un rosso Annulla titolo perché abbiamo impostato il suo stile come .distruttivo, che l'API Apple comprenderà.
Prima di aggiungere queste due azioni all'Alert, dobbiamo inizializzare il nostro campo di testo:
// Aggiungi 1 textField e personalizzalo alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Scrivi qualcosa qui" textField.clearButtonMode =. whileEditing
Se hai familiarità con UITextFields, li riconoscerai come attributi standard che impostano proprietà come aspetto e tipo della tastiera, tipo di correzione automatica, messaggio segnaposto e pulsante di cancellazione. (Abbiamo impostato il pulsante di cancellazione da mostrare quando inizi a digitare qualcosa.)
Ora, finiamo il nostro avviso.
// Aggiungi pulsanti di azione e presenta l'avviso Alert.addAction (submitAction) alert.addAction (cancel) presente (alert, animata: true, completion: nil)
Il UIAlertController non gestisce matrici di azioni, quindi dobbiamo aggiungerle una alla volta. Infine, presentiamo l'avviso come faremmo con qualsiasi altro controller, con presente() funzione.
Nella nostra app dimostrativa, abbiamo incorporato tutto il codice sopra in a Pulsante, quindi se esegui l'app e la tocchi, dovresti vedere qualcosa di simile a questo:
Se scrivi qualcosa nel campo di testo vuoto e premi Sottoscrivi, la tua console Xcode lo stamperà.
Ora creiamo un nuovo avviso con più elementi Campi di testo per creare un prompt di accesso. Inizieremo di nuovo con le tre linee che inizializzano il nostro avviso:
let alert = UIAlertController (titolo: "Login esempio", messaggio: "Inserisci nome utente, password e numero di telefono", preferredStyle: .alert)
Ne abbiamo ancora due pulsanti, uno per eseguire un'azione di login e il pulsante Annulla:
// Pulsante di login let loginAction = UIAlertAction (titolo: "Login", stile: .default, gestore: (action) -> Void in // Trova testo TextFields nomeutenteTxt = alert.textFields! [0] let passwordTxt = alert. textFields! [1] let phoneTxt = alert.textFields! [2] print ("USERNAME: \ (usernameTxt.text!) \ nPASSWORD: \ (passwordTxt.text!) \ nPHONE NO .: \ (phoneTxt.text!)" ))Come puoi vedere, il nostro avviso ha tre campi di testo. Questi sono indicizzati dalla loro posizione. Tratteremo quello superiore come nome utente, quello centrale come password e l'ultimo come numero di telefono.
Ora aggiungi un Annulla pulsante:
// Annulla pulsante let cancel = UIAlertAction (titolo: "Annulla", stile: .destructive, handler: (action) -> Void in)
Ora creeremo e personalizzeremo il nome utente Campo di testo:
// Aggiungi 1 textField (per nome utente) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Inserisci il tuo nome utente" textField.textColor = UIColor.green
Il codice sopra sembra molto simile al nostro primo esempio, con l'aggiunta del colore del testo esempio.
Allo stesso modo per il secondo campo di testo:
// Aggiungi 2nd textField (per password) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Inserisci la password" textField.isSecureTextEntry = true textField.textColor = UIColor .red
Poiché le password devono solitamente essere nascoste, abbiamo impostato il isSecureTextEntry attributo sul nostro Campo di testo. Questo comando sostituirà i caratteri che digiti con i punti, come i campi della password su un sito web. Abbiamo anche impostato il colore del testo in rosso.
E il terzo elemento di testo, per il campo del numero di telefono:
// Aggiungi 3rd textField (per il numero di telefono) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .numberPad textField.placeholder = "Inserisci il tuo numero di telefono". textField.textColor = UIColor.blue textField.font = UIFont (nome: "AmericanTypewriter", dimensione: 14)
Il KEYBOARDTYPE l'attributo è impostato come .numberpad qui, quindi l'app mostrerà solo la tastiera numerica. Si può anche notare che abbiamo cambiato il carattere di questo campo di testo in Macchina da scrivere americana nell'ultima riga di codice.
Abbiamo quasi finito - abbiamo solo bisogno di aggiungere le nostre azioni e presentare il AlertController ancora:
// Aggiungi pulsanti di azione e presenta l'avviso Alert.addAction (loginAction) alert.addAction (cancel) presente (alert, animata: true, completion: nil)
Ora, se esegui l'app e attivi questo avviso, vedrai qualcosa di simile a questo:
Se provi a digitare qualcosa nei campi di testo, vedrai lo stile personalizzato applicato.
Per un ultimo esempio, ti mostrerò un avviso con quattro azioni e alcuni stili diversi.
Poiché in seguito personalizzaremo gli attributi del titolo e del messaggio di questo avviso, il nostro codice di inizializzazione avrà ora stringhe vuote:
let alert = UIAlertController (title: "", message: "", preferredStyle: .alert)
Ecco come configureremo il carattere e la dimensione dei campi del titolo e del messaggio:
// Cambia il carattere del titolo e il messaggio lascia titleFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nome: "AmericanTypewriter", dimensione: 18)! ] let messageFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nome: "HelveticaNeue-Thin", dimensione: 14)! ] attribuito AttributoTitolo = NSMutableAttributedString (stringa: "Pulsanti multipli", attributi: titleFont) let attributeMessage = NSMutableAttributedString (stringa: "Seleziona un'azione", attributi: messageFont) alert.setValue (attributeTitle, forKey: "attributeTitle") alert.setValue ( attributeMessage, forKey: "attributeMessage")
Nelle prime due righe impostiamo il nome e la dimensione del font come a Dizionario di NSFontAttributeName. Si prega di notare che dovrete digitare il giusto nome PostScript del font che volete usare, altrimenti Xcode non lo riconoscerà e mostrerà il font predefinito. Il sito Fonts iOS è un riferimento ai nomi dei font corretti.
Qui imposteremo anche il titolo e le stringhe del messaggio con un'istanza di NSMutableAttributedString.
Creiamo quattro azioni, incluso il default Annulla uno:
let action1 = UIAlertAction (titolo: "Action 1", style: .default, handler: (action) -> Void in print ("ACTION 1 selezionato!")) let action2 = UIAlertAction (titolo: "Action 2", style: .default, handler: (action) -> Void in print ("ACTION 2 selected!")) let action3 = UIAlertAction (titolo: "Action 3", style: .default, handler: (action) - > Void in print ("ACTION 3 selezionato!")) // Annulla pulsante let cancel = UIAlertAction (titolo: "Cancel", style: .destructive, handler: (action) -> Void in) Prima di associare queste azioni al nostro avviso, modelliamolo un po '.
// Restyling della vista dell'avviso alert.view.tintColor = UIColor.brown // cambia il colore del testo dei pulsanti alert.view.backgroundColor = UIColor.cyan // cambia colore di sfondo alert.view.layer.cornerRadius = 25 // cambia raggio d'angolo
sebbene il API UIAlertController è limitato, in modo che gli sviluppatori non possano cambiare completamente la struttura predefinita, possiamo modificare il suo stile come abbiamo fatto con il codice sopra.
Finalmente possiamo aggiungere tutte le azioni e presentare il nostro avviso:
// Aggiungi pulsanti di azione e presenta l'avviso alert.addAction (action1) alert.addAction (action2) alert.addAction (action3) alert.addAction (cancel) presente (alert, animata: true, completion: nil)
Ora, se si esegue il codice, si otterrà qualcosa di simile:
In questo tutorial, abbiamo creato una serie di custom UIAlertViews con campi di testo e stili personalizzati. Spero che tu sia in grado di utilizzare questa conoscenza per la tua prossima app iOS.
Abbiamo creato una guida completa per aiutarti a imparare Swift, sia che tu stia appena iniziando con le basi o che desideri esplorare argomenti più avanzati.
Puoi anche consultare alcuni dei nostri altri tutorial sullo sviluppo di app Swift e iOS.
