Votre première application WatchKit interface utilisateur

La semaine dernière, Apple a annoncé la date de sortie pour Apple Watch. La société a également publié Xcode 6.2, qui inclut le support pour Apple Watch. Avec Xcode 6.2, vous avez tout ce dont vous avez besoin pour créer votre première application pour Apple Watch.

La date de sortie de l'Apple Watch étant fixée au mois d'avril, il est temps de comprendre les rouages ​​du développement de l'Apple Watch. Dans ce tutoriel, vous allez créer votre première application WatchKit. En chemin, vous vous familiariserez avec le fonctionnement interne d'une application WatchKit et découvrirez qu'il existe de nombreuses similitudes avec le développement iOS..

Conditions préalables

Étant donné que ce tutoriel porte sur le développement Apple Watch, je suppose que vous connaissez déjà les bases du développement iOS. Si vous ne connaissez pas les actions et les points de vente, par exemple, je vous recommande de suivre d'abord notre cours d'introduction au développement iOS..

Pour suivre, vous devez avoir Xcode 6.2 ou supérieur installé sur votre ordinateur de développement. Vous pouvez télécharger Xcode à partir du Centre de développement iOS ou du Mac App Store. Comme je l'ai mentionné précédemment, Xcode 6.2 inclut la prise en charge de Apple Watch. Sans Xcode 6.2, vous ne pourrez pas suivre.

Dans ce tutoriel, j'utiliserai Swift comme langage de programmation. Si vous n'êtes pas familier avec Swift, vous avez deux options. Votre première option est de vous en tenir à Objective-C. Vous pouvez créer des applications Apple Watch avec Swift et Objective-C, ou une combinaison des deux. Votre deuxième option est de vous arrêter ici et de lire ma série sur Swift ou de regarder le cours de Derek Jensen sur le développement de Swift..

1. Introduction

Vous vous demandez peut-être quelle est la différence entre une application Apple Watch et une application WatchKit. L'année dernière, Apple a annoncé qu'il y aurait deux générations d'applications Apple Watch, les applications WatchKit et les applications natives d'Apple Watch. Le terme originaire de est un peu trompeur puisque les applications WatchKit sont aussi des applications natives. La principale différence est l'architecture de l'application. Regardons d'abord les applications natives.

Applications natives

Apple ne nous a pas encore beaucoup parlé des applications natives. La société a seulement annoncé que les applications natives arriveraient sur Apple Watch à l'automne de cette année. On ignore à quoi ressemblera le SDK et ce que les développeurs pourront faire avec une application Apple Watch native. En d’autres termes, nous n’avons pas d’autre choix que de nous concentrer sur les applications WatchKit pour le moment..

Cela dit, sur la base des informations d'Apple, la principale différence sera que les applications natives pourront fonctionner sans extension fonctionnant sur un iPhone couplé. D'un point de vue architectural, l'application native ressemblera aux applications iOS natives sur iPhone et iPad.

Applications WatchKit

Comme son nom l'indique, une application WatchKit s'appuie entièrement sur l'infrastructure WatchKit pour effectuer son travail. Le framework WatchKit est une solution astucieuse qui comble le fossé entre l'Apple Watch et un iPhone apparié.

Bien que l'idée soit simple, la mise en œuvre l'est moins. L'application WatchKit s'exécute sur l'Apple Watch et est responsable de deux choses:

  • présentation de l'interface utilisateur
  • répondre à l'interaction de l'utilisateur

La logique commerciale et les tâches ardues sont gérées par une extension Apple Watch fonctionnant sur un iPhone jumelé. Le diagramme ci-dessous illustre le rôle du framework WatchKit..

Tous les événements déclenchés par l'utilisateur interagissant avec l'application WatchKit sont transférés vers le poste qui s'exécute sur l'iPhone couplé. Cela implique que l'application WatchKit n'est d'aucune utilité sans un iPhone couplé. Il ne peut tout simplement pas faire son travail sans l'extension fonctionnant sur un iPhone.

2. Configuration du projet

Dans cet esprit, il est temps de créer votre première application WatchKit. L'application que nous sommes sur le point de créer montrera à l'utilisateur les conditions météorologiques de divers endroits de la planète. C'est l'équivalent de l'application météo sur iOS.

Étape 1: Créer un projet

Lancez Xcode et sélectionnez Nouveau> Projet… du Fichier menu. Sélectionnez le Application à vue unique modèle de la liste des iOS> Application modèles. Vous vous demandez peut-être pourquoi nous ne créons pas une application WatchKit. Une application WatchKit fait toujours partie d'une application iOS. Cela deviendra plus clair une fois que nous aurons ajouté l'application WatchKit au projet..

Nommez votre application Goutte de pluie, ensemble La langue à Rapide, et Dispositifs à iPhone. Assure-toi Utiliser les données de base est décochée.

Indiquez à Xcode où vous souhaitez enregistrer les fichiers du projet et appuyez sur Créer. Notez que nous avons créé un projet Xcode plain vanilla pour une application iOS à vue unique. Si vous construisez et exécutez le Goutte de pluie cible dans le simulateur iOS, vous verrez une vue blanche. C’est ce que nous attendons d’une application iOS basée sur le Application à vue unique modèle.

Avant de continuer, jetez un coup d’œil à la structure du projet dans Navigateur de projet et la liste des cibles. Nous avons actuellement deux cibles, Goutte de pluie, pour l'application iOS et RainDropTests, pour les tests du Goutte de pluie cible. Ajoutons une application WatchKit au mélange.

Étape 2: Créer des cibles WatchKit

Sélectionner Nouveau> Cible… de Xcode Fichier menu et choisir WatchKit App du iOS> Apple Watch section à gauche.

Pour les besoins de ce tutoriel, décochez Inclure la scène de notification et Inclure Glance Scene. Nous ne couvrirons pas les notifications et les regards dans ce tutoriel. Frappé terminer en bas à droite pour ajouter l'application WatchKit à votre projet Xcode.

Quand vous cliquez terminer, Xcode créera un certain nombre de fichiers, groupes et cibles. Xcode créera également un schéma pour exécuter l’application WatchKit dans le simulateur iOS et vous demandera s’il doit activer ce schéma. Cliquez sur Activer pour l'activer.

3. Anatomie du projet

En ajoutant une application WatchKit à notre projet, Xcode a créé deux cibles pour nous, une pour l'extension WatchKit., RainDrop WatchKit Extension, et un pour l'application WatchKit, App WatchKit RainDrop.

L'extension WatchKit s'exécutera sur l'iPhone associé à l'Apple Watch. Il est en charge de la logique métier de l'application WatchKit. L'application WatchKit s'exécutera sur l'Apple Watch et sera chargée de la présentation de l'interface utilisateur et du traitement des événements..

Pour que tout soit bien rangé, Xcode a créé deux groupes pour nous dans le Navigateur de projet. Le premier groupe, RainDrop WatchKit Extension, contient les fichiers source et les ressources pour l'extension WatchKit. Le deuxième groupe, Goutte de pluie WatchKit App, contient les actifs de l'application WatchKit.

L'architecture sous-jacente d'une application WatchKit est évidente en fonction du contenu de ces groupes. le Goutte de pluie WatchKit App groupe, par exemple, ne contient aucun fichier source. Il comprend uniquement un storyboard et des ressources pour l'interface utilisateur de l'application WatchKit. le Goutte de pluie WatchKit Extension contient un fichier source, InterfaceController.swift, mais cela n'inclut pas de storyboard. Cela a du sens si vous vous souvenez que l'extension est responsable de la logique métier de l'application WatchKit, tandis que l'application WatchKit est responsable de l'interface utilisateur..

Apple utilise le terme application pour plusieurs concepts. Il est important de comprendre qu'une application WatchKit se compose de deux parties: une extension WatchKit s'exécutant sur un iPhone couplé et une application WatchKit s'exécutant sur l'Apple Watch. Une application WatchKit ne peut pas faire son travail sans son extension. C’est essentiel pour comprendre l’architecture d’une application WatchKit.

4. Construire et exécuter

Avant de créer et d'exécuter l'application WatchKit, il est utile de comprendre ce qui va se passer lorsque vous appuyez sur Commande-R. Une fois que Xcode a fini de créer l'application iOS, l'extension WatchKit et l'application WatchKit, il installera l'application iOS, l'extension WatchKit et l'application WatchKit sur le simulateur iOS. Il exécutera ensuite l'extension WatchKit et l'application WatchKit dans le simulateur iOS..

Si vous n'êtes pas familiarisé avec les extensions, vous vous demandez peut-être pourquoi il installe l'application iOS sur le simulateur iOS. Une extension est toujours associée à une application iOS. Elle est donc requise pour que l'extension WatchKit s'exécute. Dans le même ordre d'idées, une application WatchKit ne peut s'exécuter sur une Apple Watch que si son homologue, l'extension WatchKit, s'exécute sur un iPhone couplé à l'Apple Watch. C'est une architecture assez complexe si vous avez l'habitude de développer des applications iOS autonomes.

Lorsque vous appuyez sur Commande-R sur votre clavier ou cliquez sur le bouton Courir bouton en haut à gauche, Xcode construira et exécutera votre application WatchKit dans le simulateur iOS. Si l'application WatchKit n'est pas lancée, vérifiez de nouveau que vous utilisez le bon schéma..

L'exécution de l'application WatchKit n'est pas très spectaculaire car vous ne voyez qu'un écran noir avec l'heure actuelle en haut à droite. Rendons l'interface utilisateur de notre application WatchKit un peu plus intéressante.

5. Créer l'interface utilisateur

Depuis que vous lisez ce tutoriel, je suppose que vous êtes familiarisé avec le développement iOS. Comme vous le savez, le développement iOS moderne implique la mise en page automatique et les storyboards. Ceci n'est que partiellement vrai pour le développement WatchKit. Nous avons déjà découvert qu'une application WatchKit utilise un storyboard pour son interface utilisateur. La mise en page automatique est toutefois absente.

Ouvrir Interface.storyboard dans le App WatchKit RainDrop groupe pour savoir comment créer une interface utilisateur pour notre application WatchKit.

Le storyboard contient une seule scène, la Scène du contrôleur d'interface. dans le Navigateur de scène, à droite de la Navigateur de projet, vous pouvez voir que le Scène du contrôleur d'interface comprend un Contrôleur d'interface et une indication que cette scène est le point d'entrée principal de notre application WatchKit.

Qu'est-ce qu'un contrôleur d'interface??

Les deux questions que vous vous posez probablement sont les suivantes: "Qu'est-ce qu'un contrôleur d'interface?" et "En quoi cela diffère-t-il d'un contrôleur de vue?" Un contrôleur d'interface est une instance du WKInterfaceController classe ou une sous-classe de celle-ci. le WKInterfaceController la classe est définie dans le cadre WatchKit.

Le nom de cette classe fait allusion aux différences avec UIViewController. Comme vous le savez, un contrôleur de vue contrôle une vue ou une hiérarchie de vues. Cependant, un contrôleur d'interface ne contrôle pas une vue, il contrôle plutôt une interface, c'est-à-dire un écran contenant du contenu. Ce que cela signifie deviendra plus clair une fois que nous aurons commencé à mettre en œuvre le contrôleur d'interface.

Un contrôleur d'interface est toujours un véritable contrôleur en ce sens qu'il contrôle le comportement de l'interface utilisateur. Avec un contrôleur d'interface, vous pouvez configurer l'interface utilisateur de votre application WatchKit et répondre aux événements que l'application WatchKit transmet à l'extension WatchKit. Comment cela fonctionne deviendra plus clair plus tard dans ce tutoriel.

Créer une mise en page

Le système de mise en page que WatchKit nous fournit est primitif par rapport à la puissance et à la flexibilité de la mise en page automatique. Le système de mise en page rappelle la manière dont les pages Web sont agencées avec HTML et CSS.

L’un des éléments constitutifs du système d’agencement WatchKit est le WKInterfaceGroup classe. Une instance de cette classe n’est rien de plus qu’un conteneur pouvant contenir d’autres éléments d’interface, tels que des étiquettes, des tableaux, etc. Vous pouvez le comparer à un

élément sur une page Web. Il fournit la structure et détermine la mise en page avec d'autres groupes de la mise en page.

Du Bibliothèque d'objets à droite, ajoutez deux groupes au contrôleur d'interface, comme indiqué ci-dessous.

Avez-vous remarqué que les groupes se mettent automatiquement en place? Le système de présentation se comporte très différemment de la présentation automatique. Un autre détail important est que le conteneur du contrôleur d'interface est également un groupe et non une vue. Cela signifie que vous avez ajouté les groupes à un autre groupe. Cela convient car les groupes peuvent être imbriqués, ce qui permet aux développeurs de créer des présentations assez complexes pour leurs applications WatchKit..

Ajout d'éléments d'interface

Ajouter une étiquette à partir du Bibliothèque d'objets au groupe du haut et voir ce qui se passe. La taille du groupe diminue pour correspondre à la taille de l'étiquette. Le contour d'un groupe vide n'est rien d'autre qu'un espace réservé. Un groupe ajustera toujours sa taille à celle de son contenu.

Sélectionnez l'étiquette et ouvrez le Inspecteur d'identité sur la droite. Notez que l'étiquette que vous avez ajoutée est de type WKInterfaceLabel, ne pas UILabel. Même si les applications WatchKit peuvent avoir de nombreux éléments d'interface utilisateur similaires à ceux des applications iOS, ils sont différents. le WKInterfaceLabel la classe, par exemple, hérite de WKInterfaceObject au lieu de UIView et UIResponder.

Avec l'étiquette sélectionnée, ouvrez le Inspecteur d'attributs sur la droite. Sous Taille, régler la largeur sur Relatif au conteneur pour le rendre aussi large que l'écran de l'Apple Watch. Changer la police en Gros titre pour le faire ressortir un peu plus et changer le texte de l'étiquette à Cupertino. Notez que vous ne pouvez pas changer la famille de polices ni ajuster manuellement la taille de la police..

Puisque notre application WatchKit affichera les conditions météorologiques de divers endroits de la planète, nous devons également ajouter une étiquette indiquant la température. Il serait également utile de connaître la date et l'heure locales du lieu..

Ajoutez une deuxième étiquette au groupe du haut en faisant glisser une étiquette dans le Navigateur de scène. Attendre. Ce n'est pas juste. Vous avez ajouté une étiquette au bon groupe, mais elle ne s'affiche pas dans l'interface..

Par défaut, un groupe a un horizontal disposition. Vous pouvez le vérifier en ouvrant le Inspecteur d'attributs et inspectant ses Disposition propriété. Cela signifie que les éléments d'interface qu'il contient sont disposés horizontalement. L'étiquette de température est présente dans le groupe, mais elle n'est pas visible pour le moment. Changer le groupe Disposition propriété à Verticale pour résoudre le problème.

Ajouter un Rendez-vous amoureux élément d'interface au deuxième groupe. Les éléments d’interface de date sont des exemples de WKInterfaceDate classe. Cet élément d'interface contient une étiquette et convient parfaitement à l'affichage et au formatage des dates. Commencez par modifier la largeur de l'élément en Relatif au conteneur et l'alignement du texte de l'étiquette à droite alignée.

Il n'y a pas besoin d'utiliser le NSDateFormatter classe pour formater les dates. le WKInterfaceDate la classe gère le formatage de la date pour nous. Changer la Format du WKInterfaceDate exemple pour Douane et définissez le format sur M / d, h: mm a. L'interface utilisateur devrait maintenant ressembler à ceci.

Construisez et exécutez l'application WatchKit dans le simulateur iOS pour voir ce que nous avons jusqu'à présent. L'application n'est pas très utile pour le moment puisque nous travaillons avec du contenu statique. Nous allons résoudre ce problème dans le prochain tutoriel.

Conclusion

Nous avons couvert les bases du développement d'applications WatchKit dans ce tutoriel. Je suis sûr que vous conviendrez que le développement d'applications WatchKit est à la fois familier et étranger. Nous pouvons utiliser les outils auxquels nous sommes habitués, mais il existe un certain nombre de différences clés avec lesquelles il faudra du temps pour se familiariser. Dans la deuxième partie de ce didacticiel, nous nous concentrerons sur l’extension WatchKit pour récupérer les données météorologiques et les afficher dans l’application WatchKit..