Libérez votre développeur d’applications internes Partie 4 : Ajout de la navigation

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, intitulée « Comment libérer votre développeur d’application interne », je vous guiderai, vous qui n’êtes pas programmeur, pas à pas dans 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 quatrième partie de la série de blogs. Si vous venez de commencer, consultez le début de la série ici (Ce billet a été mis à jour vers iOS 8, Xcode 6.3 et Swift 1.2.)

Dans mon précédent billet, nous avons terminé l’écran principal de l’application iAppsReview de l’iPhone. Vous y avez appris comment configurer une vue en tableau, comment ajouter des images à un projet, et comment les utiliser comme images de lancement ainsi que dans les lignes d’une vue en tableau.

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.

Cette semaine, vous ajouterez une nouvelle scène (illustrée dans Figure 1 ) au storyboard et vous apprendrez à naviguer entre les différentes scènes.

Figure 1 – La scène de la revue d’écriture

Ouverture du projet

Suivez ces étapes pour ouvrir le projet que vous avez créé dans le post précédent (vous pouvez également télécharger le projet à partir de ce lien ) :

  1. Lancez Xcode sur votre Mac.
  1. Pour ouvrir le projet à partir de la fenêtre de bienvenue de Xcode, sélectionnez iAppsReview dans le panneau Recents sur le côté droit de la fenêtre, puis cliquez sur Open .Vous pouvez également ouvrir le projet en sélectionnant File> Open Recent> iAppsReview.xcodeproj dans le menu Xcode.
  1. Une fois le projet ouvert, dans le navigateur de projet situé sur le côté gauche de la fenêtre Xcode, sélectionnez le fichier Main.storyboard pour afficher le storyboard dans l’éditeur du créateur d’interface au centre de la fenêtre Xcode.

Ajouter une nouvelle scène au story-board

Maintenant, ajoutons une nouvelle scène au storyboard.

  1. Assurez-vous que la bibliothèque d’objets située dans le coin inférieur droit de la fenêtre Xcode est visible, comme indiqué dans la figure 2 . Si elle n’est pas visible, allez dans le menu Xcode et sélectionnez View> Utilities> Show Object Library .
  1. Pour ajouter une nouvelle scène à un storyboard, il suffit de faire glisser l’un des contrôleurs de vue de la bibliothèque d’objets sur la surface de conception du storyboard. Vous choisissez le contrôleur de vue à ajouter en fonction du type de contrôle de l’interface utilisateur que vous voulez inclure dans la scène. Par exemple, si vous avez besoin d’une scène qui contient un contrôleur de vue de tableau, vous devez choisir l’élément Contrôleur de vue de tableau de la bibliothèque d’objets. Comme vous pouvez le voir dans la figure 1 , notre nouvelle scène contiendra une vue de table avec une seule ligne, nous devons donc ajouter un contrôleur de vue de table au storyboard.

Comme le montre la figure 2 , faites glisser un contrôleur de vue de table depuis la bibliothèque d’objets et déposez-le à droite de la scène iAppsReview . Je le place à droite, car j’aime bien positionner mes contrôleurs de vue sur le storyboard dans l’ordre où ils sont affichés au moment de l’exécution. Cela permet à mon storyboard de s’auto documenter.

Figure 2 – Ajouter un contrôleur de vue de table au storyboard.

Après avoir ajouté la nouvelle scène au storyboard, vous verrez divers avertissements s’afficher dans le visualiseur d’activités, en haut au centre de la fenêtre Xcode. Vous pouvez ignorer ces avertissements pour l’instant, et nous y reviendrons plus tard dans cet article.

Créer une transition entre deux scènes

Nous devons maintenant créer un lien, ou une transition, entre la scène iAppsReview et la nouvelle scène que vous venez d’ajouter. Xcode rend cela incroyablement facile.

  1. Lorsque vous créez une transition, vous devez d’abord décider quel élément de l’interface utilisateur doit lancer la transition vers la scène suivante. Dans ce cas, la ligne Write a Review est l’objet qui doit déclencher la transition. Donc, tout en maintenant la touche control enfoncée, cliquez sur la ligne Write a Review , puis faites glisser le pointeur de votre souris sur la nouvelle scène comme indiqué dans la figure 3 .

Figure 3 – Contrôle+glisser de la ligne Écrire une critique vers la nouvelle scène.

  1. Lorsque la nouvelle scène est surlignée en bleu, comme le montre la figure 3 , relâchez le bouton de la souris et la touche control . Cela affiche le popup Segue qui liste les différents types de segues que vous pouvez choisir comme indiqué dans Figure 4 .

Figure 4 – Sélectionnez la suite push .

  1. Nous examinerons toutes les options présentées dans ce popup dans un prochain article, mais pour l’instant, il suffit de sélectionner l’option push comme indiqué dans Figure 4 . Lorsque vous faites cela, une transition est ajoutée entre les deux scènes comme le montre la Figure 5 .

Figure 5 – Une suite est ajoutée entre les deux scènes.

La flèche de la suite indique la direction dans laquelle se fait la navigation entre les scènes. Lorsque deux scènes ont une relation de transition comme celle-ci, la scène qui déclenche la transition est connue comme étant la source , et la scène vers laquelle vous naviguez est connue comme étant la destination . Remarquez que lorsqu’un enchaînement est sélectionné (comme dans Figure 5 ), l’objet qui déclenche l’enchaînement est mis en évidence (dans ce cas, la ligne Écrire une critique ). Lorsque vous avez plusieurs enchaînements dans un storyboard, cela est extrêmement utile pour déterminer quel contrôle de l’interface utilisateur est utilisé pour déclencher un enchaînement particulier. Vous avez peut-être aussi remarqué qu’une barre de navigation a été automatiquement ajoutée en haut de la scène de destination. C’est pratique, car vous souhaitez généralement qu’une barre de navigation soit placée en haut d’une scène de destination lorsque vous naviguez à partir d’une scène source qui comporte une barre de navigation.

  1. Ajoutons maintenant un titre à la barre de navigation de la scène de destination. Pour ce faire, double-cliquez sur la barre de navigation pour la mettre en mode édition, puis tapez le texte Write Review et appuyez sur return . Lorsque vous avez terminé, la barre de navigation devrait ressembler à Figure 6 .

Figure 6 – Réglez le titre de la barre de navigation sur Écrire un commentaire .

  1. Complétons la barre de navigation en ajoutant un bouton à sa droite. Ce bouton permettra à terme aux utilisateurs de partager leur avis avec d’autres. Pour ajouter ce bouton, dans la bibliothèque d’objets (située dans le coin inférieur droit de la fenêtre Xcode), faites défiler vers le bas jusqu’à ce que vous voyiez l’élément du bouton de la barre . Faites glisser l’élément du bouton de la barre de la bibliothèque d’objets et survolez-le sur le côté droit de la barre de navigation de la scène Write Review . Lorsque vous voyez le guide rectangulaire arrondi bleu illustré dans la figure 7 , lâchez le bouton de votre souris pour déposer le bouton à cet endroit.

Figure 7 – Ajouter un élément de bouton de barre à droite de la barre de navigation.

  1. Changeons maintenant l’aspect visuel du bouton pour indiquer à l’utilisateur que le fait d’appuyer sur ce bouton lui permettra de partager son avis. Pour ce faire, l’élément du bouton de la barre étant toujours sélectionné, allez dans l’inspecteur des attributs. Si l’inspecteur d’attributs n’est pas visible, vous pouvez l’afficher en sélectionnant Affichage> Utilitaires> Afficher l’inspecteur d’attributs dans le menu Xcode. Ensuite, définissez l’attribut Identificateur à Action comme indiqué dans Figure 8 . Ceci affiche l’image familière de l’action iOS dans le bouton ( Figure 8 ). N’hésitez pas à essayer de sélectionner d’autres options de l’identificateur pour voir à quoi elles ressemblent, mais lorsque vous avez terminé, remettez l’identificateur à Action ( Figure 8 ).

Figure 8 – Définir l’attribut de l’identificateur de l’élément du bouton de la barre à Action .

  1. Voyons maintenant comment tout cela fonctionne en temps réel. Cliquez sur le bouton Run dans le coin supérieur gauche de la fenêtre Xcode. Après quelques secondes, l’application apparaît dans le simulateur comme indiqué sur le côté gauche de Figure 9 . Cliquez sur la ligne Write a Review , et la scène iAppsReview se déplacera hors de l’écran vers la gauche, et la scène Write Review se déplacera à sa place depuis la droite comme indiqué dans la Figure 9 (selon la version de Xcode que vous utilisez, votre simulateur peut avoir un aspect différent).

Figure 9 – iAppsReview au moment de l’exécution

  1. Remarquez que la scène Write Review comporte un bouton « retour » qui a été automatiquement ajouté sur le côté gauche de sa barre de navigation ( Figure 9 ). Cela est pratique car l’utilisateur a besoin d’un moyen de retourner à la scène iAppsReview . Par défaut, le bouton retour contient le texte du titre de la barre de navigation de la scène source ( iAppsReview , dans ce cas). Dans un prochain article, je vous montrerai comment modifier ce texte par défaut, mais pour l’instant, ce texte fonctionne parfaitement. Allez-y et appuyez sur le bouton retour pour retourner à la scène iAppsReview .
  1. Retournez à Xcode et cliquez sur le bouton Stop pour arrêter l’application dans le simulateur.

Configuration de la vue en tableau

Vous êtes maintenant prêt à configurer la vue en tableau qui apparaît en haut de la scène Write Review comme indiqué dans la Figure 1 . Nous devons configurer une cellule de la vue tableau qui permet à l’utilisateur de sélectionner la catégorie d’application lorsqu’il écrit une critique. Finalement, en tapant sur cette cellule au moment de l’exécution, l’utilisateur sera dirigé vers une autre scène où il pourra sélectionner une catégorie d’application dans une liste.

  1. Dans la scène Write Review , cliquez dans la zone grise sous la vue du tableau intitulée Table View Prototype Content pour sélectionner la vue du tableau.
  1. Ensuite, allez dans l’inspecteur des attributs et changez le contenu en cellules statiques et le style en groupés . Lorsque vous faites cela, deux cellules supplémentaires sont ajoutées et la vue du tableau prend l’apparence groupée montrée dans Figure 10.

Figure 10 – Définir le contenu à Cellules statiques et le style à Groupés .

  1. Nous n’avons besoin que d’une seule cellule dans le tableau, alors supprimons les deux dernières cellules. Pour ce faire, cliquez sur la deuxième cellule pour la sélectionner, maintenez la touche shift enfoncée, puis cliquez sur la troisième cellule. Une fois les deux dernières cellules sélectionnées, appuyez sur la touche delete pour les supprimer de la vue du tableau.
  1. Avec la cellule restante sélectionnée comme indiqué dans Figure 11 , changez le style Style en Détail droit .Cela ajoute une étiquette Titre à gauche de la cellule et une étiquette Détail à droite de la cellule. Ensuite, changez l’attribut Accessory en Disclosure Indicator , qui ajoute une petite flèche grise sur le côté droit de la cellule.

Figure 11 – Régler le style sur Détail droit et l’accessoire sur Indicateur de divulgation .

  1. Changeons maintenant le texte des étiquettes Title et Detail . Pour ce faire, double-cliquez d’abord sur l’étiquette supérieure du Title ; mettez-la en mode édition, tapez le texte App Category comme indiqué dans Figure 13 et appuyez ensuite sur return .

Figure 13 – Changer le texte de l’étiquette du titre en App Category .

  1. Comme il s’agit d’un prototype d’application, il est utile de configurer certaines données statiques afin que les utilisateurs puissent se faire une idée de la manière dont elle fonctionnera une fois convertie en une véritable application. Changeons donc le texte de l’étiquette Détail en Jeux , indiquant que l’application examinée est un jeu.Pour ce faire, double-cliquez sur le label Détail pour le mettre en mode édition, tapez le texte Jeux et appuyez ensuite sur Retour . Lorsque vous aurez terminé, la cellule ressemblera à Figure 14 .

Figure 14 – Changer le texte du label Détail en Jeux .

Ceci complète la mise en place de la vue de table. Passons maintenant aux autres commandes de l’interface utilisateur de cette scène !

Ajouter une vue à la scène

Souvent, une vue de table remplit une scène entière. Avec la scène Write Review , ce n’est pas le cas. Il n’y a qu’une seule ligne dans la vue tableau, vous allez donc apprendre à ajouter d’autres contrôles de l’interface utilisateur sous la vue tableau.

Tout d’abord, vous devez ajouter une vue directement sous la vue du tableau pour contenir tous les autres contrôles de l’interface utilisateur. Ceci est nécessaire afin de fournir un conteneur dans lequel vous pouvez positionner et dimensionner vos autres contrôles.

  1. Pour ce faire, faites défiler la bibliothèque d’objets vers le haut, localisez l’élément View , puis faites-le glisser jusqu’à la scène Write Review jusqu’à ce que vous voyiez la barre d’alignement bleue illustrée dans Figure 15 .

Figure 15 – Ajouter une vue à la scène Write Review .

  1. Relâchez le bouton de votre souris pour déposer la Vue sur la scène. Lorsque vous faites cela, elle est automatiquement positionnée directement sous la vue du tableau comme indiqué dans Figure 16 .

Figure 16 – La vue nouvellement ajoutée

  1. Maintenant, redimensionnons la vue pour qu’elle remplisse toute la zone sous la vue du tableau. Pour ce faire, saisissez la poignée de redimensionnement (la petite boîte blanche) au bas de la vue, et faites-la glisser vers le bas de la scène. Pendant que vous faites cela, un popup de taille affiche la largeur et la hauteur de la vue. Continuez à faire glisser vers le bas jusqu’à ce que la hauteur de la vue soit de 415,0 , comme indiqué dans la figure 17 , puis relâchez le bouton de la souris.

Figure 17 – Redimensionner la vue

  1. Ensuite, changeons la couleur de fond de la vue . Avec la vue toujours sélectionnée, allez dans l’inspecteur des attributs et cliquez sur le côté droit de la commande Arrière-plan pour afficher la fenêtre contextuelle des couleurs ( Figure 18 ). Si les Crayons ne sont pas visibles, cliquez sur le bouton Crayons en haut à droite du popup Couleurs. Ensuite, sélectionnez le crayon gris à l’extrême droite de la deuxième ligne à partir du bas, comme indiqué dans Figure 18 .

Figure 18 – Définir la couleur de fond de la vue.

Vous êtes maintenant prêt à ajouter d’autres commandes de l’interface utilisateur à l’intérieur de la vue.

Ajout d’un contrôle d’examen à cinq étoiles

Comme vous pouvez le voir dans la figure 1 , le premier contrôle directement sous la vue du tableau est un contrôle d’examen à cinq étoiles. Malheureusement, ce n’est pas un des contrôles de l’interface utilisateur qu’Apple fournit dans le kit d’outils iOS, j’ai donc dû créer un contrôle iOS personnalisé pour ce projet. Suivez ces étapes pour ajouter le contrôle d’examen à cinq étoiles à votre projet.

  1. Tout d’abord, cliquez sur ce lien et les fichiers d’évaluation à cinq étoiles seront enregistrés dans le dossier Downloads de votre Mac.
  1. Ensuite, allez dans le Project Navigator sur le côté gauche de la fenêtre Xcode, cliquez avec le bouton droit de la souris sur le groupe iAppsReview et sélectionnez Add Files to « iAppsReview »… dans le menu contextuel ( Figure 19 ).

Figure 19 – Ajout de fichiers au groupe iAppsReview .

  1. Dans la fenêtre d’ajout de fichiers qui s’affiche ensuite, sélectionnez le dossier Downloads dans le panneau Favorites sur la gauche. Ensuite, sur le côté droit de la fenêtre, faites défiler vers le bas jusqu’au dossier StarRating et cliquez sur la flèche grise à gauche du dossier pour le développer. Cliquez ensuite sur le fichier mmStarRating.swift pour le sélectionner ( Figure 20 ).

Figure 20 – Ajoutez le fichier mmStarRating.swift à votre projet.

  1. Le fichier étant sélectionné, assurez-vous que l’option Copier les éléments si nécessaire est cochée, puis cliquez sur le bouton Ajouter . Ceci ajoute le fichier à votre projet comme indiqué dans la figure 21 .

Figure 21 – Le nouveau fichier dans le navigateur de projet

Le fichier que vous venez d’ajouter est appelé un fichier de code parce qu’il contient du code de programmation. N’hésitez pas à y jeter un coup d’œil si vous le souhaitez, mais pour l’instant, nous utiliserons simplement le contrôle de l’interface utilisateur par étoiles dans notre projet.

Je tiens à souligner que je n’ai pas créé ce contrôle de classement par étoiles en partant de zéro. Lorsque vous avez besoin d’un nouveau contrôle personnalisé, il est conseillé de faire une recherche sur le web pour voir si quelqu’un d’autre a déjà écrit un contrôle qui est au moins proche de ce que vous voulez. C’est exactement ce que j’ai fait. J’ai trouvé un contrôle de Ray Wenderlich qui était assez proche de ce que je cherchais et je l’ai converti d’Objective-C à Swift. J’ai ensuite ajouté quelques fonctionnalités supplémentaires et j’ai un peu modifié la commande pour qu’elle fonctionne exactement comme je le voulais.

Lorsque vous créez un contrôle personnalisé comme celui-ci, il n’est pas automatiquement ajouté au navigateur d’objets pour que vous puissiez le faire glisser et le déposer sur une scène. Cela demande un travail supplémentaire, mais nous allons passer ce point pour l’instant et je vais vous montrer comment utiliser un contrôle personnalisé dans votre projet sans faire de glisser-déposer depuis la bibliothèque d’objets.

  1. Tout d’abord, assurez-vous que le storyboard est sélectionné dans le navigateur de projet. Ensuite, allez dans le navigateur d’objets, cliquez sur l’élément View pour le sélectionner, puis faites-le glisser sur la scène Write Review comme indiqué dans Figure 22 . Essayez de positionner la nouvelle vue de manière à ce que la ligne directrice apparaisse près du haut de la vue originale, comme indiqué dans Figure 22 (il n’est pas nécessaire que cela soit exactement correct, car nous allons le corriger dans un instant).

Figure 22 – Déposer une nouvelle vue à l’intérieur de la vue existante.

  1. Afin d’obtenir la taille et la position exactes de cette vue , passons à l’inspecteur de taille. Pour ce faire, cliquez sur le deuxième bouton en partant de la droite dans la barre d’outils de l’inspecteur comme indiqué dans Figure 24 . Dans l’inspecteur de taille, définissez les valeurs suivantes pour les attributs de position et de taille :
  • X = 20
  • Y = 0
  • Largeur = 174
  • Hauteur = 60

Lorsque vous avez terminé, la vue doit être dimensionnée et positionnée dans la scène comme indiqué dans Figure 23 .

Figure 23 – Définir la taille et la position de la vue dans l’inspecteur de taille.

  1. La vue étant toujours sélectionnée, passons à l’inspecteur de l’identité en cliquant sur le troisième bouton en partant de la gauche dans la barre d’outils des inspecteurs, comme le montre la figure 24 . Ensuite, changez le paramètre Class en mmStarRating . En procédant ainsi, vous convertissez effectivement l’objet Vue ordinaire en un contrôle de classification à cinq étoiles.C’est aussi simple que cela ! Vous ne verrez pas d’étoiles au moment de la conception, mais vous les verrez lorsque vous lancerez l’application.

Figure 24 – Dans l’inspecteur des attributs, changez la classe en mmStarRating .

  1. Retournez maintenant à l’inspecteur des attributs et définissez la couleur de fond sur Group Table View Background Color afin qu’elle se fonde avec le fond de la vue.
  1. Voyons maintenant comment le contrôle se présente au moment de l’exécution. Cliquez sur le bouton Run de Xcode et après quelques secondes, vous verrez la scène iAppsReview de apparaître dans le simulateur. Cliquez sur la ligne Write a Review dans la vue du tableau et vous naviguerez vers la scène Write Review . Comme vous pouvez le voir, elle contient le nouveau contrôle de notation à cinq étoiles. Lorsque vous cliquez sur les différentes étoiles, elles prennent une couleur dorée et le texte associé s’affiche sous les étoiles, comme le montre la figure 25 .

Figure 25 – Le contrôle de la notation des étoiles au moment de l’exécution

  1. Pour empêcher l’application de fonctionner dans le simulateur, retournez à Xcode et cliquez sur le bouton Stop .

Conclusion

Dans ce billet, vous avez appris comment créer une transition entre deux scènes sur un storyboard, comment ajouter des contrôles à une scène qui contient déjà une vue en tableau, et comment utiliser un contrôle personnalisé (non-Apple) dans vos applications iOS.Si vous rencontrez des difficultés en cours de route, vous pouvez télécharger le projet terminé (jusqu’à présent) à l’adresse ce lien .Dans mon prochain billet, nous finirons cette scène et en construirons une autre, moins compliquée, ajoutant ainsi une autre pièce à vos compétences sur iOS !

Laisser un commentaire

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