Share
Dans ce tutoriel, je vais vous montrer comment créer rapidement une application UITabBar avec Storyboards dans Xcode 4. Allons-y.!
Jetez un coup d'œil à ce que je vais vous montrer pour créer dans le conseil rapide d'aujourd'hui:
Comme le titre l'indique, dans ce didacticiel, nous allons créer une application à barres d'onglets avec Storyboards. Le projet consistera en une simple application à deux onglets créée avec Xcode 4.x. Sans plus tarder, lancez Xcode et créez un nouveau projet. Sélectionnez une application Single View et donnez-lui le nom de votre choix. Pour ce tutoriel, j'appellerai le mien StoryboardTabBar. Lors de la création du projet, assurez-vous que "Utiliser Storyboard" et "Utiliser le comptage de référence automatique" sont sélectionnés, puis enregistrez-le quelque part sur votre disque dur, où vous pourrez le retrouver facilement ultérieurement..
À l'heure actuelle, vous avez configuré une application contenant un contrôleur de vue et une vue. Vous avez également un fichier Storyboard avec votre contrôleur de vue unique. Nous devons maintenant créer un nouveau contrôleur de vue pour pouvoir ajouter un autre onglet. Pour ce faire, accédez à Fichier> Nouveau> Nouveau fichier, puis sélectionnez une sous-classe UIViewController et nommez-le ViewController2 avec une sous-classe de UIViewController. Assurez-vous que les options "Ciblé pour iPad" et "Avec XIB pour l'interface utilisateur" ne sont pas cochées avant de l'ajouter à votre projet. Vous devriez maintenant avoir deux contrôleurs de vue. Bien sûr, ViewController2 ne fait encore rien car nous n’avons associé aucune vue à celle-ci..
Si vous ne l'avez pas déjà fait, ouvrez MainStoryboard.storyboard dans le navigateur de projet. L'avantage de Storyboards est que vous pouvez simplement sélectionner la vue actuelle et accéder à Editeur> Intégrer dans> Contrôleur de la barre d'onglets. Cela ajoute la vue à un contrôleur de barre d’onglet. Si cela a fonctionné, vous avez créé avec succès une application de barre d'onglets! Cependant, il ne contient qu'un seul onglet et nous devons en créer un autre. Pour ce faire, nous devons ouvrir la bibliothèque d'objets, rechercher un contrôleur de vue et le faire glisser vers votre scène / toile..
Nous avons maintenant une autre vue dans notre Storyboard. Cependant, ce n'est pas encore une sous-classe de ViewController2. Accédez à l'inspecteur d'identité situé à droite de Xcode avec le contrôleur de vue sélectionné et attribuez-lui une classe de ViewController2. Vous avez maintenant réussi à attribuer à votre vue une classe de ViewController2, mais elle n'apparaît toujours pas dans la barre d'onglets..
Pour ajouter le nouveau contrôleur de vue à la barre d'onglets, il vous suffit d'appuyer sur Ctrl + Clic et de faire glisser le contrôleur de la barre d'onglets vers la nouvelle vue. Cela formera une "relation" et un nouvel onglet apparaîtra qui affichera la vue de ViewController2. Ensuite, sélectionnez Relation> viewControllers à partir du HUD qui apparaît une fois que vous relâchez le bouton de la souris. Comme par magie, vous verrez un nouvel onglet dans le contrôleur de la barre d'onglets! Maintenant, pour vous assurer que chaque onglet correspond à la vue correcte, ajoutez une étiquette de la bibliothèque d'objets à chaque vue, puis insérez quelque chose d'unique dans cette vue dans chaque étiquette..
Pour vous assurer que tout fonctionne correctement, exécutez l'application dans le simulateur iOS (5.0) et vous devriez voir que chaque onglet correspond à la vue correcte! Malheureusement, les deux onglets du bas ont l’air plutôt tristes et ennuyeux. Épicez-les avec des icônes et un nom! Revenez dans Xcode et ouvrez la sauvegarde du storyboard s'il est fermé..
Sélectionnez la première vue et, en bas, une barre d'onglets contenant un seul élément. Double-cliquez sur le texte "Item" et vous pourrez lui donner un nom. Allez-y, nommez-le comme bon vous semble et faites de même pour le second contrôleur de vue. Maintenant, nous pouvons ajouter une icône pour que vous puissiez vous rendre sur un site Web tel que Glyphish (http://glyphish.com/) et télécharger quelques jolies icônes pour le lancement que vous pourrez utiliser dans votre application pour ce tutoriel. , J'utilise des icônes alternatives d'App Bits (http://www.app-bits.com/free-icons/) - world.png et delivery.png. Ajoutez-les à votre projet en allant dans Fichier> Ajouter des fichiers à «StoryboardTabBar» et ajoutez les fichiers à votre projet. Une fois les icônes ajoutées, double-cliquez sur l'icône dans la barre d'onglets du contrôleur de vue, puis dans l'inspecteur d'attributs, sélectionnez votre image dans le menu déroulant et procédez de la même manière pour la deuxième vue. Si vous voulez exécuter votre application, vous verrez que les onglets ont des noms mais incluent également des icônes!
Dans cette astuce, vous avez réussi à configurer une application de barre d’onglet et à lui ajouter deux vues, toutes à l’aide de la nouvelle fonctionnalité Storyboard de Xcode. Maintenant, vous pouvez utiliser les contrôleurs de vue pour ajouter du contenu à vos vues et personnaliser leur comportement. Sans Storyboards, le processus aurait pris beaucoup plus de temps et aurait abouti au même résultat, que vous l'ayez utilisé ou non à l'aide de l'outil visuel Interface Builder de Xcode ou par code..
Accentsconagua