Creați un controler personalizat de alertă cu Swift

Ce veți crea

Introducere

UIAlertController este utilizat pentru a afișa un mesaj de alertă într-o aplicație. De exemplu, dacă apare o eroare, alerta poate afișa o descriere și butoanele pentru a întreprinde acțiuni suplimentare. Aveți posibilitatea să utilizați alertele pentru a vă conecta sau înscrie utilizatorii, pentru a afișa rezultatele unei acțiuni pe care au făcut-o sau pentru a oferi câteva opțiuni pentru setări - de exemplu, când nu aveți loc pentru butoanele suplimentare pe ecran, dar aveți nevoie de utilizatori pentru a putea pentru a efectua mai multe acțiuni pe un anumit obiect din aplicație.

De la iOS 9, Apple a înlocuit UIAlertView cu UIAlertController. Nu mai trebuie să adăugați UIAlertViewDelegate în clasa ta și acum poți să îți modifici alerta așa cum dorești. Puteți personaliza fonturile de titlu și mesaje, puteți schimba culoarea de fundal și puteți adăuga câmpuri de text.De dragul acestui tutorial am creat o aplicație demo cu trei butoane și fiecare va declanșa o alarmă personalizată diferită. Puteți să o descărcați din sursa repo de tutorial pe GitHub. Acum, să vedem cât de ușor este să construiți aceste alerte personalizate!

Alerta cu un câmp text

Prima alertă pe care o vom construi are a TextField atașat de unde puteți introduce orice doriți de la tastatura iOS. Pentru a inițializa o UIAlertController, trebuie să începeți cu aceste trei linii:

 la alertă = UIAlertController (titlu: "AlertController Tutorial", mesaj: "Trimite ceva", preferatStyle: .alert)

În primul rând, am setat un șir simplu ca titlu al alertei. În al doilea rând este șirul de mesaje care va fi afișat chiar sub titlu. În al treilea rând, tipul de alertă este setat la .alerta. (O altă opțiune este .actionSheet, dar nu puteți personaliza o foaie de acțiune ca o alertă.)

Într-un controler de alertă, butoanele sunt definite ca UIAlertAction elemente. Așa că vom crea un a UIAlertAction, care va fi primul buton din partea stângă jos a alertei noastre. 

 / / Trimite butonul lasati submitAction = UIAlertAction (titlu: "Trimite", stil: .default, handler: (action) -> Void in // Obtine textul 1 TextField permite textField = alert.textFields [0] print (textField. text!) )

Am denumit această acțiune submitAction, setați titlul la "A depune", având în vedere stilul implicit, iar pentru handlerul său, a tipărit conținutul unui câmp de text. Deoarece câmpurile de text din alertă au un index, am selectat primul în poziția 0. Mai târziu, vom vedea cum să adăugăm mai multe câmpuri de text la o alertă.

Odată ce ați apăsat A depune butonul din alertă, consola Xcode va imprima textul introdus și va respinge avertizarea.

Să creați un buton pentru a ne ascunde avertizarea:

 // butonul Anulare lăsați anulați = UIAlertAction (titlu: "Anulare", stil: .destructivă, handler: (acțiune) -> Void in) 

După cum puteți vedea, această acțiune nu are nici un manipulant. Asta pentru că vrem să respingem alerta și să nu mai facem alte acțiuni. Acest buton va afișa un roșu Anulare titlu pentru că ne-am stabilit stilul .distructiv, pe care API-ul Apple o va înțelege.

Înainte de a adăuga aceste două acțiuni la Alertă, trebuie să inițializăm câmpul nostru text:

// Adăugați 1 textField și personalizați-l alert.addTextField (textField: UITextField) în textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Introduceți ceva aici" textField.clearButtonMode =. în timp ce editează

Dacă sunteți familiarizat cu UITextFields, le veți recunoaște ca atribute standard care stabilesc proprietăți cum ar fi aspectul și tipul tastaturii, tipul de autocorecție, mesajul substituent și butonul clar. (Am setat butonul clar pentru a apărea când începeți să scrieți ceva.)

Acum, să terminăm alerta.

 // Adăugați butoane de acțiune și prezentați Alert alert.addAction (submitAction) alert.addAction (anulați) prezent (alertă, animat: adevărat, completare: nil)

UIAlertController nu manipulează o serie de acțiuni, așa că trebuie să le adăugăm unul câte unul. În cele din urmă, prezentăm alerta ca și noi orice alt controlor - cu prezent() funcţie.

În aplicația noastră demo, am încorporat tot codul de mai sus într-un Buton, deci dacă rulați aplicația și atingeți-o, ar trebui să vedeți ceva de genul:

Dacă introduceți ceva în câmpul de text gol și apăsați A depune, consola dvs. Xcode va imprima.

Alerta cu trei câmpuri de text

Acum, să creăm o alertă nouă cu mai multe Câmpurile de text pentru a crea un prompt de conectare. Vom începe din nou cu cele trei linii care ne inițializează alerta:

 la alertă = UIAlertController (titlu: "Exemplul de conectare", mesaj: "Introduceți numele de utilizator, parola și numărul de telefon", preferatStyle: .alert)

Mai avem două Butoane, una pentru a efectua o acțiune de conectare și butonul de anulare:

 // Butonul de conectare permite loginAction = UIAlertAction (titlu: "Login", stil: .default, handler: (action) -> Void in // Obtine textul TextFields permite usernameTxt = alert.textFields! [0] let passwordTxt = alert. TextFields! [1] permite telefonTxt = alert.textFields! [2] print ("USERNAME: \ (usernameTxt.text!) \ nPASSWORD: \ (passwordTxt.text! ))

După cum puteți vedea, alerta noastră are trei câmpuri de text. Acestea sunt indexate după poziția lor. Îi vom trata pe cel de sus drept numele de utilizator, cel din mijloc ca parolă și ultimul ca numărul de telefon. 

Acum adaugati a Anulare buton:

 // butonul Anulare lăsați anulați = UIAlertAction (titlu: "Anulare", stil: .destructivă, handler: (acțiune) -> Void in) 

Apoi vom crea și personaliza numele de utilizator Câmp de text:

 // Adăugați 1 textField (pentru numele de utilizator) alert.addTextField (textField: UITextField) în textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Introduceți numele de utilizator" textField.textColor = UIColor.green 

Codul de mai sus arată destul de similar cu primul nostru exemplu, cu adăugarea lui culoarea textului instanță.

În mod similar și pentru al doilea câmp text:

 // Adăugați al doilea textField (pentru parolă) alert.addTextField (textField: UITextField) în textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Introduceți parola" textField.isSecureTextEntry = true textField.textColor = UIColor .roșu 

Întrucât parolele trebuie de obicei ascunse, am setat isSecureTextEntry atributul nostru Câmp de text. Această comandă va înlocui caracterele pe care le introduceți cu puncte, ca câmpuri de parolă pe un site web. De asemenea, am setat culoarea textului pe roșu.

Și al treilea element de text, pentru câmpul numărului de telefon:

 // Add 3rd textField (pentru numărul de telefon) alert.addTextField (textField: UITextField) în textField.keyboardAppearance = .dark textField.keyboardType = .numberPad textField.placeholder = "Tastați nr. Telefonului" textField.textColor = UIColor.blue textField.font = UIFont (nume: "AmericanTypewriter", dimensiune: 14)

keyboardType atributul este setat ca .numberpad aici, astfel încât aplicația va afișa numai tastatura numerică. De asemenea, ați putea observa că am schimbat fontul acestui câmp text Tipografia americană în ultima linie de cod.

Aproape am terminat - trebuie doar să adăugăm acțiunile noastre și să prezentăm AlertController din nou:

 // Adăugați butoane de acțiune și prezentați Alert alert.addAction (loginAction) alert.addAction (anulați) prezent (alertă, animat: true, completare: nil)

Acum, dacă rulați aplicația și ardeți această alertă, veți vedea ceva de genul:

Dacă încercați să introduceți ceva în câmpurile de text, veți vedea stilul personalizat pe care l-am aplicat.

Alertă cu patru butoane

Pentru un exemplu final, vă voi arăta o alertă cu patru acțiuni și un stil diferit.

Deoarece vom personaliza atributele de titlu și de mesaj ale acestei avertizări mai târziu, codul de inițializare va avea, pentru moment, șiruri goale:

 la alertă = UIAlertController (titlu: "", mesaj: "", preferatStyle: .alert)

Iată cum vom configura fontul și dimensiunea câmpurilor de titlu și de mesaje:

 // Schimbați fontul titlului și mesajului let titleFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nume: "AmericanTypewriter", dimensiune: 18)! ] permite messageFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nume: "HelveticaNeue-Thin", dimensiune: 14)! ] lasa atribuitTitle = NSMutableAttributedString (string: "Multiple butoane", atribute: titleFont) lasati attributedMessage = NSMutableAttributedString (string: "Select a Action", atribute: messageFont) alert.setValue (attributedTitle, forKey: attributedTitle) alert.setValue attributedMessage, pentruKey: "attributedMessage") 

În primele două rânduri, setăm numele și dimensiunea fontului ca a Dicţionar de NSFontAttributeName. Rețineți că va trebui să tastați numele PostScript corect al fontului pe care doriți să îl utilizați, altfel Xcode nu o va recunoaște și va afișa fontul implicit. Site-ul Fonturi iOS este o referință la numele de fonturi corecte.

Aici vom seta, de asemenea, șirurile de titlu și de mesaje cu o instanță de NSMutableAttributedString

Să creăm patru acțiuni, inclusiv implicit Anulare unu:

(actiune 1), actiune 1 = UIAlertAction (titlu: "Actiune 1", stil: .default, handler: (action) (action) -> Void in print ("ACTION 2 select!"))) action3 = UIAlertAction (titlu: "Action 3", stil: .default, handler: (action) > Void in print ("ACTION 3 a fost selectat!")))) // butonul Cancel renunta la cancel = UIAlertAction (titlu: "Cancel", stil: .destructive, handler: (action) -> Void in) 

Înainte de a atașa aceste acțiuni la alerta noastră, haideți să o prezentăm puțin.

 // Restul vizualizării Alert alert.view.tintColor = UIColor.brown // modificarea culorii textului butoanelor alert.view.backgroundColor = UIColor.cyan // modificarea culorii de fundal alert.view.layer.cornerRadius = 25 // schimba raza de colt

desi UIAlertController API este limitat, astfel încât dezvoltatorii să nu își poată schimba complet structura implicită, putem modifica stilul său așa cum am făcut-o cu codul de mai sus.

În cele din urmă, putem adăuga toate acțiunile și putem prezenta alerta:

 // Adăugați butoane de acțiune și prezentați Alert alert.addAction (action1) alert.addAction (action2) alert.addAction (action3) alert.addAction (anulați) prezent (alertă, animat:

Acum, dacă executați codul dvs., veți obține ceva de genul:

Concluzie

În acest tutorial, am creat o serie de personalizate UIAlertViews cu câmpuri de text și stil personalizat. Sper că puteți să utilizați aceste cunoștințe pentru următoarea aplicație iOS.

Aflați Swift

Am construit un ghid complet pentru a vă ajuta să învățați Swift, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați subiecte mai avansate.

Puteți, de asemenea, verifica unele dintre celelalte tutoriale ale noastre despre dezvoltarea aplicațiilor Swift și iOS.

  • Creați aplicații iOS cu Swift

    iOS 10 tocmai a fost lansat, iar cu el, Swift 3. Swift este un nou limbaj de programare de la Apple, conceput special pentru crearea iOS, macOS și ...
    Markus Mühlberger
    Rapid
  • Aplicați filtrele foto cu imaginea de bază în Swift

    Dacă doriți să descoperiți cum să adăugați efecte foto în iOS, ați ajuns la locul potrivit. În acest tutorial veți crea o aplicație simplă care va aplica unele ...
    Francesco Franchini
    iOS SDK
  • iOS 10: Crearea de interfețe personalizate de notificare

    În acest tutorial, veți învăța cum să utilizați noul cadru UserNotificationsUI din iOS 10 pentru a crea interfețe personalizate pentru aplicațiile locale și pentru a le împinge ...
    Davis Allie
    iOS SDK
  • Începeți cu un șablon de aplicație pentru iOS în 60 de secunde

    CodeCanyon are sute de șabloane de aplicații iOS pe care le puteți utiliza pentru a vă începe să vă dezvoltați. Acest videoclip vă va arăta cum să instalați și să personalizați ...
    Derek Jensen
    iOS
Cod