Créer un contrôleur d’alerte personnalisé avec Swift

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:

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.

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:

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:

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.)

En relation :  Google Maps propose de nouvelles astuces pour les passagers de bus

Maintenant, terminons notre alerte.

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:

Contrôleur d'alerte avec 1 champ de texte

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:

Nous en avons encore deux Boutons, un pour effectuer une action de connexion et le bouton Annuler:

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:

Ensuite, nous allons créer et personnaliser le nom d’utilisateur Champ de texte:

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:

É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:

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:

Maintenant, si vous exécutez l’application et déclenchez cette alerte, vous verrez quelque chose comme ceci:

Contrôleur d'alerte avec 3 champs de texte

Si vous essayez de taper quelque chose dans les champs de texte, vous verrez le style personnalisé que nous avons appliqué.

Champs de texte personnalisés dans l'alerte

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:

Voici comment nous allons configurer la police et la taille des champs de titre et de message:

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.

En relation :  Comment analyser et améliorer votre réseau Wi-Fi avec votre Mac

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:

Avant d’associer ces actions à notre alerte, stylisons-la un peu.

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:

Maintenant, si vous exécutez votre code, vous obtiendrez quelque chose comme ceci:

Contrôleur d'alerte avec 4 boutons

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

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.