Share
Dans ce tutoriel, vous découvrirez l'une des classes les plus utilisées de Cocoa-Touch: UIAlertView. Avec cette classe, vous pouvez rapidement informer les utilisateurs d'informations importantes ou urgentes sur vos applications. Vous pouvez également forcer les commentaires des utilisateurs en combinant la classe UIAlertView avec le protocole UIAlertViewDelegate. Lisez la suite pour savoir comment!
Créer un nouveau projet Xcode à l'aide du modèle "Application à vue unique".
Nommez l'application "AlertDemo" et insérez votre propre identifiant d'entreprise ou utilisez "com.mobiletuts.alertdemo" si vous n'en avez pas encore. Définissez "iPhone" pour la famille d'appareils et conservez les vérifications par défaut. Lorsque vous êtes prêt, cliquez sur Suivant.
Sélectionnez un emplacement sur votre disque dur pour stocker le projet, puis cliquez sur "Enregistrer"..
Après avoir créé votre projet, développez le dossier Fichiers de prise en charge dans le volet du navigateur de projet situé à gauche de la fenêtre Xcode. CTRL + Clic (ou clic droit) sur le dossier Fichiers de support et sélectionnez Ajouter> Nouveau groupe. Nommez le nouveau groupe "images" car c'est ici que nous allons stocker les graphiques pour notre application..
Téléchargez le fichier de ressources du projet joint à ce didacticiel et ouvrez le dossier "images". Glissez-déposez toutes les images dans le groupe "images" que vous venez de créer. Assurez-vous de vérifier "Copier les éléments dans le dossier du groupe de destination (si nécessaire)" car cela garantira que les ressources sont réellement copiées dans votre projet et non pas simplement liées en tant que références. Votre configuration dans Xcode devrait maintenant ressembler à ceci:
Trouvez le MainStoryboard.storyboard fichier dans le Navigateur de projet et sélectionnez-le. Vous venez d'ouvrir le storyboard du projet, qui devrait consister en une seule scène, ou View Controller, que nous pouvons modifier pour créer l'interface pour l'application..
Lorsque le Storyboard est ouvert, l'interface Xcode doit maintenant afficher la bibliothèque d'objets dans le coin inférieur droit. Utilisez le champ de recherche de la bibliothèque d'objets pour trouver un UIImageView objet. Placez l'objet image au centre de l'écran et redimensionnez-le manuellement pour remplir la vue. Ensuite, trouvez le image champ dans l'inspecteur d'attributs (l'inspecteur d'attributs doit figurer dans la partie supérieure droite de Xcode). Définissez la valeur du champ image sur "background.png". Vous devriez maintenant avoir une belle texture en acier qui remplit le contrôleur de vue.
En utilisant à nouveau la bibliothèque d'objets, trouvez un UIButton objet, puis faites glisser ce bouton sur la scène. L'inspecteur d'attributs devrait maintenant afficher les informations relatives à l'objet bouton. Met le type champ déroulant à "personnalisé". Ensuite, réglez le image champ à "button.png". Vous devriez maintenant voir l'image du bouton sur le contrôleur de vue de la scène, mais cela n'a probablement pas l'air correct. Avec le bouton objet sélectionné, vous devrez sélectionner Editeur> Adapter la taille au contenu afin de redimensionner automatiquement les limites du bouton à la taille du contenu de l'image. Ensuite, centrez le bouton sur l'écran en le faisant glisser vers le milieu.
Le bouton doit maintenant être configuré correctement pour l'état par défaut, mais nous souhaitons afficher une image différente lorsque le bouton est réellement enfoncé. Changer la config d'état déposer la valeur à "en surbrillance". Les modifications que vous apportez dans l'inspecteur d'attributs ne s'appliqueront désormais qu'à l'état mis en surbrillance. Met le image attribuer à l'état du bouton en surbrillance bouton-pressé.png. Votre Storyboard devrait maintenant ressembler à ceci:
C’est le bon moment pour tester vos progrès, alors enregistrez votre travail ( Fichier> Enregistrer) puis exécutez le projet dans le simulateur iPhone (Produit> Run). Vous devriez maintenant pouvoir appuyer sur le bouton et voir l’image changer dans le simulateur.
Le storyboard du projet étant toujours ouvert, cliquez sur le bouton "Afficher l'éditeur adjoint" en haut à droite de la fenêtre Xcode pour afficher la liste du code source de ViewController.h. Dans cette perspective, maintenez le bouton Contrôle (CTRL) et le bouton de la souris enfoncés (le bouton gauche de la souris si votre souris en a deux) au-dessus de l’objet bouton de la scène Storyboard, puis faites-le glisser dans la liste du code source, juste au-dessus de la fenêtre. @fin ligne.
Une nouvelle boîte de dialogue s'ouvrira qui créera automatiquement une connexion entre l'élément d'interface et votre classe de contrôleur de vue. À partir de cette fenêtre, vous pouvez créer des points de vente ou des actions. Les points de vente sont utilisés pour créer des propriétés qui font référence à vos objets Interface Builder, et les actions sont utilisées pour connecter des méthodes à des actions d'objet IB..
Sélectionnez "Action" dans le menu lien Dans la liste déroulante, entrez "showMessage" comme nom de connexion, puis cliquez sur Connecter. Interface Builder aurait dû simplement ajouter la ligne suivante à votre ViewController.h fichier:
- (IBAction) showMessage: (id) expéditeur;
en outre, ViewController.m devrait maintenant avoir cette définition de méthode:
- (IBAction) showMessage: (id) expéditeur
Lorsque l'utilisateur appuie sur le bouton, le code de cette méthode sera exécuté. Cela signifie que nous sommes enfin prêts à creuser dans le code pour afficher un UIAlertView et répondre à ses méthodes déléguées!
Maintenant que vous avez configuré votre modèle de projet, vous êtes prêt à utiliser UIAlertView pour déclencher votre message lorsque vous appuyez sur le bouton personnalisé. Ouvrez le ViewController.m fichier et tapez ce qui suit dans le voir le message méthode que vous avez créée précédemment:
- (IBAction) showMessage: (id) expéditeur UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" message: @ "Ceci est votre premier message UIAlertview." délégué: nil cancelButtonTitle: @ "OK" otherButtonTitles: nil]; [émission de messages];
Ci-dessus, vous créez et initialisez votre instance de la classe UIAlertView. le initWithTitle: et message: les paramètres sont explicites et faciles à comprendre après l'affichage d'une alerte. le déléguer: paramètre fait référence à la classe qui doit recevoir les messages de notification de délégué pour la UIAlertViewDelegate (démontré plus tard). le annulerButton: paramètre est le bouton par défaut à afficher avec l'alerte, et le otherButtonTitles: paramètre est utilisé pour afficher une ou plusieurs options supplémentaires que l'utilisateur peut sélectionner.
Après avoir créé un objet d'alerte, le [message spectacle] appel montre effectivement notre message en faisant apparaître notre nouvelle UIAlertView sur l'écran.
Si vous construisez et déboguez l'application maintenant, vous verrez que si vous appuyez sur le bouton, notre message est affiché.!
REMARQUE: Si rien ne se produit lorsque vous appuyez sur le bouton dans le simulateur, assurez-vous que vous avez bien enregistré les modifications apportées dans le fichier Storyboard et que l'action "Retoucher à l'intérieur" est connectée au dossier. voir le message: méthode.
L'ajout de boutons supplémentaires à UIAlertView peut être effectué soit lors de l'initialisation de votre objet, soit à tout moment par la suite. Pour ajouter des boutons au moment de l’initialisation dans le code ci-dessus, il vous suffit de modifier le voir le message: méthode comme suit:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" message: @ "Ceci est votre premier message UIAlertview." délégué: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nil]; [émission de messages];
Pour ajouter des boutons après avoir initialisé votre alerte, utilisez les lignes de code suivantes:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" message: @ "Ceci est votre premier message UIAlertview." délégué: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: nil]; [message addButtonWithTitle: @ "Button 2"]; [message addButtonWithTitle: @ "Button 3"]; [émission de messages];
Ces deux fragments de code sont équivalents, mais en utilisant le addButtonWithTitle: Cette méthode facilite l'ajout conditionnel de boutons à vos alertes, peut-être en les enveloppant si des déclarations.
Revenez à ViewController.h et modifiez votre ligne de déclaration de classe pour lire comme suit:
@interface ViewController: UIViewController
Cela permet à votre classe de répondre aux UIAlertViewDelegate méthodes de protocole. Afin de répondre aux appuis de bouton dans notre UIAlertView, nous allons utiliser le - alertView: clickedButtonAtIndex: méthode du protocole. Retour dans ViewController.m, ajoutez ceci dans votre classe:
- (void) alertView: (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex
Comme vous pouvez le voir à partir du nom de la méthode, cette méthode acceptera un pointeur sur la UIAlertView objet que nous avons créé précédemment et l'index de bouton sélectionné par l'utilisateur. Vous pouvez être tenté de simplement passer conditionnellement sur la variable buttonIndex pour déterminer quel bouton a été sélectionné par l'utilisateur, mais que se passerait-il si vous ajoutiez des boutons de manière conditionnelle à l'alerte? Dans ce scénario, le bouton avec l'index 1 n'est peut-être pas toujours celui que vous souhaitez. Un meilleur moyen consiste à tester le titre du bouton, puis à agir en conséquence, comme suit:
- (void) alertView: (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex NSString * title = [alertView buttonTitleAtIndex: buttonIndex]; if ([title isEqualToString: @ "Bouton 1"]) NSLog (@ "Le bouton 1 a été sélectionné."); else if ([[title isEqualToString: @ "Bouton 2"]) NSLog (@ "Le bouton 2 a été sélectionné."); else if ([title isEqualToString: @ "Button 3"]) NSLog (@ "Le bouton 3 a été sélectionné.");
Il y a encore une chose que nous devons faire avant que cela fonctionne. Revenez à l’instruction d’initialisation UIAlertView et mettez à jour le déléguer: paramètre pour accepter le soi mot clé au lieu de néant. Après cela, le bloc de code devrait ressembler à ceci:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" message: @ "Ceci est votre premier message UIAlertview." délégué: auto annulerButtonTitle: @ "bouton 1" autresButtonTitles: @ "bouton 2", @ "bouton 3", nil]; [émission de messages];
Si vous construisez et déboguez maintenant l'application, vous devriez pouvoir sélectionner plusieurs boutons et voir une déclaration imprimée sur la console lorsqu'un bouton est sélectionné (vous avez besoin d'aide pour trouver la console? Sélectionnez Affichage> Zone de débogage> Activer la console depuis le menu Xcode).
Voici à quoi devrait ressembler la vue d'alerte finale dans le simulateur:
Ceci conclut notre tutoriel d’introduction sur UIAlertView. En plus de ce que nous avons couvert aujourd’hui, il existe de nombreuses autres options fournies par le UIAlertViewDelegate protocole et, avec la sortie de iOS 5, quelques façons supplémentaires d’utiliser UIAlertView. Si vous souhaitez voir un didacticiel supplémentaire sur ces rubriques relatives à la vue des alertes avancées, faites-le moi savoir dans la section commentaires ci-dessous! N'hésitez pas non plus à envoyer des questions ou des commentaires via mon compte twitter personnel @markhammonds ou le compte officiel Mobiletuts + twitter @envatomobile.
Accentsconagua