introduction
UNE UIAlertController est utilisé pour afficher un message d’alerte dans une application. Par exemple, si une erreur se produit, l’alerte peut afficher une description et des boutons pour prendre d’autres mesures. Vous pouvez utiliser des alertes pour inciter les utilisateurs à se connecter ou à s’inscrire, afficher les résultats d’une action qu’ils ont effectuée ou offrir quelques options de paramètres supplémentaires, par exemple lorsque vous n’avez pas de place pour des boutons supplémentaires sur un écran mais que vous avez besoin que les utilisateurs puissent pour effectuer d’autres actions sur un objet spécifique dans l’application.
Depuis iOS 9, Apple a remplacé UIAlertView avec UIAlertController. Vous n’avez plus besoin d’ajouter le UIAlertViewDelegate dans votre classe et vous pouvez désormais personnaliser votre alerte comme vous le souhaitez. Vous pouvez personnaliser les polices de titre et de message, changer la couleur d’arrière-plan et ajouter des champs de texte. Pour les besoins de ce didacticiel, nous avons créé une application de démonstration avec trois boutons, et chacun déclenchera une alerte personnalisée différente. Vous pouvez le télécharger depuis le référentiel source du tutoriel sur GitHub. Voyons maintenant à quel point il est facile de créer ces alertes personnalisées!
Alerte avec un champ de texte
La première alerte que nous allons créer a un TextField attaché où vous pouvez saisir tout ce que vous voulez à partir du clavier iOS. Afin d’initialiser un UIAlertController, vous devez commencer par ces trois lignes:
let alert = UIAlertController(title: "AlertController Tutorial",
message: "Submit something",
preferredStyle: .alert)
Dans la première ligne, nous définissons une simple chaîne comme titre de l’alerte. Dans la deuxième ligne se trouve la chaîne de message qui sera affichée juste en dessous du titre. Sur la troisième ligne, le type d’alerte est défini sur .alert. (Une autre option est .actionSheet, mais vous ne pouvez pas personnaliser une feuille d’action comme vous pouvez une alerte.)
Dans un contrôleur d’alerte, les boutons sont définis comme UIAlertAction éléments. Nous allons donc créer un UIAlertAction, qui sera le premier bouton en bas à gauche de notre alerte.
// Submit button
let submitAction = UIAlertAction(title: "Submit", style: .default, handler: { (action) -> Void in
// Get 1st TextField's text
let textField = alert.textFields![0]
print(textField.text!)
})
Nous avons appelé cette action submitAction, définissez son titre sur "Submit", lui donnant le style par défaut, et pour son gestionnaire, imprimait le contenu d’un champ de texte. Étant donné que les champs de texte de l’alerte ont un index, nous avons sélectionné le premier à la position 0. Plus tard, nous verrons comment ajouter plusieurs champs de texte à une alerte.
Une fois que vous avez appuyé sur le Soumettre dans votre alerte, la console Xcode imprimera le texte que vous avez saisi et rejettera l’alerte.
Créons un bouton pour simplement masquer notre alerte:
// Cancel button
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
Comme vous pouvez le voir, cette action n’a pas de gestionnaire. C’est parce que nous voulons ignorer l’alerte et n’effectuer aucune autre action. Ce bouton affichera un rouge Annuler title parce que nous avons défini son style comme .destructive, ce que l’API Apple comprendra.
Avant d’ajouter ces deux actions à l’alerte, nous devons initialiser notre champ de texte:
// Add 1 textField and customize it
alert.addTextField { (textField: UITextField) in
textField.keyboardAppearance = .dark
textField.keyboardType = .default
textField.autocorrectionType = .default
textField.placeholder = "Type something here"
textField.clearButtonMode = .whileEditing
}
Si vous connaissez UITextFields, vous les reconnaîtrez comme des attributs standard qui définissent des propriétés telles que l’apparence et le type du clavier, le type de correction automatique, le message d’espace réservé et le bouton d’effacement. (Nous avons défini le bouton Effacer pour qu’il apparaisse lorsque vous commencez à taper quelque chose.)
Maintenant, terminons notre alerte.
// Add action buttons and present the Alert
alert.addAction(submitAction)
alert.addAction(cancel)
present(alert, animated: true, completion: nil)
le UIAlertController ne gère pas les tableaux d’actions, nous devons donc les ajouter une par une. Enfin, nous présentons l’alerte comme nous le ferions pour tout autre contrôleur – avec le present() fonction.
Dans notre application de démonstration, nous avons intégré tout le code ci-dessus dans un Bouton, donc si vous exécutez l’application et appuyez dessus, vous devriez voir quelque chose comme ceci:
Si vous tapez quelque chose dans le champ de texte vide et appuyez sur Soumettre, votre console Xcode l’imprimera.
Alerte avec trois champs de texte
Créons maintenant une nouvelle alerte avec plusieurs Champs de texte pour créer une invite de connexion. Nous recommencerons avec les trois lignes qui initialisent notre alerte:
let alert = UIAlertController(title: "Login example",
message: "Insert username, password & phone No.",
preferredStyle: .alert)
Nous en avons encore deux Boutons, un pour effectuer une action de connexion et le bouton Annuler:
// Login button
let loginAction = UIAlertAction(title: "Login", style: .default, handler: { (action) -> Void in
// Get TextFields text
let usernameTxt = alert.textFields![0]
let passwordTxt = alert.textFields![1]
let phoneTxt = alert.textFields![2]
print("USERNAME: (usernameTxt.text!)nPASSWORD: (passwordTxt.text!)nPHONE NO.: (phoneTxt.text!)")
})
Comme vous pouvez le voir, notre alerte comporte trois champs de texte. Ceux-ci sont indexés par leur position. Nous traiterons celui du haut comme nom d’utilisateur, celui du milieu comme mot de passe et le dernier comme numéro de téléphone.
Maintenant, ajoutez un Annuler bouton:
// Cancel button
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
Ensuite, nous allons créer et personnaliser le nom d’utilisateur Champ de texte:
// Add 1 textField (for username)
alert.addTextField { (textField: UITextField) in
textField.keyboardAppearance = .dark
textField.keyboardType = .default
textField.autocorrectionType = .default
textField.placeholder = "Type your username"
textField.textColor = UIColor.green
}
Le code ci-dessus est assez similaire à notre premier exemple, avec l’ajout du textColor exemple.
De même pour le deuxième champ de texte:
// Add 2nd textField (for password)
alert.addTextField { (textField: UITextField) in
textField.keyboardAppearance = .dark
textField.keyboardType = .default
textField.placeholder = "Type your password"
textField.isSecureTextEntry = true
textField.textColor = UIColor.red
}
Étant donné que les mots de passe doivent généralement être masqués, nous avons défini isSecureTextEntry attribut sur notre Champ de texte. Cette commande remplacera les caractères que vous saisissez par des points, comme le font les champs de mot de passe sur un site Web. Nous avons également défini la couleur du texte sur le rouge.
Et le troisième élément de texte, pour le champ du numéro de téléphone:
// Add 3rd textField (for phone no.)
alert.addTextField { (textField: UITextField) in
textField.keyboardAppearance = .dark
textField.keyboardType = .numberPad
textField.placeholder = "Type your phone no."
textField.textColor = UIColor.blue
textField.font = UIFont(name: "AmericanTypewriter", size: 14)
}
le keyboardType l’attribut est défini comme .numberPad ici, l’application affichera uniquement le clavier numérique. Vous pouvez également remarquer que nous avons changé la police de ce champ de texte en Machine à écrire américaine dans la dernière ligne de code.
Nous avons presque terminé, il suffit d’ajouter nos actions et de présenter les AlertController encore:
// Add action buttons and present the Alert
alert.addAction(loginAction)
alert.addAction(cancel)
present(alert, animated: true, completion: nil)
Maintenant, si vous exécutez l’application et déclenchez cette alerte, vous verrez quelque chose comme ceci:
Si vous essayez de taper quelque chose dans les champs de texte, vous verrez le style personnalisé que nous avons appliqué.
Alerte avec quatre boutons
Pour un dernier exemple, je vais vous montrer une alerte avec quatre actions et un style différent.
Puisque nous personnaliserons les attributs de titre et de message de cette alerte plus tard, notre code d’initialisation aura des chaînes vides pour le moment:
let alert = UIAlertController(title: "",
message: "",
preferredStyle: .alert)
Voici comment nous allons configurer la police et la taille des champs de titre et de message:
// Change font of the title and message
let titleFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "AmericanTypewriter", size: 18)! ]
let messageFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "HelveticaNeue-Thin", size: 14)! ]
let attributedTitle = NSMutableAttributedString(string: "Multiple buttons", attributes: titleFont)
let attributedMessage = NSMutableAttributedString(string: "Select an Action", attributes: messageFont)
alert.setValue(attributedTitle, forKey: "attributedTitle")
alert.setValue(attributedMessage, forKey: "attributedMessage")
Dans les deux premières lignes, nous définissons le nom et la taille de la police comme un dictionnaire de NSFontAttributeName. Veuillez noter que vous devrez taper le bon nom PostScript de la police que vous souhaitez utiliser, sinon Xcode ne la reconnaîtra pas et affichera la police par défaut. le Le site iOS Fonts est une référence aux noms de polices corrects.
Ici, nous allons également définir le titre et les chaînes de message avec une instance de NSMutableAttributedString.
Créons quatre actions, y compris la valeur par défaut Annuler un:
let action1 = UIAlertAction(title: "Action 1", style: .default, handler: { (action) -> Void in
print("ACTION 1 selected!")
})
let action2 = UIAlertAction(title: "Action 2", style: .default, handler: { (action) -> Void in
print("ACTION 2 selected!")
})
let action3 = UIAlertAction(title: "Action 3", style: .default, handler: { (action) -> Void in
print("ACTION 3 selected!")
})
// Cancel button
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })
Avant d’associer ces actions à notre alerte, stylisons-la un peu.
// Restyle the view of the Alert
alert.view.tintColor = UIColor.brown // change text color of the buttons
alert.view.backgroundColor = UIColor.cyan // change background color
alert.view.layer.cornerRadius = 25 // change corner radius
Bien que le API UIAlertController est limité, de sorte que les développeurs ne peuvent pas modifier complètement sa structure par défaut, nous pouvons modifier son style comme nous l’avons fait avec le code ci-dessus.
Enfin nous pouvons ajouter toutes les actions et présenter notre alerte:
// Add action buttons and present the Alert
alert.addAction(action1)
alert.addAction(action2)
alert.addAction(action3)
alert.addAction(cancel)
present(alert, animated: true, completion: nil)
Maintenant, si vous exécutez votre code, vous obtiendrez quelque chose comme ceci:
Conclusion
Dans ce didacticiel, nous avons créé une série de UIAlertViews avec des champs de texte et un style personnalisé. J’espère que vous serez en mesure de mettre ces connaissances en pratique pour votre prochaine application iOS.
Apprenez Swift
Nous avons créé un guide complet pour vous aider à apprendre Swift, que vous commenciez tout juste avec les bases ou que vous souhaitiez explorer des sujets plus avancés.
Vous pouvez également consulter certains de nos autres tutoriels sur le développement d’applications Swift et iOS.
-
Créez des applications iOS avec Swift
-
Appliquer des filtres photo avec l’image principale dans Swift
-
iOS 10: création d’interfaces de notification personnalisées
-
Commencez avec un modèle d’application iOS en 60 secondes
