Libérez votre développeur d’applications internes Partie 11 : La photothèque

Vous avez une idée d’application mais vous n’avez pas les connaissances en programmation nécessaires pour commencer à la construire ? Dans cette série de blogs hebdomadaires, Comment libérer votre développeur d’application interne, je vous emmènerai, en tant que non-programmeur, pas à pas à travers le processus de création d’applications pour l’iPhone, l’iPod touch et l’iPad. Rejoignez-moi chaque semaine dans cette aventure, et vous verrez à quel point il peut être amusant de transformer vos idées en réalité ! Voici la 11e partie de la série. Si vous commencez tout juste, consultez le début de la série ici. (Ce post a été mis à jour vers Swift 1.2, iOS 8 et Xcode 6.3)

Maintenant que vous avez acquis les bases de la programmation Swift, il est temps de plonger dans un territoire de codage plus profond.Pour obtenir la dernière version de iAppsReview , sélectionnez ce lien .

Maîtrisez votre iPhone en une minute par jour :

Inscrivez-vous à la newsletter « Tip of the Day » de iphonologie et nous vous enverrons chaque jour un conseil pour gagner du temps et tirer le meilleur parti de votre iPhone ou iPad.

La photothèque de l’iOS

Apple autorise les applications personnalisées que vous créez à accéder à la photothèque sur un appareil iOS. Cela vous permet d’ajouter des fonctionnalités intéressantes à vos applications. Apple facilite cette opération en fournissant une interface utilisateur prédéfinie qui permet aux utilisateurs de naviguer dans leurs photos et de sélectionner une image. Notre objectif dans ce billet est d’afficher un sélecteur d’images lorsque l’utilisateur tape sur la vue des images avec le bouton Ajouter une image ( Figure 1 ), de lui permettre de sélectionner une image de l’album photo et d’afficher une vignette de l’image dans le contrôle de la vue des images à droite du bouton.

Figure 1 – Le bouton de l’album photo dans le coin inférieur gauche de la scène Write Review

Ajouter des photos au simulateur

Par défaut, le simulateur iOS n’a pas de photos dans sa photothèque, dont nous avons besoin pour cette démo. Heureusement, il est facile d’ajouter des images comme indiqué dans ces étapes :

  1. Dans le menu Xcode, sélectionnez Xcode> Open Developer Tool> iOS Simulator ;
  1. Téléchargez les images de l’application Doodle Jump que j’ai créée pour vous à partir de ce lien . Cela décompresse automatiquement le dossier DoodleJump dans le dossier Downloads de votre Mac.
  1. Ouvrez le Finder et naviguez jusqu’à votre dossier de téléchargements . Développez le dossier DoodleJump et vous verrez les fichiers DoodleJump1.PNG et DoodleJump2.PNG .
  1. Faites glisser le fichier DoodleJump1.PNG de la fenêtre du Finder vers le simulateur comme indiqué dans la figure 2 , puis relâchez le bouton de la souris.

Figure 2 – Faire glisser une image vers le simulateur l’ajoute à la photothèque du simulateur.

Lorsque vous faites cela, l’application Photos est lancée dans le Simulateur, et l’image est affichée dans la fenêtre comme indiqué dans Figure 3.

Figure 3 – L’image est affichée dans l’application Photos.

  1. Maintenant, faites glisser et déposez le DoodleJump2.PNG du Finder sur le simulateur.

C’est tout ! Vous avez maintenant deux images dans le simulateur de l’iPhone auxquelles vous pouvez accéder depuis l’application iAppsReview . Si vous le souhaitez, vous pouvez cliquer sur le bouton Accueil du simulateur, lancer l’application Photos et regarder les deux images nouvellement ajoutées.

Créer une méthode d’action et un point de vente

Afin d’afficher la vue de sélection d’images qui permet à l’utilisateur de sélectionner une image de l’album photo et de la stocker dans la vue d’images, vous devez procéder comme suit :

  • Rendre le contrôle de la vue de l’image interactif.
  • Ajoutez une commande Tap Gesture Recognizer à la vue de l’image.
  • Créer un accès à la Photothèque : méthode d’action pour la reconnaissance des gestes de tapotement.
  • Créez une sortie nommée imgThumbNail pour la vue de l’image.

Voici les étapes détaillées :

  1. Ouvrez le projet iAppsReview dans Xcode.
  1. Cliquez sur la vue de l’image (avec l’espace Add Image ) dans la scène Write Review pour la sélectionner, puis allez dans l’inspecteur des attributs et cochez la case User Interaction Enabled ( Figure 4 ).

Figure 4 – Cochez la case Interaction utilisateur activée .

  1. Malheureusement, les vues d’images ne comportent pas d’événement qui se déclenche lorsque vous les tapez. C’est là que les reconnaisseurs de gestes viennent à la rescousse. Faites glisser un Tapez Gesture Recognize r de la bibliothèque d’objets et déposez-le sur la vue d’image comme indiqué dans Figure 5 .

Figure 5 – Glissez et déposez un Reconnaisseur de gestes sur la vue de l’image.

Cela ajoute un deuxième geste de reconnaissance à la station d’accueil de la scène au-dessus de la scène Write Review .

  1. Puisque nous devons ajouter une nouvelle méthode d’action au contrôleur de vue de la scène, affichons l’assistant monteur. Pour ce faire, cliquez sur le bouton central dans le groupe de boutons de l’éditeur en haut à droite de la fenêtre Xcode. Cela devrait automatiquement afficher le fichier WriteReviewController.swift dans la fenêtre de l’éditeur assistant. Si ce n’est pas le cas, sélectionnez Automatic> WriteReviewViewController.swift dans la barre de navigation en haut de la fenêtre de l’éditeur adjoint.
  1. Cliquez sur la reconnaissance de geste à droite pour la sélectionner, puis allez à l’inspecteur des connexions (le premier bouton à droite dans la barre d’outils des inspecteurs. ) Dans la section Sent Actions , cliquez sur la connexion bien à droite de l’action selector et glissez vers le bas jusqu’au fichier WriteReviewViewController.swift juste au-dessus du shareReview : action comme indiqué dans Figure 6 .

Figure 6 – Créer un lien à partir du dispositif de reconnaissance des gestes.

Relâchez le bouton de la souris et vous verrez un popup de création de connexion ( Figure 7 ). Dans le champ de texte Nom , entrez accéder à la Photothèque et cliquez ensuite sur Connecter .

Figure 7 – Créer une nouvelle méthode d’action nommée accessPhotoLibrary .

Cela crée un nouvel accès à la Photothèque : dans le fichier de code. Nous reviendrons et implémenterons cette méthode dans un instant, mais d’abord, créons une sortie pour la vue de l’image.

Créer un point de vente pour la vue de l’image

  1. Dans la scène Write Review , cliquez sur la vue de l’image. Ensuite, allez dans l’inspecteur de connexions, cliquez sur la connexion bien à droite de New Referencing Outlet et faites glisser vers le bas dans le fichier WriteReviewViewController.swift juste au-dessus de la propriété tvwReview comme indiqué dans Figure 8 .

Figure 8 – Créer une sortie pour la vue de l’image.

  1. Dans le popup Créer un point de vente, entrez imgThumbNail et cliquez Connect . Cela crée une nouvelle propriété de sortie comme indiqué dans Figure 9 .

Figure 9 – La nouvelle imgThumbnail propriété de la sortie

Mise en place de la photothèque d’accès : Méthode

Vous êtes maintenant prêt à ajouter le code d’implémentation à la accessPhotoLibrary : :

  1. Fermez l’éditeur adjoint en cliquant sur le bouton de gauche dans le groupe de boutons de l’éditeur en haut à droite de la fenêtre Xcode.
  1. Dans le navigateur de projet, cliquez sur le fichier de code WriteReviewViewController.swift et faites défiler le fichier de code jusqu’au bas pour voir le fichier accessPhotoLibrary : .
  1. Ajoutez le code indiqué dans Figure 10 , et nous discuterons ensuite de ce que fait le code (sur la base de mes précédents articles, je suppose que vous connaissez les bases de la façon de taper du code dans une méthode. Assurez-vous que vous permettez à la fonction « Code Completion » de Xcode de compléter automatiquement votre code plutôt que de taper chaque caractère vous-même).

Figure 10 – accessPhotoLibrary : code

La première ligne de code crée un objet contrôleur de sélection d’images à partir de la classe UIImagePickerController . Dans la deuxième ligne de code, la propriété sourceType de l’objet contrôleur du sélecteur d’images est définie. La troisième ligne de code affiche le contrôleur du sélecteur d’images.

Examinons de plus près la deuxième ligne de code. Lorsque vous fixez la valeur d’un bien que vous ne connaissez pas, il est bon de lire la documentation d’Apple pour voir comment ce bien est utilisé. La figure 11 contient la documentation de la propriété sourceType .

Figure 11 – Documentation d’Apple pour la propriété sourceType du UIImagePickerController

La documentation spécifie que la propriété sourceType contient une valeur du type UIImagePickerControllerSourceType , et elle se réfère au type comme une énumération . Nous allons découvrir ce que c’est dans un instant.

Si vous cliquez sur le lien UIImagePickerControllerSourceType , vous accédez à la documentation présentée dans la figure 12 .

Figure 12 – Le UIImagePickerControllerSourceType énumération

Une énumération est un groupe de valeurs constantes liées entre elles. Dans ce cas, l’énumération UIImagePickerControllerSourceType définit les valeurs valides qui peuvent être stockées dans la propriété sourceType . Les énumérations sont utiles dans des cas comme celui-ci, lorsqu’il y a un nombre fini de valeurs valides qui peuvent être stockées dans une propriété. Contrairement aux variables de type chaîne de caractères où vous pouvez stocker n’importe quelle chaîne de caractères, ou aux variables de type entier où vous pouvez stocker n’importe quel entier valide, les énumérations limitent les valeurs valides à un ensemble fini.

En lisant la documentation, vous pouvez déterminer que la valeur que vous voulez est PhotoLibrary car elle spécifie que la photothèque de l’appareil est la source du sélecteur d’images. C’est exactement ce que nous voulons.

Avant de continuer, regardez la figure 13 , qui contient un diagramme de séquence montrant l’interaction entre les objets WriteReviewViewController et UIImagePickerController .

Figure 13 – La méthode interaction entre les objets writeReviewController et imagePicker

Les rectangles en haut du diagramme de séquence représentent les objets qui sont créés à partir des classes WriteReviewViewController et UIImagePickerController au moment de l’exécution. Les lignes pointillées sous les objets sont appelées « lignes de vie » et indiquent la durée de vie d’un objet. Les flèches pointant entre les objets et entre les lignes de vie sont chacune un appel de méthode unique entre les objets. Voici l’ordre dans lequel les appels de méthode se produisent :

  1. L’objet writeReviewViewController crée un objet imagePicker à partir de la classe UIImagePickerController .
  1. L’objet writeReviewViewController appelle le setSourceType : sur l’objet imagePicker , en passant un argument UIImagePickerControllerSourceType.PhotoLibrary .
  1. L’objet writeReviewViewController appelle le presentViewController : sur lui-même, en passant l’objet imagePicker comme argument (j’ai laissé de côté les autres arguments par souci de concision). Lorsque le présenteViewController : est exécutée au moment de l’exécution, l’objet imagePicker est affiché dans l’interface utilisateur.

Je trouve qu’il est important d’avoir une interaction avec les objets visuels pour que vous compreniez vraiment comment fonctionne votre code. Lorsque vous travaillez sur vos propres applications, je vous recommande de créer des diagrammes de séquence pour les séquences d’appel de méthode plus complexes de votre application.

Tester l’intégration de la photothèque

Prenons le code que nous avons écrit pour faire un tour pour voir comment il fonctionne.

  1. Dans Xcode, cliquez sur le bouton Exécuter .
  1. Lorsque l’application apparaît dans le simulateur, cliquez sur l’option Write a Review , puis sur l’écran Write Review , cliquez sur la vue de l’image avec l’espace Add Image . Comme c’est la première fois que l’application iAppsReview tente d’accéder à la photothèque, une boîte de dialogue apparaît, vous demandant si vous souhaitez que iAppsReview accède à vos photos. Cliquez sur OK pour l’autoriser. Cela affiche l’écran Photos à gauche de Figure 14 , et vous pouvez voir la dernière image que nous avons ajoutée au simulateur. Il s’agit de la même interface que celle avec laquelle les utilisateurs sont à l’aise dans l’application intégrée Photos .

Figure 14 – Les écrans de la photothèque du contrôleur de sélection d’images

  1. Touchez la ligne de la liste de contrôle et vous serez dirigé vers l’écran de la liste de contrôle qui apparaît sur le côté droit de Figure 14 . Si vous sélectionnez l’une des photos, le contrôleur de sélection d’image disparaît en bas de l’écran. Il ne se passe rien avec l’image sélectionnée car nous n’avons pas encore écrit de code pour répondre à la sélection.

Récupérer l’image sélectionnée en utilisant un délégué

Si vous regardez à nouveau le diagramme de séquence de la figure 13 , il ne semble pas y avoir de moyen pour l’objet WriteReviewViewController d’obtenir l’image qui est sélectionnée dans l’objet imagePicker .

Si vous lisez plus bas dans la documentation d’Apple pour la classe UIImagePickerController , vous verrez la section Providing a Delegate Object comme indiqué dans la figure 15 .

Figure 15 – Vous devez fournir un objet délégué pour un contrôleur de sélection d’images.

Cette documentation indique :  » Pour utiliser un contrôleur de sélection d’images, vous devez fournir un délégué qui se conforme au protocole UIImagePickerControllerDelegate . «  Qu’est-ce que cela signifie ?

Dans ce contexte, délégation fait référence à un objet qui s’appuie sur un autre objet (le délégué) pour fournir un ensemble de fonctionnalités spécifiées. Dans Swift, vous pouvez définir un ensemble spécifique de fonctionnalités requises en utilisant un protocole . Le fait que le protocole mentionné dans la documentation soit nommé UIImagePickerControllerDelegate indique que c’est le i mage picker controller qui spécifie la fonctionnalité dont il a besoin pour renvoyer des informations sur l’image sélectionnée par l’utilisateur.

Si vous cliquez sur le lien UIImagePickerControllerDelegate Protocol Reference dans la rubrique d’aide présentée dans la figure 9 , vous accédez à une rubrique d’aide qui définit les méthodes présentées dans la figure 16 .

Figure 16 – Les UIImagePickerControllerDelegate Méthodes du protocole

Voici un synopsis de ces deux méthodes :

  1. imagePickerController:didFinishPickingMediaWithInfo : Le contrôleur imagePicker appelle cette méthode sur l’objet délégué lorsque l’utilisateur a fini de sélectionner une image. Il transmet au délégué des informations décrivant le média qui a été sélectionné.
  1. imagePickerControllerDidCancel : Le contrôleur imagePickerController appelle cette méthode sur l’objet délégué lorsque l’utilisateur clique sur Cancel plutôt que de sélectionner une image.

En fin de compte, tout objet qui est un délégué du contrôleur de la prise d’images doit avoir ces deux méthodes. Malheureusement, la documentation d’Apple est quelque peu trompeuse. Alors qu’il est vrai qu’un objet délégué doit implémenter le UIImagePickerControllerDelegate , il doit également implémenter le UINavigationControllerDelegate . Comment puis-je le savoir ? La classe UIImagePickerController possède une propriété delegate qui est décrite dans la documentation Apple présentée dans Figure 17 .

Figure 17 – La propriété delegate de la classe UIImagePickerControllerDelegate

Donc, en fin de compte, vous devez mettre en œuvre ces deux protocoles sur l’objet délégué.

Bien que vous puissiez faire de n’importe quel objet le délégué d’un contrôleur de prise de vue, il est typique de faire du contrôleur de prise de vue l’objet délégué. Faisons cela maintenant comme indiqué dans les étapes suivantes.

  1. Dans le navigateur de projet, sélectionnez le fichier de code WriteReviewViewController.swift .
  1. En haut du fichier de code, dans la deuxième ligne de code, cliquez à droite du « r » dans UITableViewController (et avant l’accolade bouclée d’ouverture).
  1. Nous pourrions mettre le code qui met en œuvre le protocole sur cette même ligne, mais il est plus facile à lire si nous l’ajoutons sur une deuxième ligne. Pour ce faire, il faut d’abord taper une virgule, puis appuyer sur return et ensuite sur tab pour indenter un peu le code.
  1. Ensuite, tapez le code indiqué dans Figure 18 . Ce code entre crochets indique au monde (car il est dans le fichier d’en-tête public) que la classe WriteReviewViewController implémente les protocoles UIImagePickerControllerDelegate et UINavigationControllerDelegate ;

Figure 18 – Mise en œuvre des protocoles

  1. Avant d’implémenter les méthodes qui sont dans le protocole UIImagePickerControllerDelegate , nous devons ajouter quelques propriétés à la classe pour contenir certaines des informations que nous recevons en retour du contrôleur du sélecteur d’images. Plutôt que de créer des variables locales au sein d’une méthode, nous allons créer des propriétés au niveau de la classe. Les propriétés sont très utiles, car, contrairement aux variables locales, elles sont accessibles par n’importe quelle méthode de la classe.

Pour créer ces propriétés, allez dans le navigateur de projet et sélectionnez le fichier d’implémentation WriteReviewViewController.swift . Ensuite, faites défiler jusqu’au haut du fichier de code et ajoutez le code indiqué dans Figure 19 sous les déclarations de l’IBOutlet .

Figure 19 – Déclaration de propriétés

Ce code déclare une propriété nommée image du type UIImage et une autre propriété nommée imageURL qui contient un objet du type NSURL . Les points d’interrogation après chaque déclaration de propriété indiquent que les propriétés peuvent parfois contenir nil , ou rien. En Swift, si une propriété peut potentiellement contenir nil , vous devez ajouter un point d’interrogation après son type.

  1. Nous devons maintenant implémenter les méthodes qui sont dans le protocole UIImagePickerControllerDelegate . Pour ce faire, ajoutez les méthodes indiquées dans Figure 20 en dessous de accessPhotoLibrary : .

Figure 20 – La mise en œuvre des méthodes UIImagePickerControllerDelegate

Le code de la première méthode appelle le dismissViewControllerAnimated:completion : sur le contrôleur de visualisation (self), qui cache le contrôleur de visualisation après que l’utilisateur ait sélectionné une image. Ensuite, il saisit l’image à partir du paramètre info transmis par le contrôleur de sélection d’image et la stocke dans la propriété image pour une utilisation ultérieure. Ensuite, le code prend l’image et la stocke dans la propriété image de la vue de l’image. L’image apparaîtra ainsi dans la vue d’image au moment de l’exécution.

Le imagePickerControllerDidCancel : rejette également le contrôleur de sélection d’image, mais ne doit rien faire par la suite.

  1. Maintenant, il ne vous reste plus qu’une seule chose à faire : définir WriteReviewViewController comme délégué du contrôleur de la prise d’images. Pour ce faire, ajoutez le code indiqué dans Figure 21 à la accessPhotoLibrary : .

Figure 21 – Stockage d’une référence à l’objet WriteReviewViewController dans la propriété delegate du contrôleur de sélection d’image.

Pour avoir une idée plus précise du fonctionnement de ces nouveaux appels de méthode entre les objets, consultez Figure 22 .

Figure 22 – Le flux complet des appels de méthode entre les objets

Dans ce diagramme de séquence mis à jour, notez qu’il y a une nouvelle méthode setDelegate où l’objet writeReviewViewController stocke une référence à lui-même dans la propriété imagePicker de l’objet delegate . Au bas du diagramme, un nouvel appel de méthode a été ajouté. Cet appel de méthode est envoyé de l’objet imagePicker à l’objet writeReviewViewController après que l’utilisateur ait sélectionné une image. Un argument media est envoyé dans cet appel de méthode qui contient une collection d’objets contenant des informations sur l’image sélectionnée.

Test du code de délégué

Vous êtes maintenant prêt à tester le code et à voir comment il fonctionne.

  1. Cliquez sur le bouton « Run » de Xcode .
  1. Lorsque l’application apparaît dans le simulateur, cliquez sur la ligne Écrire un commentaire .
  1. Cliquez sur le bouton Photo Album .
  1. Dans l’écran Photos , sélectionnez la ligne Photos enregistrées .
  1. Sélectionnez l’une des deux images.
  1. Le contrôleur de sélection d’image devrait disparaître et vous devriez voir l’image affichée sous forme de vignette dans la vue de l’image comme indiqué dans Figure 23 .

Figure 23 – La photo sélectionnée apparaît dans la vue de l’image.

Si vous souhaitez obtenir une copie du projet tel que nous l’avons réalisé jusqu’à présent, il vous suffit de cliquer sur ce lien .

Conclusion

Personnellement, je trouve intéressant et amusant d’ajouter le type de fonctionnalité que nous avons ajouté à iAppsReview dans ce post. En cours de route, vous avez appris un certain nombre de nouveaux concepts, notamment les délégués, les protocoles et les propriétés. Au fil du temps, ces concepts deviendront de plus en plus familiers et constitueront une partie importante de votre boîte à outils iOS.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *