Guide du débutant pour le développement iOS L'interface - Partie I
Apple est un secteur leader dans le monde mobile depuis des années avec ses séries iPhone et iPad. Malgré le battage publicitaire qu’elle peut créer avec toutes les versions officielles, il détient également une part importante des parts de marché de la plate-forme mobile. C’est probablement la raison pour laquelle la plupart des clients voudront que leur application existe dans la boutique en ligne d’Apple; devenant ainsi la raison pour les développeurs d'apprendre et de construire l'application iPhone.
La bonne nouvelle est que le développement d'applications pour iPhone n'est pas aussi difficile que vous ne le pensez et cet article est un guide complet pour vous guider tout au long du processus de création d'une application pour iPhone..
Nous discuterons des raisons, des phases et des outils pour développer l'application, et vous suivrez un didacticiel simple pour concevoir l'application iPhone de base à l'aide du Xcode..
Alors, que vous appreniez pour les affaires ou que vous ayez une idée d'application étonnante qui pourrait vous faire millionnaire, commençons à créer votre première application pour iPhone!
Remarque: vous aurez besoin d'un ordinateur doté du système d'exploitation Macintosh (Mac OS) pour l'installation de Xcode, le développement d'applications et la soumission d'applications. Il est impossible de le faire sous Windows de manière légale..
Pourquoi développer pour Apple?
Je vois cette question fréquemment posée, donc je veux expliquer pourquoi vous devriez vous intéresser au développement d'un iPhone. Comme je l’ai dit dans l’introduction, iPhone actuellement détient une grande partie des parts de marché de la plate-forme mobile.
Je pense que cette raison devrait suffire à vous apprendre à développer l'application iPhone, que vous développiez pour vous-même ou pour vos clients, la plupart des gens espèrent probablement que de nombreuses personnes dans le monde pourront accéder à leur application..
Du point de vue du développement, Apple aime les choses simples, et cela s'applique à leurs produits et leurs cadres. iOS est le système d'exploitation qui alimente tous les appareils mobiles d'Apple.. Ceux-ci incluent iPod Touch, iPhone et iPad. Alors gardez à l'esprit que lorsque vous développez des applications pour iPhone, vous pourriez être développer pour tous les autres appareils avec l'iOS!
De plus, ce qui rend la fonctionnalité ci-dessus encore meilleure, c'est combien le travail de codage peut être enregistré. Lorsque vous écrivez du code pour une application iPhone, vous êtes en utilisant le même langage de programmation pour tous les appareils informatiques d'Apple. Cela signifie que lorsque vous développez l'application iPhone, celle-ci peut ensuite être intégrée à iPad et même à Mac..
Objectif c est le langage de programmation de base alimentant tous leurs cadres. Parallèlement à Objective-C, vous développerez également une application iPhone avec le Cacao Touch, le cadre de programmation menant l'interaction utilisateur sur iOS.
Ceci est juste un peu d'informations pour vous aider à démarrer sur le développement d'applications iPhone. Le développement est un processus assez compliqué mais détendez-vous, prenez-le lentement. Donc, les raisons sont ici, et la décision est à vous. Que la réponse soit oui ou non, vous pouvez toujours passer directement au sujet suivant: concevoir des applications pour iPhone.
Planification de la structure de votre application iPhone
Dans l'idéologie standard de la création d'une application iPhone, vous voudrez passer par quelques phases. La première phase comprend planification et croquis.
Tout d’abord, vous devez avoir une idée pour ce que votre application va faire. Pourquoi les gens voudraient-ils le télécharger?? Et quelles fonctionnalités voulez-vous inclure? C’est la phase la plus importante car si vous le faites correctement, vous économiser beaucoup de confusion et de problèmes en phase de codage.
Pire, ça vous ramène à la table à dessin.
Je recommande à esquisser quelques idées approximatives pour quelques pages (ou vues) de votre application. Il vous suffit de dessiner une forme de rectangle, peut-être 5 ou 6 formes sur une feuille de papier, puis de dessiner les fonctionnalités souhaitées sur chaque vue de votre application..
Vous pouvez penser à des vues comme différentes pages d'un site Web. Chaque vue proposera différentes fonctionnalités telles qu'un formulaire de connexion, une liste de contacts ou un tableau de données..
Ci-dessous, j'ai construit une brève collection des différents éléments de la barre d’interface utilisateur:
- Barre d'état - Affiche le niveau de batterie actuel de l'appareil, la connexion 3G, les barres de réception, le support de téléphone et beaucoup plus. Il est recommandé de toujours inclure ces éléments.
- Barre de navigation - Donne à vos utilisateurs la possibilité de naviguer entre les hiérarchies de pages. Cela inclut souvent un bouton sur le côté gauche de la barre pour permettre à l'utilisateur de revenir à la vue d'application précédente..
- Barre d'outils - Apparaît au bas de l'application iPhone. Cela tiendra quelques icônes liées à certaines fonctions telles que Partager, Télécharger, Effacer, etc.
- Barre d'onglets - Très similaire à la barre d'outils, sauf que maintenant vous travaillez avec des onglets. Lorsqu'un utilisateur clique sur une icône d'onglet, elle est automatiquement mise en surbrillance et affiche un survol brillant. Cette barre est utilisée pour basculer entre les vues au lieu d'offrir une fonctionnalité directe.
Cette liste ne contient que les barres d'outils que vous pouvez trouver dans la plupart des applications. Il existe d'autres vues et styles à considérer, que vous pouvez trouver dans les consignes d'utilisation des éléments de l'interface utilisateur iOS d'Apple. Je recommande fortement de consulter cette documentation lorsque vous avez des doutes sur les éléments de l'interface utilisateur de l'iPhone..
Pour gagner du temps, je ne décrirai pas tous les éléments de l'interface utilisateur. Il y a trop d'éléments à prendre en compte, et vous ne finirez pas par les utiliser tous dans votre seule application. Mais en esquissant vos points de vue, vous pouvez s'inspirer des directives suggérées ci-dessus et d'autres applications pour iPhone vous avez aimé les utiliser.
Conception de maquettes Photoshop
Je suppose que la plupart d'entre vous sont assez à l'aise avec Adobe Photoshop. C’est le premier logiciel de création d’images pour sites Web, bannières, logos et maquettes pour mobiles. Concevoir des graphiques pour le Web est un processus assez simple, mais il est un peu plus compliqué lorsqu'il s'agit de concevoir une application pour iPhone..
Si vous cherchez à créer une application, vous devriez vraiment créer des maquettes parfaites dès le début.
Pour commencer, nous devrions discuter des paramètres de Photoshop. Puisque nous concevons pour iPhone, nous devons envisager 2 styles de conception différents. le l'affichage normal de l'iPhone est de 320 x 480 pixels. Cependant, l'iPhone 4 comprend un affichage rétine qui double le nombre de pixels dans la même taille d'écran. Donc tu devrais doubler la résolution à 640 x 960 pixels et concevez vos mises en page selon cette norme.
Cela signifie que vous devrez également créer 2 jeux d'icônes pour vos maquettes. À l'origine, les icônes seraient mis à 163ppi mais vous aurez besoin de inclure des icônes avec 326ppi pour iPhone 4. Les icônes sont traditionnellement marquées avec @ 2x à la fin du nom de leur fichier, tel que “[email protected]“.
Optimisons maintenant nos nouveaux paramètres de document. Nous devons d’abord modifier certaines préférences. Par conséquent, accédez à Photoshop> Edition> Préférences> Guides, grille et tranches. Bien être régler notre grille toutes les 20px avec des subdivisions à 2. Lors de la conception pour l'affichage de la rétine La ligne 2px affichera 1 point sur l'écran. C’est une règle importante que vous devez garder à l’esprit pour réduire votre application..
J'ai tendance à trouver plus facile de construire mes créations avec une résolution plus élevée que de les réduire, mais vous pouvez essayez les deux méthodes et voyez ce qui vous convient le mieux. Nous utilisons 640 x 960 pixels à 326ppi - enregistrez-le en tant que préréglage personnalisé si vous pensez l'utiliser fréquemment..
Construire avec des éléments de gabarit
Maintenant, vous pouvez utiliser Photoshop pour créer vous-même une mise en page parfaite au pixel près, mais cela s'avère être un travail très épuisant et fastidieux..
C'est un fichier énorme avec trop d'éléments. Pour faciliter les choses, vous pouvez appuyer sur v activer la Outil de déplacement et cliquez sur le “Sélection automatique” sur sa barre d'options, puis sélectionnez le “Couche” plutôt que “Groupe”. Avec les paramètres, vous pouvez cliquer sur n'importe quel élément et Photoshop vous amènera au calque correspondant.!
N'hésitez pas à jouer avec la maquette, ou vous pouvez même créer le prototype de votre application à partir de la maquette. En fonction de votre application, vous pouvez inclure une multitude de fonctionnalités dans la zone principale, dont vous pourrez trouver la plupart dans ce fichier PSD. Il est également possible d'accéder aux calques de ces éléments et de modifier les polices, les couleurs de dégradé et d'autres styles de conception. Juste assurez-vous de ne rien redimensionner puisque toutes les barres et tous les éléments de l'interface utilisateur sont définis sur les tailles standard par défaut.
Développement d'applications dans Xcode
L'outil de développement pour la programmation iOS et Mac OS X est nommé Xcode. Si vous utilisez OS X Lion, vous pouvez trouver gratuitement Xcode et tous les packages applicables dans le répertoire. Mac App Store.
Une fois l’installation terminée, lancez Xcode et son écran d’accueil devrait apparaître. À partir de là, vous pouvez charger un projet plus ancien ou choisir d’en créer un nouveau. Pour l'instant, vous devez cliquer sur “Créer un nouveau projet Xcode“, alors la fenêtre de modèle proposera quelques options. Sous iOS> Application, cliquez sur “Application à vue unique” et frapper “Suivant”. Vous pouvez donnez un nom à la nouvelle application, tel que Tester (de préférence pas d'espaces), puis sur le Identifiant de l'entreprise, tapez n'importe quel mot tel que mon entreprise, et enfin choisissez un répertoire et appuyez sur “sauvegarder”.
Xcode construira le répertoire de fichiers et vous enverra dans une nouvelle fenêtre pour travailler. Vous devriez voir beaucoup d’options de fichiers listées, mais le dossier qui porte le nom de votre application est l'objectif principal.
Avec Xcode, vous avez deux options pour concevoir des éléments frontaux. Le classique xib / nib Le format est standard pour les applications Mac OS X et iOS, ce qui vous oblige à concevoir chaque fois une nouvelle page. Cependant, au fur et à mesure que vous créez plusieurs vues dans une seule application, la quantité de fichiers nib peut devenir beaucoup trop lourde, de sorte qu'une nouvelle story-board Le fichier contient toutes vos vues nib dans un seul volet de l'éditeur. À partir de là, vous pouvez supprimer et ajouter facilement des éléments et des fonctionnalités de l'interface utilisateur..
De plus, vous rencontrerez .h et .m fichiers dans le même groupe de dossiers. Ce sont des noms de fichiers courts pour entête et la mise en oeuvre code. Ces fichiers sont où vous écrivez toutes les fonctions et variables Objective-C nécessaires à l’exécution de votre application. C'est peut-être une bonne idée d'expliquer comment Xcode fonctionne avec MVC (modèle, vue, contrôleur), c'est la raison pour laquelle nous avons besoin de 2 fichiers pour chaque contrôleur.
Hiérarchie de programmation MVC
Pour comprendre le fonctionnement de l'application, vous devez comprendre son architecture de programmation. Avec Modèle, vue, contrôleur (MVC) comme base, Xcode peut séparer tous vos affichages et le code d'interface de vos fonctions de logique et de traitement, et il n'y a pas vraiment d'autre option à choisir. MVC peut sembler déroutant au début, mais si vous essayez de le comprendre et de commencer à créer quelques applications de base, vous allez adorer la structure..
Pour faciliter la compréhension, j'ai présenté chaque objet de la liste ci-dessous:
- Modèle - Contient toute votre logique et vos données de base. Cela inclut les variables, les connexions aux flux RSS externes ou aux images, les fonctions détaillées et le traitement des chiffres. Cette couche est complètement séparée de vos vues afin que vous puissiez facilement changer de vue tout en conservant les mêmes données..
- Vue - Un écran ou un style d'affichage dans votre application. Une liste de tables, une page de profil, une page de résumé d’article, un lecteur audio, un lecteur vidéo, ce sont tous des exemples de vues. Vous pouvez modifier leurs styles et supprimer des éléments, mais vous travaillerez toujours avec les mêmes données dans votre modèle..
- Manette - Agit comme un intermédiaire entre les deux autres. Vous connectez des objets dans votre vue à un ViewController qui transmet les informations vers et à partir de votre modèle. Ainsi, de cette manière, il est possible d’inviter un utilisateur à appuyer sur un bouton et à l’enregistrer dans votre modèle. Puis exécutez une fonction de déconnexion et transmettez un message par le même contrôleur “déconnecté avec succès!”.
Donc, fondamentalement, votre le modèle contient toutes les informations et fonctions que vous aurez besoin d'afficher quelque part à l'écran. Mais les modèles ne peuvent pas interagir avec l'écran, seules les vues peuvent. Les vues sont principalement des visuels et ne peuvent extraire des données que via un ViewController.. le Le contrôleur est en fait un moyen beaucoup plus raffiné de masquer vos données back-end de la conception front-end. De cette façon, vous pouvez rénover le design plusieurs fois sans perdre aucune fonctionnalité..
Avec cette connaissance, il ne devrait pas être difficile de commencer à créer vos premières applications. Comme mentionné précédemment, Objectif c est le langage de programmation de base que vous utiliserez pour développer l'application. Il est construit sur le langage C avec une syntaxe mise à jour et quelques paradigmes supplémentaires. Vous aurez besoin de beaucoup de temps pour vous familiariser avec la langue, mais pour la leçon de débutant, je vous recommande la série de tutoriels de Mobiletuts.+.
Vue de conception avec storyboards
Maintenant que nous avons examiné les aspects techniques d’une application, nous devrions consacrer un peu de temps à la conception de l’interface. Je suppose que vous avez gardé le “Storyboard” option coché lors de la création du projet, ce qui signifie que vous pouvez trouver un seul MainStoryboard_iPhone.storyboard fichier quelque part dans le groupe de dossiers situé sur le côté gauche de la fenêtre. Cliquez sur le fichier pour le sélectionner et ouvrir la vue.
Une nouvelle barre latérale devrait apparaître directement à la droite du groupe de dossiers. Ceci est appelé le Sommaire du document et c'est une sorte de méthode de prévisualisation rapide pour vérifier toutes les vues disponibles dans ce storyboard.
Nous voulons commencer par n’ajouter que quelques éléments de page dans notre contrôleur de vue. Nous avons besoin de deux éléments différents: un Barre de navigation et un Barre d'onglets. Avant de les attraper, accéder à la Inspecteur d'attributs (Affichage> Utilitaires> Afficher l’Inspecteur des attributs) sur le côté droit de la fenêtre, puis recherchez Barre d'état étiquette. Par défaut, il est réglé sur Inféré qui utilise la couleur d'état standard de l'iPhone, mais vous pouvez également choisir Noir ou Noir translucide si la conception de votre application correspond mieux à la couleur.
La bibliothèque d'objets
Si la Utilitaires Le volet situé à droite de la fenêtre n’est pas visible, vous pouvez l’activer en accédant à Affichage> Utilitaires> Afficher les utilitaires. Dans la sous-fenêtre Utilitaires, regardez en bas un panneau appelé Bibliothèque d'objets. Il a un menu déroulant avec le “Objets” comme premier élément de la liste. Si vous ne le trouvez pas, vous pouvez sélectionner Affichage> Utilitaires> Afficher la bibliothèque d'objets..
Dans le menu déroulant de la bibliothèque d'objets, recherchez et sélectionnez Fenêtres & Bars. Maintenant, cliquez sur le Barre de navigation, faites-le glisser dans la fenêtre et positionnez-le directement sous le noir Barre d'état (avec une icône de batterie). Nous pouvons personnaliser la description du titre de la barre maintenant. Double-cliquez sur le texte qui se lit actuellement “Titre“, et vous verrez une étiquette nommée “Titre” dans le volet Utilitaires, vous pouvez modifier la description du titre en “Tester” De là. Frappé “Entrer” être témoin du changement.
De nouveau dans le panneau Windows & Bars, faites défiler pour trouver le Barre d'onglets, puis faites-le glisser dans la fenêtre d'affichage et placez-le tout en bas de votre application. Par défaut, ces 2 éléments sont fantastiques.
Maintenant, vous voulez peut-être que le dégradé de la barre de navigation corresponde à la barre d’onglet en bas. Pour ce faire, vous pouvez cliquer sur la barre de navigation et regarder à droite. Les attributs panneau dans le volet Utilitaires. La toute première option s'appelle Style, qui est défini sur Default. Changer le style par défaut en Noir opaque et nous aurons un jeu de couleurs correspondant!
Ajoutons également un autre bouton d'onglet dans la barre inférieure de l'application. Déplacez le curseur de votre souris sur le panneau Windows & Bars à nouveau et faites défiler jusqu'à Elément de barre d'onglets, directement sous la barre d'onglets. Faites-le glisser dans la fenêtre de votre application et placez-le au milieu des 2 boutons de la barre d'onglets existants. Si vous double-cliquez sur ce nouveau bouton, vous pouvez voir des options supplémentaires dans le volet Utilitaires, vous modifiez l'élément. image et Titre De là. Par exemple, j'ai changé le titre en “Signet” pour le nouvel élément Tab Bar.
Il s’agit donc d’un bref tutoriel sur la conception de vues dans Xcode. Ce n'est pas un processus très difficile, mais il faudra un peu plus de temps pour s'habituer à l'interface. Jouez avec quelques éléments de plus si vous vous sentez à l'aise. Vous pouvez également vous rendre dans les ressources de développement iOS d'Apple pour obtenir davantage de ressources d'apprentissage. Ce n'est jamais une mauvaise chose d'en découvrir davantage.!
Restez à l'écoute pour la deuxième partie
Ceci conclut notre première partie du guide sur la conception et le développement d'applications pour iPhone. Dans la partie suivante, nous allons approfondir un peu les technologies Objective-C et Cocoa Touch, et vous apprendrez finalement à créer une application iPhone fonctionnelle, restez à l'écoute.!
Galerie de conception iOS
Pour les concepteurs, j'espère également pouvoir vous inspirer. J'ai donc inclus ci-dessous une liste des superbes applications pour iPhone. La liste contient une grande variété d'éléments d'application inspirants que vous n'avez probablement jamais remarqués auparavant. Ne hésitez pas à partager vos idées, points de vue de l'application ou des questions dans la section commentaire ci-dessous, merci!
Diviseur de course
Satisfaction à distance
Tweetbot pour iPhone
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Ténèbres
