Accentsconagua
Share
Ce que vous allez créerUNE 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 des mesures supplémentaires. Vous pouvez utiliser des alertes pour que les utilisateurs se connectent ou s'inscrivent, affichent les résultats d'une action qu'ils ont effectuée ou offrent 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 effectuer quelques actions supplémentaires sur un objet spécifique dans l'application.
Depuis iOS 9, Apple a remplacé UIAlertView avec UIAlertController. Vous n'êtes plus obligé d'ajouter le UIAlertViewDelegate dans votre classe et êtes maintenant en mesure de personnaliser votre alerte à votre guise. Vous pouvez personnaliser les polices de titre et de message, changer la couleur de fond et ajouter des champs de texte.Pour les besoins de ce didacticiel, nous avons créé une application de démonstration avec trois boutons, chacun déclenchant une alerte personnalisée différente. Vous pouvez le télécharger depuis le dépôt source du tutoriel sur GitHub. Voyons maintenant à quel point il est facile de créer ces alertes personnalisées.!
La première alerte que nous allons construire a un Champ de texte attaché où vous pouvez entrer tout ce que vous voulez depuis le clavier iOS. Pour initialiser un UIAlertController, vous devez commencer par ces trois lignes:
let alert = UIAlertController (titre: "Didacticiel AlertController", message: "Soumettre quelque chose", preferredStyle: .alert)
Dans la première ligne, nous définissons une simple chaîne comme titre de l'alerte. La deuxième ligne est la chaîne de message qui sera affichée juste en dessous du titre. Sur la troisième ligne, le type de l'alerte est défini sur .alerte. (Une autre option est .fiche action, mais vous ne pouvez pas personnaliser une feuille d’action comme une alerte.)
Dans un contrôleur d’alerte, les boutons sont définis comme suit: UIAlertAction éléments. Nous allons donc créer un UIAlertAction, qui sera le premier bouton en bas à gauche de notre alerte.
// bouton Submit let submitAction = UIAlertAction (titre: "Submit", style: .default, gestionnaire: (action) -> Annulation dans // Récupère le texte de 1st TextField, laissant textField = alert.textFields! [0] print (textField. texte!) )
Nous avons appelé cette action submitAction, mettre son titre à "Soumettre", étant donné le style par défaut, et pour son gestionnaire, imprimé le contenu d'un champ de texte. Comme les champs de texte de l'alerte ont un index, nous avons sélectionné le premier en position 0. Nous verrons plus loin comment ajouter plusieurs champs de texte à une alerte..
Une fois que vous avez appuyé sur le Soumettre bouton de votre alerte, la console Xcode imprimera le texte que vous avez entré et rejettera l’alerte.
Créons un bouton pour masquer notre alerte:
// Bouton Annuler permet d'annuler = UIAlertAction (titre: "Annuler", style: .destructive, gestionnaire: (action) -> Annuler dans)
Comme vous pouvez le constater, cette action n’a pas de gestionnaire. C'est parce que nous voulons rejeter l'alerte et ne pas effectuer d'autres actions. Ce bouton affichera un rouge Annuler titre parce que nous avons défini son style .destructeur, que l'API Apple comprendra.
Avant d'ajouter ces deux actions à l'alerte, nous devons initialiser notre champ de texte:
// Ajouter 1 textField et le personnaliser alert.addTextField (textField: UITextField) dans textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Tapez quelque chose ici" textField.clearButtonMode =. pendant l'edition
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 vide. (Nous avons configuré le bouton d'effacement pour qu'il apparaisse lorsque vous commencez à taper quelque chose.)
Maintenant, finissons notre alerte.
// Ajoute des boutons d'action et présente l'alerte alert.addAction (submitAction) alert.addAction (cancel) present (alert, animated: true, complétion: nil)
le UIAlertController ne gère pas de tableaux d'actions, nous devons donc les ajouter un par un. Enfin, nous présentons l'alerte comme n'importe quel autre contrôleur avec le présent() une 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.
Maintenant, créons une nouvelle alerte avec plusieurs Champs de texte pour créer une invite de connexion. Nous allons recommencer avec les trois lignes qui initialisent notre alerte:
let alert = UIAlertController (titre: "Exemple de connexion", message: "Insérer le nom d'utilisateur, le mot de passe et le numéro de téléphone", preferredStyle: .alert)
Nous avons encore deux Boutons, un pour effectuer une action de connexion et le bouton annuler:
// Le bouton de connexion laisse loginAction = UIAlertAction (titre: "Connexion", style: .default, gestionnaire: (action) -> Annuler dans le texte // Obtenir le texte TextFields, laissez usernameTxt = alert.textFields! [0], laissez passwordTxt = alert. textFields! [1] let phoneTxt = alert.textFields! [2] print ("NOM D'UTILISATEUR: \ (usernameTxt.text!) \ nPASSWORD: \ (passwordTxt.text!) \ nNON DE TÉLÉPHONE: \ (phoneTxt.text!)" ))Comme vous pouvez le constater, notre alerte comporte trois champs de texte. Ceux-ci sont indexés par leur position. Nous traiterons le premier en tant que nom d'utilisateur, le second en tant que mot de passe et le dernier en tant que numéro de téléphone..
Maintenant, ajoutez un Annuler bouton:
// Bouton Annuler permet d'annuler = UIAlertAction (titre: "Annuler", style: .destructive, gestionnaire: (action) -> Annuler dans)
Ensuite, nous allons créer et personnaliser le nom d'utilisateur Champ de texte:
// Ajouter 1 textField (pour nom d'utilisateur) alert.addTextField (textField: UITextField) dans textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Tapez votre nom d'utilisateur" textField.textColor = UIColor.green
Le code ci-dessus ressemble assez à notre premier exemple, avec l’ajout du textColor exemple.
De même pour le deuxième champ de texte:
// Ajouter un second champ textField (pour le mot de passe) alert.addTextField (textField: UITextField) dans textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Tapez votre mot de passe" textField.isSecureTextEntry = true textField.textColor = textUield .rouge
Puisque les mots de passe doivent généralement être cachés, nous avons défini la isSecureTextEntry attribuer à notre Champ de texte. Cette commande remplacera les caractères que vous tapez avec 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 rouge.
Et le troisième élément de texte, pour le champ numéro de téléphone:
// Ajouter un 3ème textField (pour le numéro de téléphone) alert.addTextField (textField: UITextField) dans textField.keyboardAppearance = .dark textField.keyboardType = .numberPad textField.placeholder = "Entrez votre numéro de téléphone." textField.textColor = UIColor.blue textField.font = UIFont (nom: "AmericanTypewriter", taille: 14)
le keyboardType attribut est défini comme .pavé numérique ici, l’application n’affiche que le clavier numérique. Vous pouvez également remarquer que nous avons modifié la police de ce champ de texte en Machine à écrire américaine dans la dernière ligne de code.
Nous avons presque terminé, nous avons juste besoin d'ajouter nos actions et de présenter le AlertController encore:
// Ajoute des boutons d'action et présente l'alerte alert.addAction (loginAction) alert.addAction (cancel) present (alert, animated: true, complétion: nil)
Maintenant, si vous exécutez l'application et déclenchez cette alerte, vous verrez quelque chose comme ceci:
Si vous essayez de saisir quelque chose dans les champs de texte, vous verrez le style personnalisé que nous avons appliqué.
Pour un dernier exemple, je vais vous montrer une alerte avec quatre actions et un style différent..
Comme nous allons personnaliser les attributs de titre et de message de cette alerte ultérieurement, notre code d'initialisation aura des chaînes vides pour l'instant:
let alert = UIAlertController (titre: "", message: "", preferredStyle: .alert)
Voici comment nous allons configurer la police et la taille du titre et des champs de message:
// Changer la police du titre et du message, laissez titleFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nom: "AmericanTypewriter", taille: 18)! ] let messageFont: [String: AnyObject] = [NSFontAttributeName: UIFont (nom: "HelveticaNeue-Thin", taille: 14)! ] let attribuéTitle = NSMutableAttributedString (chaîne: "Plusieurs boutons", attributs: titleFont) let attribuéMessage = NSMutableAttributedString (chaîne: "Sélectionner une action", attributs: messageFont) alert.setValue (attributTitle, pourKey: "attributTitle") alert.setValue ( attributMessage, forKey: "attributMessage")
Dans les deux premières lignes, nous définissons le nom et la taille de la police en tant que dictionnaire de NSFontAttributeName. Veuillez noter que vous devrez taper le bon nom PostScript de la police que vous souhaitez utiliser, sinon Xcode ne le reconnaîtra pas et affichera la police par défaut. Le site de polices iOS est une référence aux noms de police 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 (titre: "Action 1", style: .default, gestionnaire: (action) -> Annulation de l'impression ("ACTION 1 sélectionné!")) let action2 = UIAlertAction (titre: "Action 2", style: .default, gestionnaire: (action) -> Annulation de l’impression ("ACTION 2 sélectionnée!")) laissez action3 = UIAlertAction (titre: "Action 3", style: .default, gestionnaire: (action) - > Annuler à l'impression ("ACTION 3 sélectionnée!")) // Le bouton Annuler permet d'annuler = UIAlertAction (titre: "Annuler", style: .destructive, gestionnaire: (action) -> Annuler à) Avant d’attacher ces actions à notre alerte, appelons-les un peu.
// Restyle la vue de l'alerte alert.view.tintColor = UIColor.brown // changer la couleur du texte des boutons alert.view.backgroundColor = UIColor.cyan // changer la couleur de fond alert.view.layer.cornerRadius = 25 // changer de rayon
Bien que le API UIAlertController est limité, pour que les développeurs ne puissent pas complètement changer sa structure par défaut, nous pouvons éditer son style comme nous l'avons fait avec le code ci-dessus.
Enfin, nous pouvons ajouter toutes les actions et présenter notre alerte:
// Ajoute des boutons d'action et présente l'alerte alert.addAction (action1) alert.addAction (action2) alert.addAction (action3) alert.addAction (cancel) present (alert, animated: true, complétion: nil)
Maintenant, si vous exécutez votre code, vous obtiendrez quelque chose comme ceci:
Dans ce tutoriel, nous avons créé une série de logiciels personnalisés. UIAlertViews avec des champs de texte et un style personnalisé. J'espère que vous pourrez utiliser ces connaissances pour votre prochaine application iOS.
Nous avons créé un guide complet pour vous aider à apprendre Swift, que vous commenciez juste à vous familiariser 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..
