Share
Le framework WatchKit d’Apple pour le développement d’applications Apple Watch vous offre, en tant que développeur, plusieurs moyens de présenter différents types d’interfaces aux utilisateurs de votre application. Cela inclut les interfaces modales, hiérarchiques et basées sur la page, qui peuvent toutes utiliser des contextes pour créer un contenu dynamique..
Dans ce tutoriel, je vais vous montrer comment configurer et manipuler chaque type d'interface, ainsi que les cas d'utilisation pour lesquels ils sont conçus..
Ce tutoriel nécessite d’exécuter Xcode 6.2+ et de créer une application de base Apple Watch. Sinon, veuillez lire quelques-uns des autres tutoriels WatchKit sur Tuts +, puis revenez à celui-ci. Vous devrez également télécharger le projet de démarrage depuis GitHub..
Le premier type d'interface que vous allez implémenter dans votre application Apple Watch sera une page. Ces types d'interfaces fonctionnent de manière très similaire à l'écran d'accueil standard sur un périphérique iOS pour afficher plusieurs pages d'informations dans un ordre défini. Les interfaces basées sur des pages conviennent particulièrement bien lorsque vous devez afficher plusieurs écrans d’informations liés les uns aux autres..
Ouvrez le projet de démarrage dans Xcode et accédez à Interface.storyboard. Le storyboard contient déjà six contrôleurs d'interface, comme vous pouvez le voir ci-dessous..
Pour créer une interface basée sur une page, vous devez créer un page suivanterelation entre les contrôleurs d'interface que vous souhaitez lier. appuyez sur la Contrôle bouton de votre clavier et cliquez et faites glisser d’un contrôleur d’interface à un autre. Contrôlez et glissez du premier contrôleur d’interface vers le second et, si cela est fait correctement, Relation Segue pop-up devrait apparaître. Dans ce menu local, choisissez le menu page suivante option comme indiqué ci-dessous.
Suivez les mêmes étapes pour relier le deuxième contrôleur d'interface au troisième. Le storyboard doit maintenant afficher les divisions entre les trois principaux contrôleurs d'interface. Notez que l'ordre dans lequel vous créez ces segments détermine l'ordre dans lequel les interfaces apparaîtront dans votre application WatchKit..
Générez et exécutez votre application, puis ouvrez une Apple Watch en tant qu'écran externe dans le simulateur iOS. Vous verrez que l'application affiche le Première page contrôleur d’interface et a trois points au bas, représentant les trois pages disponibles. Vous pouvez faire défiler les trois pages en faisant glisser votre doigt vers la gauche ou vers la droite, comme vous le feriez sur un appareil iOS..
Lors de l'utilisation d'une interface basée sur une page, vous pouvez spécifier le contrôleur d'interface à afficher lors du lancement. Ceci est fait en utilisant le devenirCurrentPage méthode. Ouvrir SecondPageInterfaceController.swift et ajoutez la ligne suivante au awakeWithContext (_ :) méthode:
remplacer func awakeWithContext (contexte: AnyObject?) super.awakeWithContext (context) self.becomeCurrentPage ()
Générez et exécutez votre application à nouveau, et vous verrez que la deuxième page est maintenant présentée au lancement..
Au moment de l'exécution, vous pouvez également spécifier un ordre explicite dans lequel afficher les pages de votre interface. Ceci est fait en utilisant le reloadRootControllersWithNames (_: contexts :) méthode de classe.
Le premier paramètre de cette méthode est un tableau de chaînes contenant les identificateurs de storyboard des contrôleurs d'interface à charger. L'ordre des identifiants dans ce tableau détermine l'ordre dans lequel les pages apparaissent dans.
Le second paramètre est une option AnyObject type tableau qui contient les contextes pour chacune des pages. Vous en apprendrez plus sur les contextes plus loin dans ce tutoriel. Pour le moment, il vous suffira de laisser ce paramètre néant. Remplacez la ligne que vous venez d’ajouter à votre awakeWithContext (_ :) méthode avec ce qui suit:
remplacer func awakeWithContext (contexte: AnyObject?) super.awakeWithContext (context) WKInterfaceController.reloadRootControllersWithNames (["Troisième page", "Première page"], contextes: nil)
Générez et exécutez votre application, et vous verrez qu'une fois le chargement terminé, votre application affichera la troisième page, suivie de la première page..
Outre les interfaces basées sur les pages, vous pouvez également implémenter des interfaces hiérarchiques dans une application Apple Watch. On parle d’interfaces hiérarchiques lors de la transition entre contrôleurs d’interface utilisant un pousser transition.
Le comportement d’une interface hiérarchique est similaire à celui de la UINavigationController classe dans une application iOS. Ce type d’interface Apple Watch convient parfaitement à la présentation linéaire de plusieurs interfaces, l’une après l’autre..
Revisiter Interface.storyboard et faites glisser le Point d'entrée principal flèche vers le Tla transition contrôleur d'interface comme indiqué ci-dessous. Cela fera apparaître le contrôleur d'interface spécifié en premier lors du lancement de l'application.
Ensuite, ouvrez TransitionInterfaceController.swift et ajoutez la ligne suivante dans le pushButtonPressed méthode:
Accentsconagua
@IBAction func pushButtonPressed () self.pushControllerWithName ("Interface hiérarchique", contexte: nil)Semblable à la reloadRootControllersWithNames (_: contexts :) méthode que vous avez utilisée précédemment, le premier paramètre de pushControllerWithName (_: contexte :) est l'identifiant du storyboard du contrôleur d'interface que vous voulez pousser. Le deuxième paramètre est le contexte de ce nouveau contrôleur d'interface.
Construisez et exécutez votre application. Vous devriez voir l'interface suivante lorsque le lancement de votre application WatchKit est terminé.
En tapotant le Hiérarchique le bouton devrait pousser l'interface suivante sur l'écran comme indiqué ci-dessous.
Vous remarquerez qu'il y a maintenant une petite flèche dans le coin supérieur gauche de l'écran. En appuyant sur la flèche, vous revenez à l'interface précédente. Il est également possible d'insérer le code du contrôleur d'interface actuel. dans le HierarchalInterfaceController classe, mettez à jour le popButtonPressed méthode comme suit:
@IBAction func popButtonPressed () self.popController ()
Générez et exécutez votre application à nouveau. En tapotant le Pop Le bouton devrait maintenant avoir le même effet que d'appuyer sur la flèche de retour en haut à gauche..
Si vous souhaitez revenir à la toute première interface de la hiérarchie, vous appelez le popToRootController méthode plutôt que la popController méthode. Pour votre application actuelle, ces méthodes produiraient le même résultat car il n'y a que deux interfaces dans la hiérarchie pour le moment..
Les interfaces modales fonctionnent de manière similaire aux interfaces hiérarchiques. La principale différence entre les deux réside dans le fait que les interfaces modales sont conçues pour afficher les interfaces les unes sur les autres plutôt que pour effectuer une transition linéaire entre elles..
Retournez à TransitionInterfaceController.swift et ajoutez la ligne de code suivante à la modalButtonPressed méthode:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Interface modale", contexte: nil)Pour ignorer l'interface modale, mettez à jour le rejeterButtonPressed méthode comme suit dans la ContrôleurInterface Modal:
@IBAction func rejetButtonPressed () self.dismissController ()
Construisez et exécutez votre application. Appuyez sur le Modal bouton pour présenter une interface modale.
Un avantage des interfaces modales est que vous pouvez présenter de manière modale une interface basée sur une page. Ceci est fait en utilisant le presentControllersWithNames (_: contexts :) méthode. Le premier paramètre est un tableau d'identifiants de storyboard et le second paramètre est un tableau d'objets de contexte. Dans TransitionInterfaceController.swift, mettre à jour la mise en œuvre du modalButtonPressed méthode comme suit:
@IBAction func modalButtonPressed () self.presentControllerWithNames (["Interface modale", "Interface hiérarchique"], contextes: nil)
Exécutez votre application et appuyez sur le Modal bouton. Une interface basée sur une page doit être présentée sous forme modale avec les deux interfaces suivantes:
Comme vous avez pu le constater parmi les différentes méthodes utilisées jusqu'à présent dans ce tutoriel, lors de la transition vers une nouvelle interface, vous pouvez définir un contexte pour configurer l'interface à présenter. Le contexte que vous transmettez à votre nouvelle interface est optionnel et peut être n’importe quel type de données (AnyObject?).
Cela signifie que vous pouvez transmettre tout type de données entre les interfaces, des simples nombres aux structures de données complexes. Le contexte est transmis à la nouvelle interface dans le awakeWithContext (_ :) méthode. L’avantage de passer un contexte à un contrôleur d’interface est de configurer son contenu de manière dynamique, c’est-à-dire au moment de l’exécution..
Ouvrir TransitionInterfaceController.swift et mettre à jour la mise en œuvre du modalButtonPressed méthode comme suit:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Interface modale", contexte: "Texte personnalisé")Dans ModalInterfaceController.swift, mettre à jour la mise en œuvre du awakeWithContext (_ :) comme suit:
remplacer func awakeWithContext (contexte: AnyObject?) super.awakeWithContext (context) si let text = context as? String button.setTitle (text)
Nous utilisons une liaison facultative pour voir si le contexte fourni peut être converti en Chaîne. Si cela est possible, nous définissons la boutonLe titre de cette valeur.
Générez et exécutez votre application, puis ouvrez l'interface modale. Le titre du bouton aurait dû être changé en Texte personnalisé.
Si vous souhaitez améliorer votre formation WatchKit, vous pouvez consulter notre cours complet sur le développement de WatchKit..
Dans ce didacticiel, vous avez appris à configurer et utiliser les trois principaux types d’interface disponibles pour les applications WatchKit, à base de page, hiérarchique et modal. Vous avez également appris à utiliser des contextes d'interface pour configurer des contrôleurs d'interface lors de l'exécution. Vous savez également à quel moment il est préférable d'utiliser chacun de ces types d'interface dans vos applications WatchKit. Vous pouvez en savoir plus sur la navigation par interface dans la documentation Apple..
