Accentsconagua
Share
Wat je gaat creërenEEN UIAlertController wordt gebruikt om een waarschuwingsbericht weer te geven in een app. Als er bijvoorbeeld een fout optreedt, kan de waarschuwing een beschrijving en knoppen weergeven om verdere actie te ondernemen. U kunt waarschuwingen gebruiken om gebruikers aan te melden of in te loggen, de resultaten van een actie die ze hebben gemaakt weer te geven of een paar meer instellingsopties te bieden, bijvoorbeeld wanneer u geen ruimte hebt voor extra knoppen op een scherm, maar gebruikers moeten kunnen om wat meer acties uit te voeren op een specifiek object in de app.
Sinds iOS 9 is Apple vervangen UIAlertView met UIAlertController. U hoeft niet langer het UIAlertViewDelegate in uw klas en kunnen nu uw alert opmaken zoals u dat wilt. U kunt de titel- en berichtlettertypen aanpassen, de achtergrondkleur wijzigen en tekstvelden toevoegen.Omwille van deze tutorial hebben we een demo-app gemaakt met drie knoppen, en elk zal een andere aangepaste melding activeren. Je kunt het downloaden van de bron van de zelfstudiebron op GitHub. Laten we nu eens kijken hoe eenvoudig het is om deze aangepaste meldingen samen te stellen!
De eerste melding die we gaan maken heeft een TextField bevestigd waar u alles wat u maar wilt kunt invoeren via het iOS-toetsenbord. Om een te initialiseren UIAlertController, je moet beginnen met deze drie lijnen:
let alert = UIAlertController (titel: "AlertController Tutorial", bericht: "Submit something", preferenceStyle: .alert)
In de eerste regel plaatsen we een eenvoudige reeks als titel van de waarschuwing. In de tweede regel staat de berichttekst die direct onder de titel wordt weergegeven. In de derde regel is het type van de waarschuwing ingesteld op .alarm. (Een andere optie is .actionSheet, maar u kunt een actiekaart niet aanpassen zoals u een waarschuwing kunt gebruiken.)
In een meldingscontroller zijn knoppen gedefinieerd als UIAlertAction elementen. Dus we gaan een maken UIAlertAction, welke de eerste knop links onderaan onze melding is.
// Submit-knop laat submitAction = UIAlertAction (titel: "Submit", style: .default, handler: (actie) -> Void in // Get 1st TextField's text laat textField = alert.textFields! [0] print (textField. tekst!))
We hebben deze actie genoemd submitAction, stel de titel in "Verzenden", gezien het de standaardstijl, en voor de handler, de inhoud van een tekstveld afgedrukt. Omdat tekstvelden in de waarschuwing een index hebben, hebben we de eerste geselecteerd op positie 0. Later zullen we zien hoe we meerdere tekstvelden aan een melding kunnen toevoegen.
Als je eenmaal op de voorleggen knop in uw melding, zal de Xcode-console de tekst die u hebt ingevoerd afdrukken en de waarschuwing afwijzen.
Laten we een knop maken om alleen onze waarschuwing te verbergen:
// Annuleren knop laat annuleren = UIAlertAction (titel: "Annuleren", stijl: .destructive, handler: (actie) -> Void in)
Zoals u kunt zien, heeft deze actie geen handler. Dat komt omdat we de waarschuwing willen negeren en geen andere acties willen uitvoeren. Deze knop geeft een rood weer annuleren titel omdat we zijn stijl hebben ingesteld als .vernietigend, die de Apple API zal begrijpen.
Voordat we deze twee acties aan de waarschuwing toevoegen, moeten we ons tekstveld initialiseren:
// Voeg 1 tekstveld toe en pas het aan alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Typ hier iets" textField.clearButtonMode =. whileEditing
Als u bekend bent met UITextFields, u herkent deze als standaardattributen die eigenschappen instellen zoals het uiterlijk en type van het toetsenbord, autocorrectietype, plaatshouderbericht en wisknop. (We hebben de knop Wissen ingesteld om te verschijnen wanneer u iets begint te typen.)
Laten we nu onze waarschuwing afmaken.
// Actieknoppen toevoegen en alertwaarschuwing presenteren.addAction (submitAction) alert.addAction (cancel) present (alert, geanimeerd: true, completion: nil)
De UIAlertController kan geen reeksen acties verwerken, dus moeten we ze een voor een toevoegen. Ten slotte presenteren we de waarschuwing zoals we elke andere controller zouden doen, met de aanwezig() functie.
In onze demo-app hebben we alle bovenstaande code ingevoegd in een Knop, dus als je de app uitvoert en erop tikt, zou je zoiets als dit moeten zien:
Als u iets in het lege tekstveld typt en raakt voorleggen, je Xcode-console zal het uitprinten.
Laten we nu een nieuwe melding maken met meerdere Tekstvelden om een loginprompt aan te maken. We beginnen opnieuw met de drie regels die onze waarschuwing initialiseren:
let alert = UIAlertController (titel: "Login example", bericht: "Insert username, password & phone No.", preferenceStyle: .alert)
We hebben er nog steeds twee Toetsen, één om een inlogactie uit te voeren en de annuleerknop:
// Login-knop laat inloggenAction = UIAlertAction (titel: "Login", stijl: .default, handler: (actie) -> Void in // Get TextFields-tekst laat gebruikersnaamTxt = alert.textFields! [0] laat passwordTxt = alert. textFields! [1] laat phoneTxt = alert.textFields! [2] print ("USERNAME: \ (usernameTxt.text!) \ nPASSWORD: \ (passwordTxt.text!) \ nPHONE NO .: \ (phoneTxt.text!)" ))Zoals u ziet, heeft onze waarschuwing drie tekstvelden. Deze worden geïndexeerd door hun positie. We behandelen de bovenste als de gebruikersnaam, de middelste als het wachtwoord en de laatste als een telefoonnummer.
Voeg nu een toe annuleren knop:
// Annuleren knop laat annuleren = UIAlertAction (titel: "Annuleren", stijl: .destructive, handler: (actie) -> Void in)
Vervolgens gaan we de gebruikersnaam maken en aanpassen Tekstveld:
// Voeg 1 textField (voor gebruikersnaam) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Type uw gebruikersnaam" textField.textColor = UIColor.green
De bovenstaande code lijkt behoorlijk op ons eerste voorbeeld, met de toevoeging van de tekst kleur aanleg.
Evenzo voor het tweede tekstveld:
// Voeg 2nd textField (voor wachtwoord) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Type uw wachtwoord" textField.isSecureTextEntry = true textField.textColor = UIColor .red
Aangezien wachtwoorden meestal moeten worden verborgen, hebben we de isSecureTextEntry attribuut op onze Tekstveld. Deze opdracht vervangt tekens die u typt met stippen, zoals wachtwoordvelden doen op een website. We hebben ook de tekstkleur ingesteld op rood.
En het derde tekstelement voor het veld met het telefoonnummer:
// Voeg 3e tekstveld toe (voor telefoonnummer) alert.addTextField (textField: UITextField) in textField.keyboardAppearance = .dark textField.keyboardType = .nummer Pad textField.placeholder = "Typ uw telefoonnr." textField.textColor = UIColor.blue textField.font = UIFont (naam: "AmericanTypewriter", maat: 14)
De keyboardType attribuut is ingesteld als .nummeriek toetsenbord hier, zodat de app alleen het numerieke toetsenbord zal weergeven. U merkt mogelijk ook dat we het lettertype van dit tekstveld hebben gewijzigd in Amerikaanse schrijfmachine in de laatste regel code.
We zijn bijna klaar - we hoeven alleen maar onze acties toe te voegen en de AlertController nog een keer:
// Actieknoppen toevoegen en waarschuwingswaarschuwing presenteren.addAction (loginAction) alert.addAction (cancel) present (alert, geanimeerd: true, completion: nil)
Nu, als je de app uitvoert en deze waarschuwing inschakelt, zie je zoiets als dit:
Als u iets in de tekstvelden probeert te typen, ziet u de aangepaste stijl die we hebben toegepast.
Als laatste voorbeeld laat ik je een waarschuwing zien met vier acties en een andere styling.
Aangezien we de titel- en berichtkenmerken van deze melding later aanpassen, bevat onze initialisatiecode nu lege tekenreeksen:
let alert = UIAlertController (title: "", message: "", preferenceStyle: .alert)
Zo stellen we het lettertype en de grootte van de titel- en berichtvelden in:
// Wijzig het lettertype van de titel en het bericht laat titleFont: [String: AnyObject] = [NSFontAttributeName: UIFont (name: "AmericanTypewriter", size: 18)! ] laat messageFont: [String: AnyObject] = [NSFontAttributeName: UIFont (name: "HelveticaNeue-Thin", grootte: 14)! ] let attributedTitle = NSMutableAttributedString (string: "Multiple buttons", attributen: titleFont) laat attributedMessage = NSMutableAttributedString (string: "Selecteer een actie", attributen: messageFont) alert.setValue (attributedTitle, forKey: "attributedTitle") alert.setValue ( attributedMessage, forKey: "attributedMessage")
In de eerste twee regels stellen we de naam en het formaat van het lettertype in als een Woordenboek van NSFontAttributeName. Let op: u moet de juiste PostScript-naam typen van het lettertype dat u wilt gebruiken, anders herkent Xcode het niet en wordt het standaardlettertype weergegeven. De iOS Fonts-site is een verwijzing naar de juiste lettertypenamen.
Hier zullen we ook de titel- en berichtstrings instellen met een instantie van NSMutableAttributedString.
Laten we vier acties maken, inclusief de standaard annuleren een:
let action1 = UIAlertAction (title: "Action 1", style: .default, handler: (action) -> Void in print ("ACTION 1 selected!")) laat action2 = UIAlertAction (titel: "Action 2", style: .default, handler: (action) -> Void in print ("ACTION 2 selected!")) laat action3 = UIAlertAction (title: "Action 3", style: .default, handler: (action) - > Void in print ("ACTION 3 geselecteerd!")) // Annuleren knop laat annuleren = UIAlertAction (titel: "Annuleren", stijl:. Destructief, handler: (actie) -> Void in) Voordat we deze acties koppelen aan onze waarschuwing, laten we het een beetje stylen.
// Restyle de weergave van de waarschuwing alert.view.tintColor = UIColor.brown // wijzig de tekstkleur van de knoppen alert.view.backgroundColor = UIColor.cyan // verander de achtergrondkleur alert.view.layer.cornerRadius = 25 // verander hoekradius
Hoewel de UIAlertController API is beperkt, zodat ontwikkelaars de standaardstructuur niet volledig kunnen wijzigen. We kunnen de stijl ervan bewerken zoals we hebben gedaan met de bovenstaande code.
Eindelijk kunnen we alle acties toevoegen en onze waarschuwing presenteren:
// Actieknoppen toevoegen en alertwaarschuwing presenteren.addAction (action1) alert.addAction (action2) alert.addAction (action3) alert.addAction (cancel) present (alert, geanimeerd: true, completion: nil)
Als u nu uw code uitvoert, krijgt u zoiets als dit:
In deze zelfstudie hebben we een reeks aangepaste items gemaakt UIAlertViews met tekstvelden en aangepaste styling. Ik hoop dat je deze kennis kunt gebruiken voor je volgende iOS-app.
We hebben een complete gids samengesteld om je te helpen snel te leren, of je nu net begint met de basis of als je meer geavanceerde onderwerpen wilt verkennen.
Je kunt ook enkele van onze andere tutorials bekijken over de ontwikkeling van Swift- en iOS-apps.
