06 Mer Introduction aux storyboards
1. Introduction
Apple a introduit les storyboards sur le lancement de l’iOS 5.
fait beaucoup d’années de cette …
Cependant, j’ai reçu 2 courriels de la lecture effective commentaire Ils ont trouvé des difficultés à suivre des tutoriels car ils ne dominent pas les storyboards.
Donc, cette semaine sera le sujet sur lequel nous allons concentrer notre didacticiel.
Avant le lancement. des storyboards, les développeurs ios n’ont eu que la possibilité de créer les interfaces de nos applications via des fichiers avec une extension .xib ou directement les programmer via le code.
chacun de ces fichiers représentait un écran de notre application.
Cette façon de travailler avait ses avantages (souvent .xib est toujours meilleur choix que des storyboards) et bien sûr, aussi leurs inconvénients.
Par conséquent, vous avez aujourd’hui trois options pour créer vos interfaces :
- les progrès directement Via Code
- Utilisez des fichiers .xib
- Utilisez des storyboards
dans le tutoriel de cette semaine, voyons tout ce que vous devez savoir pour vous sentir à l’aise avec des storyboards et ne posez pas de problème chaque fois que vous souhaitez créer une nouvelle application iOS.
Avantages de l’utilisation de storyboards dans vos développements
peut-être plus tard, développez une didacticiel sur la manière de créer des interfaces via le code ou directement en utilisant .xib.
Comme cette semaine, nous allons nous concentrer sur les storyboards, voyons certains des avantages qu’ils nous offrent.
- Ils sont parfaits pour voir la navigation complète Flux d’une application.
- vous permet de créer une application multiview sans avoir à écrire pratiquement du code.
- sont très utiles pour les développements de petite taille.
Comme toute option, ils ont également des inconvénients.
Je vais juste commenter sur a.
Parce que toute notre interface est concentrée dans un \ Dossier Nico, il existe de nombreux conflits qui compliquent le développement de l’équipe d’une application.
Cependant, dans de nombreuses équipes de développement sont l’option privilégiée lors de la création d’une interface, il est donc important de pouvoir travailler avec eux.
3. Que allons-nous voir dans ce didacticiel sur des storyboards?
Les points les plus importants que nous verrons sont les suivants:
- Avantages de l’utilisation de storyboards dans vos développements
- connaître l’interface de constructeur
- Quel est le quai?
- Spécification de l’interface principale de notre application
- SÉQUENCE DE START D’UN
- Comment sélectionner le contrôleur d’affichage initial
- Définissez les modes de portrait et de paysage de notre application
- Comment ajouter une tableViewController, une carte de navigation et un tabbarcontroller?
Commençons ensuite à regarder les fondations de base des storyboards.
Création de notre projet en Xcode
Pour démarrer créer un nouveau projet en Xcode, accédant au menu Fichier. > Nouveau > Projet … et choisissez le modèle de demande de vue unique:
puis cliquez sur Suivant et donnez-le le non Vous voulez. Dans mon cas, je vais appeler it Storyboards_demo. Laissez le reste des options, comme vous les voyez dans l’image:
Cliquez sur Suivant, enregistrez le projet Partout où vous le souhaitez et fini en appuyant sur le bouton Créer.
Après avoir créé le projet, Xcode vous montrera quelque chose comme ceci:
Avec ce projet de démonstration, nous verrons tout nécessaire pour maîtriser les storyboards.
5. Storyboards ‘Basics
Cliquez sur le fichier principal.storyboard et voyez des concepts que vous devez connaître:
Builder d’interface
L’écran qui a été ouvert lors de l’accès La carte principale est connue sous le nom d’interface de constructeur et a le look suivant:
dans les premières versions d’IOS, Interface Builder était une application indépendante de Xcode et tout aussi bien que maintenant, il a été utilisé pour créer les interfaces de nos applications.
La partie gauche de l’interface de constructeur est appelée contour de document et nous montre une Liste de toutes les scènes qui composent notre interface.
une scène représente chacun des écrans de notre application
à l’intérieur de chaque scène, tous les objets qui s’ajoutent à l’interface, en plus des contraintes et d’autres éléments.
Pour afficher ou masquer le plan de document Vous pouvez utiliser le bouton suivant, situé en bas à gauche:
Comme vous le voyez, dans notre projet nouvellement créé, nous n’avons qu’un écran. Cet écran est représenté par notre contrôleur d’affichage.
dans la partie supérieure droite du constructeur d’interface, nous avons l’inspecteur des attributs. Grâce aux options que vous offrez, nous pouvons apporter des modifications aux propriétés de tout objet qui fait partie de notre interface.
à l’intérieur de l’inspecteur d’attributs Vous avez 6 menus différents, où tout le monde contrôle un aspect différent de tout objet:
D’autre part, en bas à droite, jetez la bibliothèque de l’objet:
à partir d’ici, vous pouvez ajouter n’importe quel élément à l’interface de votre application.
Test par exemple Pour faire glisser une étiquette, un bouton, un champ de texte et un curseur à votre mode de vue:
Vous regardez En plus de les ajouter à notre interface, Xcode les a ajoutés à la liste des éléments qui apparaissent dans le contour du document:
oui alecu Tas l’application, rendant CMD + R, vous verrez que les éléments que nous avons ajoutés à notre interface sont affichés dans le simulateur.
DOCK
Juste au-dessus de chaque ViewController, vous pouvez voir le quai.
Le quai indique les objets de haut niveau de chaque scène. Chaque scène aura au moins un objet ViewController, un premier objet de réponse et un objet de sortie, mais il peut également avoir d’autres éléments. Le quai est simplement un document de contour miniatures.
Contentroller représente évidemment notre seul mode de vue.
La première réponse gère la mise au point de notre application. Très probablement, pratiquement ne l’utilise pratiquement pas.
sortie peut être utilisé pour ajouter des options de navigation à nos interfaces.
interface principale
avant, lors de l’exécution de notre projet , la demande que nous avons créée, savait déjà parfaitement ce que le storyboard que je devais lier lors de l’exécution de l’application.
Cela n’a pas de mystère, nous n’avons qu’un fichier principal.storyboard, alors quelle est la normale que notre projet sait que c’est le fichier contenant notre interface.
Toutefois, dans un autre projet, vous pouvez utiliser plusieurs scènes de scénario différents, il est donc important que vous compreniez, où nous spécifions quel est le scénario principal .
Simplifiant beaucoup, toute application iOS, par défaut, commence son exécution dans la classe Appdelegate.swift.
Cliquez sur cette classe et consultez la partie initiale de celle-ci:
|
2
3
5
5
div> 6
> 7
9
10
11
12
|
@uiapplicationMain
Classe AppDelegate: UIREPONDER, UIAPPlicationDegate {
Var window: uiwindow?
fonction (_ Application: UIAUPLICATION, DIDFinishLanchingWithOptions Lanchantes:?) – >
// Point de remplacement de la personnalisation après le lancement des applications .
retourne vrai
}
…
|
L’attribut @uiapplicationMain situé au sommet détermine que notre classe d’appdelegate est le point d’entrée de notre application.
Il est obligatoire que notre appdelegate Hériter de UIRECPONDON et avez une propriété de type UIWindow afin que l’application fonctionne pour que l’application fonctionne.
Si vous regardez les méthodes qui apparaissent dans cette classe, toutes sont pratiquement vides. Seulsfinishlaunchingwithoptions () a du code et la seule chose qu’il fait est de retour vrai.
Une fois la classe initiale de notre demande, il est susceptible de vous suivre. Où est la référence de notre application au storyboard?
l’info fichier.plist
Pour répondre à ce que vous devrez ouvrir le fichier info.plist et localiser l’entrée de nom de base du fichier de scénario principal.
Lorsque nous exécutons l’application, l’objet UIAPPLication charge le storyboard spécifié dans cette touche, initialise le ViewController qui est marqué comme contrôleur d’affichage initial (nous verrons maintenant où cela est fait), puis place la vue de cette vue Concontroller sur l’objet UIWindow.
Il y a un autre point où nous devons spécifier quel est le principal point interface de notre application. Si vous cliquez sur le nom du projet, en haut à gauche et que vous faites défiler jusqu’à la section Info de déploiement, vous verrez comment une autre option appelée interface principale, où le nom de notre scénario apparaît.
Ces 2 options sont fondamentales pour que votre application commence correctement.
Contrôleur d’affichage initial
Nous avons examiné au point précédent, qui une fois que nous avons spécifié, qui sera notre scénario principal, nous devons également déterminer ce qui sera la liste de visualisation que notre application doit être chargée d’abord.
Pour sélectionner ceci, accès Main.Storyboard, cliquez sur notre uniquement ViewController et sur la quatrième option de l’inspecteur de la propriété, vous verrez l’option de contrôleur d’affichage initial.
Cette option spécifie que lorsque le storyboard est chargé, le premier écran que le plus Rárá Notre application sera celle qui est sélectionnée comme contrôleur d’affichage initial.
En fait, si vous regardez, vous verrez qu’au constructeur d’interface, juste à gauche de la vue de la vue apparaît une flèche pointant une flèche À droite. Si vous faites glisser cette flèche et placez-la en pointe vers une autre vueController, celle-ci deviendrait le contrôleur d’affichage initial.
En conclusion, si, à un moment donné, vous avez des problèmes avec votre application, car vous voyez que vous le faites. ne chargez pas le storyboard que cela devrait ou parce que le premier écran qui indique n’est pas celui que vous souhaitez, il est pratique que vous vérifiez ces 3 dernières options que nous venons de voir, car il est très probable que vous ayez modifié l’un d’entre eux et Ne me souviens pas de cela.
Portrait / Paysage
Lorsque vous développez une application, vous avez plusieurs options.
Vous voudrez peut-être que votre application soit exécutée seule en portrait ( Lorsque le périphérique est en position verticale) ou également dans le paysage (lorsque le périphérique est en position horizontale).
Ces options et plus vous pouvez les contrôler dans le menu que nous avons vu avant: informations de déploiement.
dans la section Orientation des périphériques, vous pouvez voir quoi E Vous avez 4 options à choisir.
Si nous exécutons l’application, avec les options que vous voyez dans l’image, notre application tourne à la rotation de son interface chaque fois que nous utilisions l’iPhone en position verticale avec le bouton de la maison avec le bouton de la maison ci-dessous et aussi en position horizontale, à la fois avec le bouton de la maison à droite et à gauche.
Cependant, si notre appareil est en position verticale avec le bouton Home UP, notre application ne serait pas adaptée à Cette position, étant donné que l’option à l’envers est désactivée.
Par conséquent, c’est ce que chacune des options représente:
- portrait: position verticale avec le bouton de la maison ci-dessous
- à l’envers: position verticale avec le bouton de la maison Up
- Paysage à gauche: position horizontale avec le bouton de la maison à gauche
- Paysage Droite: position horizontale avec le bouton de la maison Vers le droit
En ce qui concerne le développement de votre projet, vous devez prendre en compte tout cela.
Ajouter un TableViewController
Par défaut, lorsque nous créons une application de visualisation unique, le projet Xcode crée une entreprise de vue dans notre storyboard.
Parfois, vous voulez probablement travailler directement avec une tableViewController.
Dans ces cas, se remplacer mutuellement, aussi vite que procédez comme suit:
- Sélectionnez notre mode de vue de la page principale.storyboard
- Retirez-le en appuyant sur la Supprimer KEY
- Ajoutez une tableViewController à partir de la bibliothèque d’objets
- Choisissez cette tableViewController en tant que contrôleur d’affichage initial
ci-dessous, vous pouvez voir cette séquence d’actions:
Si vous exécutez actuellement l’application, vous verrez comment la vue initiale indiquée est celle d’une vision de table vide.
Ajouter une navigationController
La navigationController est l’option parfaite TA Pour ajouter la navigation entre les écrans lorsque nous créons des applications multivistes.
Une navigationController doit toujours être associé à un autre contrôleur. Ce contrôleur peut être de n’importe quel type: ViewController, TableViewController, CollectionViewController.
Ce contrôleur associé à la navigationController devient son contrôleur principal, c’est-à-dire dans sa racine racineviewcontroller.
Pour ajouter une carte de navigation à votre application, vous pouvez suivre certaines étapes similaires à celles que nous avons vues Dans la section précédente:
- Sélectionnez notre tableViewController à la page principale.storyboard
- Supprimer en appuyant sur la touche DELETE
- Ajoutez une navigationController de l’objet Bibliothèque
- Choisissez cette navigationController comme contrôleur d’affichage initial
Ici, vous avez ces étapes sur la vidéo:
Comme vous avez été capable d’observer, la navigationController a été associée par défaut une tableViewController.
Si vous exécutez actuellement le projet, vous verrez comment Notre application affiche la tableViewController avec une barre de navigation en haut avec le titre du contrôleur Root View Controller, qui indique que notre application a une naveiga TIONController.
Ajout d’un tabbarcontroller
LOS TabbarCarroller, tout comme NavigationController Ils vous permettent Pour créer des applications multivistes.
Toutefois, si dans la navigationContrôleurs, nous établissons une navigation hiérarchique, des parents aux enfants, dans le tabbarController, les différentes correspondances que nous utilisons seront au même niveau de navigation.
Pour ajouter une tabbarcontroller via un storyboard, nous suivrons quelques étapes similaires à celles observées dans les sections précédentes:
- Sélectionnez notre navigationContrôleur à la carte principale
- Supprimer en appuyant sur la touche DELETE
- Sélectionnez le contrôleur de la racine de la racine de la navigation
- Retirez-le également avec la touche Suppr>
- Ajouter une tabbarcontroller de la bibliothèque de Objets
- Choisissez cette tabbarController en tant que contrôleur d’affichage initial
Ce sont les PAS suivi:
Si vous exécutez l’application, vous verrez comment notre écran principal est maintenant un tabbarcontroller qui compte avec 2 ViewControlers, identifié comme élément 1 et élément 2.
9. Résumé final
Nous avons fait une critique rapide sur les aspects fondamentaux des storyboards. Nous avons vu comment ajouter des éléments de base qui nous permettront de créer des interfaces complexes.
Cependant, nous n’avons pas traité l’un des thèmes les plus importants des scènes de scénario: les membres.
Ce concept nous le verrai dans la deuxième partie de ce tutoriel. Accédez maintenant à la deuxième partie d’ici.
10. Vous avez terminé le tutoriel
Vous avez terminé le tutoriel de cette semaine dans Effecle. Comme toujours, voici votre récompense. La vidéo chorra cette semaine:
11. Où aller maintenant?
accède à la deuxième partie du tutoriel sur des storyboards, où nous verrons des concepts plus avancés qui seront très utiles, d’ici,
Vous pouvez accéder à plus de tutoriels Disponible dans Effacer à partir d’ici.
Si cet article a semblé utile, vous me feriez une grande faveur en partageant de votre réseaux sociaux.