Share
Même si nous avons déjà beaucoup appris de cette série sur le développement iOS, je suis sûr que vous êtes impatient de commencer à créer des applications iOS qui font quelque chose de cool ou d’utile. Dans ce tutoriel, votre souhait est exaucé. À l'aide de Xcode, vous créez un projet iOS à partir de rien, modifiez le code source du projet et exécutez votre application sur le simulateur iOS ou sur un périphérique physique..
Colorific est le nom de l'application que nous sommes sur le point de construire. L’idée de Colorific est simple: chaque fois que l’utilisateur touche l’écran de l’appareil, la couleur de l’écran change. Bien que le concept soit basique, Colorific est idéal pour se lancer et explorer les tenants et les aboutissants du développement iOS..
Comme nous l'avons vu précédemment dans cette série, chaque application iOS passe par la vie en tant que projet Xcode. Qu'est-ce qu'un projet Xcode? Un projet Xcode est un conteneur ou un référentiel contenant les fichiers, les actifs et les informations nécessaires pour créer un ou plusieurs produits..
Notez que cela ne se limite pas au code source et aux ressources d'un projet, telles que les images et autres supports. Un projet tient également compte des liens entre ses divers éléments et sait comment construire les produits finaux à partir de ses éléments..
Lancez Xcode et créez un nouveau projet Xcode en choisissant Nouveau> Projet… du Fichier menu. Une autre option est d'appuyer Maj + Commande + N.
Si la fenêtre de bienvenue de Xcode apparaît lorsque vous lancez Xcode, je vous suggère de la fermer pour apprendre à créer un nouveau projet à l'aide du menu de Xcode..
Il est facile de démarrer avec une nouvelle application ou un nouveau projet dans Xcode grâce aux modèles d'application fournis. Pour l’application que nous sommes sur le point de créer, nous avons besoin de la Application à vue unique modèle. N'hésitez pas à regarder les autres modèles d’application, mais assurez-vous de choisir le Application à vue unique modèle pour Colorific.
Après avoir sélectionné le Application à vue unique modèle et en cliquant sur le Suivant bouton, Xcode vous présente une liste d’options vous permettant de configurer votre nouveau projet. Jetons un coup d'oeil aux différentes options.
Vous devez maintenant bien comprendre les différentes options de configuration lors de la configuration d’un nouveau projet Xcode. Pour ce projet, je vous recommande d'utiliser les options indiquées dans la capture d'écran ci-dessus. Notez que la plupart des options peuvent facilement être modifiées après la création de votre projet. Clique le Suivant bouton lorsque vous avez fini de configurer votre projet.
À l'étape suivante, Xcode vous demande où vous souhaitez enregistrer votre nouveau projet. Vous avez peut-être remarqué la petite case au bas de la fenêtre intitulée Créer un référentiel git sur mon Mac. Le texte gris en dessous de la case à cocher lit Xcode placera votre projet sous contrôle de version.
Comme je l’ai mentionné précédemment dans cette série, le contrôle de source est indispensable au développement de logiciels. Cette série ne couvrira pas ce sujet en détail, mais si vous êtes sérieux au sujet du développement logiciel, alors je vous recommande fortement de lire sur le contrôle de source.
Git est le plus populaire SCM (Gestion du code source) dans la communauté du cacao. Cependant, il est parfaitement possible d’utiliser un système SCM différent, tel que SVN ou Mercurial..
Indiquez à Xcode où vous souhaitez enregistrer votre projet, cochez la case pour autoriser Xcode à créer un référentiel git pour le projet, puis cliquez sur le bouton Créer bouton.
Avant de poursuivre, je souhaite prendre quelques minutes pour explorer l'interface utilisateur de Xcode. Vous pouvez voir quatre zones distinctes:
La barre d'outils située en haut contient les boutons et les menus que vous utilisez fréquemment. Comme nous l'avons vu précédemment dans cette série, les boutons permettant d'exécuter et d'arrêter une application en direct dans la barre d'outils.
L'affichage au centre de la barre d'outils est similaire à l'affichage que vous trouvez dans iTunes. Il affiche des informations sur l'état de votre projet, par exemple, il vous indiquera quand une construction réussit ou échoue..
Les deux contrôles segmentés à droite de la barre d’outils peuvent être utilisés pour personnaliser l’interface utilisateur de Xcode. Jouez avec les différentes commandes pour découvrir comment chacune d'elles modifie l'interface utilisateur de Xcode..
L’objectif principal de la barre latérale gauche est destiné à la navigation et est souvent appelé Xcode. navigateur.
Le navigateur a différents onglets avec le Navigateur de projet à l'extrême gauche. La sélection dans la barre latérale gauche détermine ce qui est affiché dans la vue principale de Xcode, l’espace de travail.
La vue principale ou l’espace de travail est la zone où vous passerez le plus clair de votre temps. C'est le cheval de bataille de Xcode et affiche tout ce qui est sélectionné dans le navigateur..
Alors que la barre latérale gauche contrôle ce qui est affiché dans la vue principale de Xcode, le contenu de la barre latérale droite reflète ce qui est affiché ou sélectionné dans la vue principale..
La barre latérale droite, également connue sous le nom de inspecteur, s'adapte à tout ce que l'utilisateur sélectionne dans la vue principale.
Il est temps de jeter un coup d'œil au projet lui-même. Le contenu du projet est affiché dans le Navigateur de projet, le premier onglet dans la barre latérale gauche. Sélectionnez le premier article dans le navigateur de projet pour afficher les détails du projet dans la vue principale.
La vue principale est composée de deux sections, une barre latérale à gauche et une vue de détail à droite. Dans la barre latérale, vous voyez deux éléments, votre projet avec un élément et des cibles avec deux éléments..
Il est bon de savoir très tôt quelle est la différence entre un projet et une cible. Comme je l'ai mentionné précédemment, un projet est un référentiel pour les fichiers, les actifs et les données nécessaires à la création d'un ou de plusieurs produits. Une cible, cependant, fait référence à l'un de ces produits. Une cible contient les instructions nécessaires pour créer un produit avec les ressources du projet. Cela signifie qu'un projet peut contenir plusieurs cibles pour créer plusieurs produits. Comme vous pouvez le constater, un projet Xcode est plus qu’un dossier contenant de nombreux fichiers..
Avant de commencer à modifier le code source du projet, il peut être intéressant de créer et d'exécuter votre nouveau projet pour voir ce que le modèle d'application nous a fourni gratuitement. Clique le Courir en haut à gauche et assurez-vous que le schéma actif est configuré pour exécuter l'application dans le simulateur iOS en sélectionnant iPhone Retina (4 pouces).
Si tout s'est bien passé, le simulateur iOS devrait lancer votre application et afficher une vue blanche vide avec la barre d'état familière en haut..
Mettons-nous au travail et modifions l'interface utilisateur de l'application. Ouvrez le Navigateur de projet et sélectionnez le fichier nommé Tableau principal. Un fichier avec un .story-board extension est un fichier d'interface utilisateur. Dans ce fichier, nous créons l'interface utilisateur de l'application.
Le storyboard contient un élément, un contrôleur de vue avec la vue blanche que vous avez vue dans le simulateur iOS il y a quelques instants. L'espace de travail est composé d'une barre latérale montrant la représentation de l'objet du des scènes du storyboard. La plus grande partie de l'espace de travail contient les scènes ou l'interface utilisateur de l'application.
Sélectionnez l'objet nommé Vue dans le Contrôleur de vue Scène dans la barre latérale gauche et voyez comment l’espace de travail et la barre latérale droite mettent à jour leur contenu. Un groupe d'onglets apparaît en haut de la barre latérale droite. Chacun des onglets contient une collection d'attributs liés à l'objet nommé Vue.
La moitié inférieure de la barre latérale droite contient une section avec quatre onglets. Le troisième onglet est représenté par l'image d'une boîte en trois dimensions. Cette boîte est la façon dont les objets sont couramment affichés dans Xcode.
Cliquez sur l'onglet avec l'icône de la boîte et faites défiler la liste qui apparaît. La liste est appelée le Bibliothèque d'objets et contient divers éléments d'interface utilisateur, tels que des boutons, des curseurs et des commutateurs.
Au début de ce tutoriel, je vous ai dit que nous allions créer une application avec une certaine interactivité. L'utilisateur doit pouvoir toucher l'écran pour changer sa couleur.
Détecter les contacts dans une application iOS peut être effectué de différentes manières. Une solution consiste à utiliser un bouton. dans le Bibliothèque d'objets, trouver l'article nommé UIButton et faites-le glisser de la bibliothèque d'objets vers la vue blanche dans l'espace de travail de Xcode.
L'utilisateur doit pouvoir toucher n'importe quelle partie de l'écran, ce qui signifie que le bouton doit couvrir tout l'écran. Avez-vous remarqué les six petits carrés sur les bords du bouton? En déplaçant les minuscules carrés, vous pouvez modifier les dimensions du bouton.
Ajustez la taille du bouton pour qu’il recouvre tout l’écran. Ne vous inquiétez pas de la barre d'état en haut de l'écran.
La vue derrière le bouton est la vue qui changera de couleur lorsque l'utilisateur touchera l'écran. Pour le moment, le bouton bloque la vue de la vue de l'utilisateur. Nous devons donc modifier les attributs du bouton..
Vous avez peut-être remarqué que le bouton a été ajouté à la liste des objets dans la barre latérale gauche, sous l'objet nommé Vue. Sélectionnez le bouton dans la liste d'objets et sélectionnez le Inspecteur d'attributs dans la barre latérale droite, le quatrième onglet de gauche. Il suffit de faire deux ajustements.
Commencez par changer le type du bouton de Système à Douane. Cela rendra le bouton transparent.
Le deuxième changement que nous devons faire est de dire à l'utilisateur ce qu'il doit faire en changeant le titre du bouton. Le champ de texte à côté de l'étiquette Titre lit actuellement Bouton. Changer ceci en Appuyez sur pour changer de couleur et mettre le Couleur du texte noir pour qu'il soit lisible.
Si vous connaissez le MVC (Model-Vvue-Controller), vous avez donc une longueur d'avance en apprenant le développement iOS. Le modèle MVC est un modèle utilisé dans de nombreux langages et frameworks, tels que Ruby on Rails et CodeIgniter..
La vue dans notre interface utilisateur tombe dans la V catégorie dans le modèle MVC. Une vue est contrôlée par un contrôleur. Regardez les noms de fichiers dans le Navigateur de projet sur la gauche. Les fichiers représentent un contrôleur de vue qui contrôle la vue dans notre interface utilisateur..
Que fait un contrôleur de vue? Un contrôleur de vue peut faire ce que vous voulez, mais il est en premier lieu responsable de la gestion de tout ce qui se passe dans la vue qu'il gère. Cela inclut, par exemple, les contacts de l'utilisateur. Si l'utilisateur appuie sur le bouton dans la vue, il incombe au contrôleur de gérer l'événement tactile..
Comment gérons-nous un événement tactile? Dans le cas de notre bouton, nous ajoutons une action au contrôleur de vue. Une action est un nom de fantaisie pour une méthode. Quelle est une méthode? Une méthode est à la base une fonction C. Attendre. Quoi? Ne vous préoccupez pas trop de la terminologie à ce stade. Les deux prochains articles couvriront C et Objective-C plus en détail. Ce qu'il faut retenir, c'est qu'une méthode est semblable à une méthode en Ruby et PHP ou à une fonction en JavaScript.
Si vous appelez une méthode d'un contrôleur, il réagit. En d'autres termes, si un utilisateur appuie sur le bouton et que nous connectons une méthode à cet événement tactile, le contrôleur agira en réponse à cet événement tactile..
Pour ajouter une action au contrôleur de vue qui gère la vue dans notre interface utilisateur, nous devons apporter quelques modifications au fichier nommé. TSPViewController.h. Fichiers avec un .h extension sont fichiers d'en-tête. Le fichier d'en-tête d'un contrôleur de vue contient des informations sur le contrôleur de vue - la classe de contrôleur de vue, pour être précis. Il suffit d'ajouter une ligne de code au fichier d'en-tête. Regardez comment j'ai modifié le fichier d'en-tête du contrôleur de vue.
// // TSPViewController.h // Colorific // // Créé par Bart Jacobs le 27/03/14. // Copyright (c) 2014 Tuts +. Tous les droits sont réservés. // #import@interface TSPViewController: UIViewController - (IBAction) changeColor: (id) expéditeur; @fin
Même si nous ne nous intéresserons pas à la syntaxe dans ce didacticiel, il est relativement facile de comprendre ce qui se passe. Le nom de l'action ou de la méthode est changer de couleur: et il a un argument, expéditeur. Le type de l'argument est identifiant, ce qui signifie n'importe quel objet. Que sont encore les objets? Sauterelle de patience. L'action se termine par un point-virgule.
Nous avons ajouté une action au contrôleur de vue, mais l'action ne fait pas grand chose. Ce que nous avons fait est déclarer une action. Cela signifie simplement que toute partie de l'application prenant une crête dans le fichier d'en-tête du contrôleur de vue sait également qu'elle a une action nommée changer de couleur:. C'est comme un restaurant qui vous propose le menu. Vous pouvez voir ce qu’il a à offrir, mais cela ne vous indique pas à quoi ressemble chaque élément du menu ni ce qu’il a un goût..
Ce que nous devons faire est de mettre en œuvre l’action et nous le faisons dans le contrôleur de vue. fichier d'implémentation. C'est vrai. Le fichier avec le .m extension est le fichier d'implémentation. Sélectionnez le fichier nommé TSPViewController.m et regardez son contenu.
Vous attendiez-vous à ce qu'il soit vide? Xcode nous a fourni un code standard commun aux contrôleurs de vue. La bonne chose à propos d’Objective-C est qu’il a des noms de méthodes très lisibles. Les développeurs se plaignent souvent de la longueur des noms de méthodes, mais l’avantage est que vous savez ce qu’une méthode fait en regardant son nom..
Mettre en œuvre le changer de couleur: action, nous copions ce que nous avons écrit dans le fichier d’en-tête et remplaçons le point-virgule final par une accolade ouvrante et fermante.
// // TSPViewController.m // Colorific // // Créé par Bart Jacobs le 27/03/14. // Copyright (c) 2014 Tuts +. Tous les droits sont réservés. // #import "TSPViewController.h" @interface TSPViewController () @end @implementation TSPViewController - (void) viewDidLoad [super viewDidLoad]; // Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib. - (void) didReceiveMemoryWarning [super didReceiveMemoryWarning]; // Élimine toutes les ressources pouvant être recréées. - (IBAction) changeColor: expéditeur (id) @end
J'ai ajouté le contenu de l'intégralité du fichier d'implémentation afin que vous puissiez voir où ajouter l'implémentation de la méthode. Il doit être après @implementation TSPViewController et avant le dernier @fin. Notez également qu'il ne peut pas être imbriqué dans une autre implémentation de méthode.
Il est temps de faire quelque chose d'utile dans notre action. Je ne vais pas expliquer chaque ligne de code en détail, mais je vais vous donner l'essentiel de ce qui se passe.
- (IBAction) changeColor: (id) expéditeur int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * color = [UIColor colorWithRed: (r / 255.0) vert: (g / 255.0) bleu: (b / 255.0) alpha: 1.0]; [self.view setBackgroundColor: color];
Comme vous le savez peut-être, il est possible de décomposer une couleur en trois couleurs primaires, le rouge, le vert et le bleu. Dans notre action, nous générons trois nombres aléatoires entre 0 et 255, et utiliser ces chiffres pour créer une couleur aléatoire.
La méthode que nous utilisons pour créer la couleur est très descriptive, colorWithRed: vert: bleu: alpha:. Dans la dernière ligne de notre action, nous avons défini la couleur de fond de la vue dans notre interface utilisateur sur cette nouvelle couleur générée de manière aléatoire..
Le mot soi fait référence au contrôleur de vue. Ne vous inquiétez pas si rien de tout cela n'a de sens. Cela deviendra plus clair une fois que nous aurons abordé les bases du C et de l’Objectif-C dans les prochaines leçons..
Les commentaires sont importants lors de l'écriture de code. Avez-vous remarqué les commentaires que j'ai ajoutés à la mise en œuvre de changer de couleur:? Les commentaires sur une ligne commencent par deux barres obliques (//), alors que les commentaires multilignes commencent par / * et se termine par * /.
La méthode est mise en œuvre, mais rien de spectaculaire ne se produira lorsque nous construirons et exécuterons l'application. Essayez si vous ne me croyez pas.
Ce qui manque, c'est une connexion entre le bouton et l'action du contrôleur de vue. Comment le contrôleur de vue doit-il savoir que le changer de couleur: l'action doit être déclenchée lorsque vous appuyez sur le bouton?
Faire cette connexion est simple. Ouvrez le storyboard en sélectionnant le fichier nommé Tableau principal et sélectionnez le Contrôleur de vue objet dans le Voir la scène du contrôleur.
Avec le Contrôleur de vue objet sélectionné, ouvrez le Inspecteur de connexions dans la barre latérale droite-le premier onglet de la droite. Si vous avez suivi les étapes correctement, vous devriez voir notre nouvelle action dans la section intitulée Actions reçues.
Vous devriez voir un cercle vide à droite de la changer de couleur: action. Cliquez et glissez du cercle au bouton dans notre interface utilisateur.
Un menu apparaîtra lorsque vous relâchez la souris. Le menu contextuel contient une liste de types d'événements tactiles. L'événement tactile qui nous intéresse est nommé Retouche à l'intérieur. Cet événement est déclenché lorsqu'un utilisateur appuie sur le bouton et lève son doigt. C'est le comportement le plus courant de la plupart des boutons.
Après avoir connecté le bouton et l'action, vous devriez voir que la barre latérale droite reflète la connexion que vous venez d'établir. Génial. Vous avez complété avec succès votre première application réelle.
Générez et exécutez votre application dans le simulateur iOS et commencez à appuyer sur l'écran du simulateur. Chaque fois que vous appuyez sur l'écran, sa couleur doit changer pour une nouvelle couleur aléatoire. À quel point cela est cool?
Nous avons couvert beaucoup de terrain dans ce tutoriel. Même si ce poste était assez long, nous n'avons pas vraiment fait grand chose. Si vous connaissez la théorie, vous pouvez créer Colorific en moins de cinq minutes..
Dans les deux prochains articles, je couvrirai les bases du C et de l’Objective-C. Cela vous préparera pour les choses intéressantes dans le reste de la série.
Accentsconagua