Libérez votre développeur d’application interne Partie 3 : Plongez plus profondément

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 troisième partie de la série. Si vous venez de commencer, regardez le début de la série ici (Ce post a été mis à jour vers iOS 8.0, Xcode 6.3 et Swift 1.2.)

Dans mon précédent article, nous avons lancé le processus de création d’un prototype d’application iPhone appelé iAppsReview . Vous avez appris comment créer un nouveau projet en Xcode, comment ajouter un storyboard à un projet et le configurer, et comment ajouter un contrôleur de navigation à un storyboard. Vous veniez de commencer à configurer la vue en tableau, que nous terminerons dans ce post. Vous apprendrez comment créer plusieurs sections dans une vue en tableau, définir le texte de l’en-tête de section, ajouter des images à un projet et les incorporer dans les cellules de la vue en tableau.

Figure 1 – La scène principale de l’application

Pour vous aider à vous rafraîchir la mémoire, La figure 1 montre la scène principale sur laquelle nous allons travailler dans ce post. Si vous avez manqué mon précédent billet, ou si vous souhaitez simplement prendre un nouveau départ, vous pouvez télécharger le projet que j’ai créé la semaine dernière à partir de ce lien .

Je vous recommande vivement de suivre vous-même toutes les étapes de ce poste afin de vivre une expérience d’apprentissage optimale.

Ouverture du projet

Reprenons là où nous nous sommes arrêtés et ouvrons le projet que nous avons créé dans mon précédent billet.

  1. Lancez Xcode sur votre Mac.
  1. Pour ouvrir le projet à partir de la fenêtre de bienvenue de Xcode, il suffit de cliquer sur le projet iAppsReview dans le panneau Recents sur le côté droit de la fenêtre ( Figure 2 ), puis de cliquer sur Open . Vous pouvez également ouvrir le projet en sélectionnant Fichier> Ouvrir récent> iAppsReview.xcodeproj dans le menu Xcode.

Figure 2 – Sélectionnez le projet iAppsReview et cliquez sur Ouvrir .

  1. Une fois le projet ouvert, dans le navigateur de projet situé à gauche de la fenêtre Xcode, sélectionnez le fichier Main.storyboard . Le storyboard s’affiche alors dans l’éditeur du créateur d’interface au centre de la fenêtre Xcode.

Configuration de la vue en tableau

Vous êtes maintenant prêt à configurer la vue du tableau dans la scène principale de l’application.

  1. Cliquez sur la zone grise de la scène iAppsReview étiquetée Table View Static Content .
  1. Passez maintenant à l’inspecteur des attributs ( Figure 4 ). Vous vous souvenez peut-être de mon précédent billet que si l’inspecteur des attributs n’est pas visible, vous pouvez sélectionner Affichage> Utilitaires> Afficher l’inspecteur des attributs dans le menu Xcode.Maintenant, changez le Style en Groupés .La vue du tableau prend alors l’apparence d’un groupe, comme le montre la figure 3 de .

Figure 3 – Définir le style de la vue du tableau à Groupée .

  1. Selon notre conception, toutes les cellules de cette vue en tableau doivent avoir la même apparence générale. Supprimons donc toutes les cellules sauf une, configurons la cellule restante, puis copions la pour créer les autres cellules de la vue en tableau. Pour ce faire, sélectionnez la deuxième cellule du tableau en cliquant dessus. Ensuite, pour sélectionner la troisième cellule, maintenez la touche shift enfoncée et cliquez dessus. Cela permet de sélectionner les deux dernières cellules, comme le montre la figure 4 .

Figure 4 – Sélectionnez les deux dernières cellules dans la vue tableau.

  1. Appuyez sur la touche Supprimer pour supprimer les deux cellules sélectionnées. Cela laisse la cellule restante sélectionnée.
  1. Ensuite, allez dans l’inspecteur des attributs et changez le style de la cellule en Basic comme indiqué dans la figure 5 . Ceci ajoute une étiquette unique sur le côté gauche de la cellule. Vous verrez plus loin dans ce tutoriel comment certains des autres styles de cellule se présentent.

Figure 5 – Définir le style de la cellule à Basic .

  1. D’après notre modèle Figure 1 , il devrait y avoir un indicateur de divulgation (une flèche grise à droite) sur le côté droit de toutes les cellules de ce tableau. Ajoutons donc un indicateur à la cellule maintenant. Changez l’attribut de l’accessoire de la cellule en Indicateur de divulgation . Ceci affiche l’indicateur de divulgation sur le côté droit de la cellule comme indiqué dans Figure 6 .

Figure 6 – La cellule contient un indicateur de divulgation.

  1. Maintenant que vous avez défini le style de la cellule de vue de tableau, il est temps d’ajouter plusieurs groupes à la vue de tableau. Pour ce faire, sélectionnez d’abord la vue tableau en cliquant sur la zone grise située sous la cellule de vue tableau intitulée Contenu statique de la vue tableau . Ensuite, allez dans l’inspecteur des attributs et augmentez le nombre de sections à 3 en cliquant deux fois sur la flèche vers le haut à droite de l’attribut Sections . Ce faisant, deux nouvelles sections sont créées, chacune avec une copie de la cellule que vous avez configurée dans les étapes précédentes ( Figure 7 ).

Figure 7 – Fixer le nombre de Sections à 3 .

  1. Comme le montre la figure 1 , la première section du tableau contient deux cellules : Écrire un commentaire et Lire vos commentaires . Pour créer la deuxième cellule, créez une copie de la première cellule. Pour ce faire, cliquez sur la première cellule de la section 1 pour la sélectionner, puis appuyez sur les touches Commande+D (appuyez sur les deux touches en même temps) pour faire une copie de la cellule. Lorsque vous avez terminé, vous devriez voir deux cellules dans la première section comme indiqué dans Figure 8 .

Figure 8 – Dupliquer la première cellule pour créer deux cellules dans la première section.

  1. Maintenant que vous avez toutes les cellules dont vous avez besoin, vous pouvez modifier le texte de l’étiquette Title dans chaque cellule pour les valeurs indiquées dans Figure 1 . Pour ce faire, double-cliquez sur la première cellule de la vue tableau (ou vous pouvez même cliquer deux fois lentement) pour sélectionner l’étiquette Title contenue dans la cellule de la vue tableau. Lorsque le label est sélectionné, allez dans l’inspecteur des attributs et changez le texte du label en Écrire une critique , puis appuyez sur la touche return . Lorsque vous faites cela, le texte de l’étiquette dans la première cellule change comme indiqué dans Figure 9 .

Figure 9 – Définissez le Titre de la première cellule sur Rédiger un commentaire .

  1. Changez maintenant le texte de l’étiquette Title dans les autres cellules comme indiqué dans la liste à puces ci-dessous, en commençant par la deuxième cellule. Lorsque vous aurez terminé, vos cellules de vue de tableau devraient ressembler à Figure 10.
  • Lisez vos commentaires (cellule 2)
  • Lire les examens en ligne (cellule 3)
  • Paramètres et commentaires (cellule 4)

Figure 10 – Définir le texte de toutes les étiquettes des cellules.

Mise en place des en-têtes de section

Comme le montre la Figure 1 , chaque section a un texte d’en-tête qui est utilisé pour décrire les lignes dans chaque section. Suivez les étapes suivantes pour ajouter le texte de l’en-tête de section à votre tableau :

  1. La façon la plus simple de sélectionner individuellement chaque section à configurer dans une vue en tableau est d’utiliser le volet Document Outline de Xcode, qui est illustré sur le côté gauche de Figure 11 . Si le panneau de présentation du document n’est pas visible, vous pouvez cliquer sur le petit bouton carré situé dans le coin inférieur gauche du storyboard ( Figure 11 ) ou vous pouvez sélectionner Éditeur> Afficher le plan du document dans le menu Xcode.

Figure 11 – Le panneau « Plan du document » est situé à gauche du storyboard.

  1. Le plan du document fournit une vue hiérarchique de tous les objets de l’interface utilisateur sur la scène actuellement sélectionnée. Comme vous pouvez le voir dans la figure 12 , il y a trois sections dans la vue en tableau. Sélectionnez la première section de la vue en tableau et nous allons définir son texte d’en-tête.

Figure 12 – Sélectionnez la première section de la vue en tableau

  1. La première section de la vue tableau étant sélectionnée, allez dans l’inspecteur des attributs et changez l’attribut Header en Your Reviews et appuyez sur la touche return . Cela ajoute une section d’en-tête à la scène comme le montre la figure 13 .

Figure 13 – Définir le texte de l’en-tête de la section.

  1. Ensuite, sélectionnez la deuxième section de la vue en tableau dans le volet Aperçu du document et définissez son attribut En-tête à Examens en ligne .
  1. Sélectionnez maintenant la troisième section de la vue en tableau dans la fenêtre du plan du document et définissez son attribut Header à Settings . Lorsque vous avez terminé, les en-têtes de la section de vue en tableau devraient ressembler à Figure 14 .

Figure 14 – Le texte d’en-tête complété

Ajouter des images à votre projet – avec Glyphish & iStockPhoto

L’ajout d’images à l’interface utilisateur de votre application contribue largement à lui donner un aspect professionnel. À moins que vous ne soyez un graphiste, je ne vous recommande pas de créer vos propres images. Il existe de nombreuses images de haute qualité, gratuites et peu coûteuses, sur le web.

Par exemple, toutes les images présentées dans Figure 1 proviennent d’un ensemble d’icônes que vous pouvez obtenir gratuitement sur Glyphish . Ces images sont simples et directes. Vous ne voulez pas que vos utilisateurs tournent la tête de côté pour comprendre ce que votre image essaie de transmettre. Les images de haute qualité de glyphish ne sont qu’un exemple. Je vous recommande de dépenser les 25 dollars supplémentaires pour obtenir Glyphish pro, qui comprend 400 icônes qui sont superbes et fonctionnent bien sur les écrans iOS normaux et Retina.

Lorsque je cherche une image à utiliser pour l’icône de mon application (l’image qui apparaît pour le bouton de l’application sur l’écran d’accueil de l’iOS) et pour les écrans de démarrage qui apparaissent au démarrage, j’aime utiliser iStockPhoto . Les images de ce site ne sont pas gratuites, mais elles sont de haute qualité, relativement peu coûteuses et valent bien l’argent étant donné que l’icône de l’application est la principale image que les utilisateurs voient dans l’app store lorsqu’ils décident d’acheter votre application. Mon conseil ? Dépensez quelques dollars et montrez aux acheteurs potentiels que vous avez une application de haute qualité. Lorsque vous recherchez des images à partir d’iStockPhoto, vous réglez généralement le filtre de recherche sur Illustrations pour trouver des clips artistiques qui conviennent à une application iOS.

J’ai préparé un certain nombre d’images que j’ai incluses dans ce projet. Si vous souhaitez les consulter, sélectionnez le fichier Images.xcassets dans le navigateur de projet et cliquez sur la liste des ensembles d’images ( Figure 15 ).

Figure 15 – Explication du fichier Images.xcassets

  1. Nous examinerons plus tard d’autres fichiers d’images intéressants, mais pour l’instant, ajoutons des images aux cellules de la vue en tableau. Pour commencer, sélectionnez la première cellule ( Écrire une critique ) dans la vue tableau. Ensuite, allez dans l’inspecteur des attributs et dans la boîte combinée Image , sélectionnez Crayon (tous les fichiers que vous venez d’ajouter au projet sont maintenant listés ici). Cela affiche l’image du crayon sur le côté gauche de la cellule comme indiqué dans Figure 16 .

Figure 16 – Définir l’attribut de l’image de la première cellule à pencil.png .

  1. Changez maintenant l’attribut Image des autres cellules comme indiqué dans la liste à puces ci-dessous, en commençant par la deuxième cellule. Lorsque vous avez terminé, vos cellules de la vue tableau doivent ressembler à Figure 17.
  • LectureRévision (cellule 2)
  • Télécharger (cellule 3)
  • Matériel (cellule 4)

Figure 17 – Définir l’attribut Image de chaque cellule dans la vue tableau.

  1. Dans les images du projet, j’ai inclus l’icône de l’application et les images de lancement. Pour les voir, dans le navigateur de projet situé sur le côté gauche de la fenêtre Xcode, sélectionnez le fichier Images.xcassets . Vous devriez alors voir le catalogue d’actifs affiché au centre de la fenêtre Xcode. S’il n’est pas déjà sélectionné, sélectionnez AppIcon dans la liste à droite du navigateur de projet comme indiqué dans Figure 18 .

Étant donné que j’ai précisé que cette application est réservée aux iPhones et fonctionnera sous iOS 8, Xcode a décidé que je devrais inclure quatre icônes d’application avec mon application, ce que j’ai fait ( Figure 18 ).

Figure 18 – Les icônes des applications sont configurées dans le catalogue des actifs.

  1. Voyons maintenant les images du lancement. Ce sont les images qui sont affichées au premier démarrage de l’application. Pour ce faire, cliquez sur LaunchImage dans la liste à gauche du catalogue des actifs. Lorsque vous faites cela, vous verrez les paramètres de LaunchImage comme indiqué dans Figure 19.

Figure 19 – Les images de lancement dans le catalogue d’actifs.

  1. Xcode ajoute un LaunchScreen.xib à votre projet lorsque vous le créez pour la première fois, et par défaut, cet écran est affiché lors du premier lancement de votre application. Pour afficher l’image de lancement à la place, dans le navigateur de projet, sélectionnez le premier nœud, qui affiche l’éditeur de projet. Sous Targets , sélectionnez iAppsReview et assurez-vous que l’onglet General est sélectionné ( Figure 20 ). Sous la section Icônes de l’application et images de lancement , réglez Source de l’image de lancement sur Image de lancement , et décochez la case Fichier de l’écran de lancement .

Figure 20 – Définition des images de lancement

  1. Le fichier LaunchScreen.xib n’est plus utilisé, vous pouvez donc le supprimer. Pour ce faire, cliquez avec le bouton droit de la souris sur le fichier LaunchScreen.xib dans le navigateur de projet. Sélectionnez Supprimer dans le menu contextuel, puis sélectionnez Déplacer vers la corbeille .

Exécution de l’application dans le simulateur

Il est maintenant temps de voir à quoi ressemble l’application dans le simulateur. Dans Xcode, cliquez sur le bouton Run , et après plusieurs secondes vous devriez voir iAppsReview apparaître dans le Simulateur comme indiqué sur le côté gauche de Figure 21 . Au début, l’image de lancement de la nouvelle application que vous venez d’ajouter au projet est affichée. Après quelques secondes, l’image de lancement de l’application disparaît et vous verrez la scène principale de iAppsReview comme indiqué sur le côté droit de Figure 28 . Dans un prochain article, je vous montrerai comment faire en sorte que l’image de lancement de l’application s’efface lentement plutôt que de disparaître brusquement de l’écran.

Figure 28 – iAppsReview fonctionnant dans le simulateur !

Conclusion

Dans ce billet, vous avez appris à créer plusieurs sections dans une vue en tableau, à définir le texte des en-têtes de section, ainsi qu’à ajouter des images (y compris des images de lancement d’applications) à un projet et à les incorporer dans les cellules de la vue en tableau. Dans mon prochain billet, nous ajouterons une nouvelle scène au storyboard, nous apprendrons comment créer une transition vers celle-ci et nous découvrirons plusieurs autres commandes de l’interface utilisateur d’iOS en cours de route.

Laisser un commentaire

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