Ihre erste WatchKit-Anwendung Benutzeroberfläche

Letzte Woche gab Apple das Veröffentlichungsdatum für Apple Watch bekannt. Das Unternehmen brachte auch Xcode 6.2 heraus, das die Apple Watch unterstützt. Mit Xcode 6.2 haben Sie alles, was Sie zum Erstellen Ihrer ersten Anwendung für die Apple Watch benötigen.

Mit dem Apple-Release-Datum für April ist es Zeit, die Grundlagen der Apple Watch-Entwicklung kennenzulernen. In diesem Lernprogramm erstellen Sie Ihre erste WatchKit-Anwendung. Dabei werden Sie mit dem Innenleben einer WatchKit-Anwendung vertraut und erfahren, dass es viele Ähnlichkeiten mit der iOS-Entwicklung gibt.

Voraussetzungen

Da sich dieses Tutorial auf die Entwicklung von Apple Watch konzentriert, gehe ich davon aus, dass Sie bereits mit den Grundlagen der iOS-Entwicklung vertraut sind. Wenn Sie beispielsweise nicht wissen, welche Aktionen und Verkaufsstellen es gibt, empfehle ich Ihnen, zuerst unseren Einführungskurs zur iOS-Entwicklung zu besuchen.

Um zu folgen, müssen Sie Xcode 6.2 oder höher auf Ihrem Entwicklungscomputer installiert haben. Sie können Xcode vom iOS Dev Center oder vom Mac App Store herunterladen. Wie bereits erwähnt, unterstützt Xcode 6.2 die Apple Watch. Ohne Xcode 6.2 können Sie nicht mitverfolgen.

In diesem Tutorial verwende ich Swift als Programmiersprache. Wenn Sie mit Swift nicht vertraut sind, haben Sie zwei Möglichkeiten. Ihre erste Möglichkeit ist, bei Objective-C zu bleiben. Sie können Apple Watch-Anwendungen sowohl mit Swift als auch mit Objective-C oder einer Kombination aus beiden erstellen. Die zweite Möglichkeit ist, hier anzuhalten und meine Serie über Swift zu lesen oder Derek Jensens Kurs über die Entwicklung von Swift zu sehen.

1. Einleitung

Sie fragen sich vielleicht, was der Unterschied zwischen einer Apple Watch-Anwendung und einer WatchKit-Anwendung ist. Im vergangenen Jahr gab Apple bekannt, dass es zwei Generationen von Apple Watch-Anwendungen geben wird, WatchKit-Anwendungen und native Apple Watch-Anwendungen. Der Begriff gebürtig ist etwas irreführend, da WatchKit-Anwendungen auch native Anwendungen sind. Der Hauptunterschied ist die Anwendungsarchitektur. Schauen wir uns zuerst die nativen Anwendungen an.

Native Anwendungen

Apple hat uns noch nicht viel über native Anwendungen erzählt. Das Unternehmen gab nur bekannt, dass native Anwendungen im Herbst dieses Jahres auf der Apple Watch ankommen werden. Es ist nicht klar, wie das SDK aussehen wird und was Entwickler mit einer nativen Apple Watch-Anwendung tun können. Mit anderen Worten, wir haben keine andere Wahl, als uns vorerst auf WatchKit-Anwendungen zu konzentrieren.

Laut den Angaben von Apple wird der Hauptunterschied jedoch darin bestehen, dass native Anwendungen ohne Erweiterung auf einem gekoppelten iPhone ausgeführt werden können. Aus architektonischer Sicht ähneln native Anwendungen native iOS-Anwendungen auf iPhone und iPad.

WatchKit-Anwendungen

Wie der Name schon sagt, ist eine WatchKit-Anwendung für ihre Arbeit vollständig auf das WatchKit-Framework angewiesen. Das WatchKit-Framework ist eine clevere Lösung, die die Lücke zwischen der Apple Watch und einem gepaarten iPhone schließt.

Die Idee ist zwar einfach, die Umsetzung jedoch weniger. Die Anwendung WatchKit läuft auf der Apple Watch und ist für zwei Dinge zuständig:

  • Darstellung der Benutzeroberfläche
  • auf Benutzerinteraktion reagieren

Für die Geschäftslogik und das schwere Heben sorgt eine Apple Watch-Erweiterung, die auf einem gepaarten iPhone ausgeführt wird. Das folgende Diagramm veranschaulicht die Rolle des WatchKit-Frameworks.

Alle Ereignisse, die durch die Interaktion des Benutzers mit der WatchKit-Anwendung ausgelöst werden, werden an die Erweiterung weitergeleitet, die auf dem gekoppelten iPhone ausgeführt wird. Dies bedeutet, dass die WatchKit-Anwendung ohne ein gekoppeltes iPhone nicht von Nutzen ist. Ohne die Erweiterung auf einem iPhone kann es einfach nicht funktionieren.

2. Projekteinrichtung

Vor diesem Hintergrund ist es Zeit, Ihre erste WatchKit-Anwendung zu erstellen. Die Anwendung, die wir gerade erstellen, zeigt dem Benutzer die Wetterbedingungen an verschiedenen Orten der Erde. Es ist das Äquivalent der Wetteranwendung auf iOS.

Schritt 1: Projekt erstellen

Starten Sie Xcode und wählen Sie Neu> Projekt… von dem Datei Speisekarte. Wähle aus Einzelansicht-Anwendung Vorlage aus der Liste von iOS> Anwendung Vorlagen. Sie fragen sich vielleicht, warum wir keine WatchKit-Anwendung erstellen. Eine WatchKit-Anwendung ist immer Teil einer iOS-Anwendung. Dies wird klarer, sobald wir die WatchKit-Anwendung zum Projekt hinzugefügt haben.

Benennen Sie Ihre Bewerbung Regentropfen, einstellen Sprache zu Schnell, und Geräte zu iPhone. Stelle sicher Verwenden Sie Kerndaten ist nicht geprüft.

Teilen Sie Xcode mit, wo Sie die Projektdateien speichern möchten, und klicken Sie auf Erstellen. Beachten Sie, dass wir ein einfaches Vanilla-Xcode-Projekt für eine Einzelansicht-iOS-Anwendung erstellt haben. Wenn Sie das erstellen und ausführen Regentropfen Als Ziel im iOS-Simulator sehen Sie eine weiße Ansicht. Das erwarten wir von einer iOS-Anwendung, die auf der basiert Einzelansicht-Anwendung Vorlage.

Bevor wir fortfahren, werfen Sie einen Blick auf die Projektstruktur im Projektnavigator und die Liste der Ziele. Wir haben derzeit zwei Ziele, Regentropfen, für die iOS-Anwendung und RainDropTests, für die Tests der Regentropfen Ziel. Fügen wir dem Mix eine WatchKit-Anwendung hinzu.

Schritt 2: Erstellen Sie WatchKit-Ziele

Wählen Neu> Ziel… von Xcode's Datei Menü und wählen Sie WatchKit App von dem iOS> Apple Watch Abschnitt links.

Deaktivieren Sie das Kontrollkästchen für dieses Tutorial Benachrichtigungsszene einschließen und Fügen Sie einen Blick Szene hinzu. In diesem Tutorial werden Benachrichtigungen und Einblicke nicht behandelt. Schlagen Fertig rechts unten, um die WatchKit-Anwendung zu Ihrem Xcode-Projekt hinzuzufügen.

Wenn Sie auf klicken Fertig, Xcode erstellt eine Reihe von Dateien, Gruppen und Zielen. Xcode erstellt außerdem ein Schema zum Ausführen der WatchKit-Anwendung im iOS-Simulator und fragt Sie, ob das Programm aktiviert werden soll. Klicken aktivieren Sie um es zu aktivieren.

3. Projektanatomie

Durch das Hinzufügen einer WatchKit-Anwendung zu unserem Projekt hat Xcode zwei Ziele für uns erstellt, eines für die WatchKit-Erweiterung, RainDrop WatchKit-Erweiterung, und eine für die WatchKit-Anwendung, RainDrop WatchKit App.

Die WatchKit-Erweiterung wird auf dem iPhone ausgeführt, das mit der Apple Watch gekoppelt ist. Es ist für die Geschäftslogik der WatchKit-Anwendung verantwortlich. Die Anwendung WatchKit wird auf der Apple Watch ausgeführt und ist für die Darstellung der Benutzeroberfläche und die Behandlung von Ereignissen verantwortlich.

Um alles ordentlich zu halten, hat Xcode zwei Gruppen für uns erstellt Projektnavigator. Die erste Gruppe, RainDrop WatchKit-Erweiterung, enthält die Quelldateien und Assets für die Erweiterung WatchKit. Die zweite Gruppe, Regentropfen WatchKit App, enthält die Assets für die WatchKit-Anwendung.

Die zugrunde liegende Architektur einer WatchKit-Anwendung ist anhand des Inhalts dieser Gruppen offensichtlich. Das Regentropfen WatchKit App Gruppe enthält beispielsweise keine Quelldateien. Es enthält nur ein Storyboard und Elemente für die Benutzeroberfläche der WatchKit-Anwendung. Das Regentropfen WatchKit-Erweiterung enthält eine Quelldatei, InterfaceController.swift, aber es enthält kein Storyboard. Dies ist sinnvoll, wenn Sie daran denken, dass die Erweiterung für die Geschäftslogik der WatchKit-Anwendung zuständig ist, während die WatchKit-Anwendung für die Benutzeroberfläche verantwortlich ist.

Apple verwendet den Begriff Anwendung für verschiedene Konzepte. Es ist wichtig, dass Sie verstehen, dass eine WatchKit-Anwendung aus zwei Teilen besteht, einer WatchKit-Erweiterung, die auf einem gekoppelten iPhone ausgeführt wird, und einer WatchKit-Anwendung, die auf der Apple Watch ausgeführt wird. Eine WatchKit-Anwendung kann ohne ihre Erweiterung nicht funktionieren. Dies ist der Schlüssel zum Verständnis der Architektur einer WatchKit-Anwendung.

4. Erstellen und ausführen

Bevor wir die WatchKit-Anwendung erstellen und ausführen, ist es hilfreich zu wissen, was passiert, wenn Sie treffen Befehl-R. Wenn Xcode die iOS-Anwendung, die WatchKit-Erweiterung und die WatchKit-Anwendung erstellt hat, werden die iOS-Anwendung, die WatchKit-Erweiterung und die WatchKit-Anwendung auf dem iOS-Simulator installiert. Anschließend wird die WatchKit-Erweiterung und die WatchKit-Anwendung im iOS-Simulator ausgeführt.

Wenn Sie mit Erweiterungen nicht vertraut sind, fragen Sie sich möglicherweise, warum die iOS-Anwendung auf dem iOS-Simulator installiert wird. Eine Erweiterung ist immer einer iOS-Anwendung zugeordnet, daher ist die iOS-Anwendung erforderlich, damit die WatchKit-Erweiterung ausgeführt werden kann. In ähnlicher Weise kann eine WatchKit-Anwendung nur auf einer Apple Watch ausgeführt werden, wenn ihr Pendant, die WatchKit-Erweiterung, auf einem mit der Apple Watch gepaarten iPhone ausgeführt wird. Diese Architektur ist ziemlich komplex, wenn Sie es gewohnt sind, eigenständige iOS-Anwendungen zu entwickeln.

Wenn Sie drücken Befehl-R auf Ihrer Tastatur oder klicken Sie auf die Lauf Wenn Sie auf die Schaltfläche oben links klicken, wird Xcode Ihre WatchKit-Anwendung im iOS-Simulator erstellen und ausführen. Wenn die Anwendung WatchKit nicht gestartet wird, überprüfen Sie erneut, ob Sie das richtige Schema verwenden.

Das Ausführen der WatchKit-Anwendung ist nicht besonders spektakulär, da oben rechts nur ein schwarzer Bildschirm mit der aktuellen Uhrzeit angezeigt wird. Lassen Sie uns die Benutzeroberfläche unserer WatchKit-Anwendung etwas interessanter machen.

5. Erstellen Sie die Benutzeroberfläche

Da Sie dieses Tutorial lesen, gehe ich davon aus, dass Sie mit der Entwicklung von iOS vertraut sind. Wie Sie wissen, umfasst die moderne iOS-Entwicklung Auto Layout und Storyboards. Dies gilt nur teilweise für die WatchKit-Entwicklung. Wir haben bereits festgestellt, dass eine WatchKit-Anwendung ein Storyboard für ihre Benutzeroberfläche verwendet. Auto Layout fehlt jedoch.

Öffnen Interface.storyboard in dem RainDrop WatchKit App erfahren Sie, wie Sie eine Benutzeroberfläche für unsere WatchKit-Anwendung erstellen.

Das Storyboard enthält eine einzige Szene, die Interface Controller-Szene. In dem Scene Navigator, auf der rechten Seite des Projektnavigator, Sie können das sehen Interface Controller-Szene enthält ein Schnittstellen-Controller und ein Hinweis darauf, dass diese Szene der Haupteinstiegspunkt unserer WatchKit-Anwendung ist.

Was ist ein Schnittstellencontroller??

Die zwei Fragen, die Sie sich wahrscheinlich stellen, lauten: "Was ist ein Schnittstellencontroller?" und "Wie unterscheidet es sich von einem View-Controller?" Ein Schnittstellencontroller ist eine Instanz von WKInterfaceController Klasse oder eine Unterklasse davon. Das WKInterfaceController Klasse wird im WatchKit-Framework definiert.

Der Name dieser Klasse weist auf die Unterschiede bei UIViewController. Wie Sie wissen, steuert ein Ansichtscontroller eine Ansicht oder Ansichtshierarchie. Ein Schnittstellencontroller steuert jedoch keine Ansicht, sondern eine Schnittstelle, dh einen Bildschirm mit Inhalten. Was dies bedeutet, wird klarer, sobald der Schnittstellencontroller implementiert wird.

Ein Schnittstellencontroller ist immer noch ein echter Controller, da er das Verhalten der Benutzeroberfläche steuert. Mit einem Schnittstellen-Controller können Sie die Benutzeroberfläche Ihrer WatchKit-Anwendung konfigurieren und auf Ereignisse reagieren, die die WatchKit-Anwendung an die WatchKit-Erweiterung weiterleitet. Wie dies funktioniert, wird später in diesem Tutorial klarer.

Ein Layout erstellen

Das Layout-System, das WatchKit uns bietet, ist im Vergleich zur Leistungsfähigkeit und Flexibilität des Auto-Layouts primitiv. Das Layoutsystem erinnert an das Layout von Webseiten mit HTML und CSS.

Einer der Bausteine ​​des WatchKit-Layoutsystems ist der WKInterfaceGroup Klasse. Eine Instanz dieser Klasse ist nichts anderes als ein Container, der andere Oberflächenelemente wie Labels, Tabellen usw. enthalten kann. Sie können sie mit a vergleichen

Element auf einer Webseite. Es gibt Struktur und bestimmt das Layout zusammen mit anderen Gruppen des Layouts.

Von dem Objektbibliothek Fügen Sie rechts dem Interface Controller zwei Gruppen hinzu (siehe unten).

Haben Sie bemerkt, dass die Gruppen automatisch einrasten? Das Layoutsystem verhält sich ganz anders als das automatische Layout. Ein weiteres wichtiges Detail ist, dass der Container des Schnittstellencontrollers auch eine Gruppe und keine Ansicht ist. Das bedeutet, dass Sie die Gruppen einer anderen Gruppe hinzugefügt haben. Dies ist in Ordnung, da Gruppen verschachtelt werden können, sodass Entwickler relativ komplexe Layouts für ihre WatchKit-Anwendungen erstellen können.

Oberflächenelemente hinzufügen

Fügen Sie ein Label aus dem hinzu Objektbibliothek zur obersten Gruppe und sehen was passiert. Die Größe der Gruppe verringert sich entsprechend der Etikettengröße. Der Umriss einer leeren Gruppe ist nichts weiter als ein Platzhalter. Eine Gruppe passt ihre Größe immer an den Inhalt an.

Wählen Sie das Etikett aus und öffnen Sie die Identitätsinspektor zur Rechten. Beachten Sie, dass das hinzugefügte Etikett vom Typ ist WKInterfaceLabel, nicht UILabel. Obwohl WatchKit-Anwendungen viele Elemente der Benutzeroberfläche haben können, die denen in iOS-Anwendungen ähneln, unterscheiden sie sich. Das WKInterfaceLabel Klasse erbt beispielsweise von WKInterfaceObject anstatt UIView und UIResponder.

Öffnen Sie bei ausgewähltem Etikett die Attribute-Inspektor zur Rechten. Unter Größe, Breite einstellen auf Relativ zu Container um es so breit wie der Bildschirm der Apple Watch zu machen. Ändern Sie die Schriftart in Überschrift um es etwas mehr hervorzuheben und den Text des Labels in zu ändern Cupertino. Beachten Sie, dass Sie weder die Schriftfamilie ändern noch die Schriftgröße manuell anpassen können.

Da in unserer WatchKit-Anwendung die Wetterbedingungen an verschiedenen Orten der Erde angezeigt werden, müssen wir auch ein Etikett für die Temperatur hinzufügen. Es wäre auch schön, das lokale Datum und die Uhrzeit des Ortes zu kennen.

Fügen Sie der oberen Gruppe eine zweite Beschriftung hinzu, indem Sie eine Beschriftung in ziehen Scene Navigator. Warten. Das ist nicht richtig. Sie haben der richtigen Gruppe ein Label hinzugefügt, das jedoch nicht in der Benutzeroberfläche angezeigt wird.

Standardmäßig hat eine Gruppe ein horizontal Layout. Sie können dies überprüfen, indem Sie das öffnen Attribute-Inspektor und seine zu inspizieren Layout Eigentum. Dies bedeutet, dass die darin enthaltenen Elemente der Benutzeroberfläche horizontal angeordnet sind. Das Temperaturetikett ist in der Gruppe vorhanden, aber momentan nicht sichtbar. Ändern Sie die Gruppe Layout Eigentum an Vertikale um das Problem zu lösen.

Füge hinzu ein Datum Schnittstellenelement zur zweiten Gruppe. Datumsoberflächenelemente sind Instanzen von WKInterfaceDate Klasse. Dieses Oberflächenelement enthält eine Beschriftung und ist ideal zum Anzeigen und Formatieren von Datumsangaben. Beginnen Sie, indem Sie die Breite des Elements in ändern Relativ zu Container und die Textausrichtung des Etiketts rechtsbündig.

Es ist nicht nötig, das zu verwenden NSDateFormatter Klasse, um Datumsangaben zu formatieren. Das WKInterfaceDate Klasse behandelt die Datumsformatierung für uns. Ändere das Format des WKInterfaceDate Instanz zu Brauch und stellen Sie das Format auf M / d, h: mm a. Die Benutzeroberfläche sollte jetzt so aussehen.

Erstellen und starten Sie die WatchKit-Anwendung im iOS-Simulator, um zu sehen, was wir bisher haben. Die Anwendung ist im Moment nicht sehr nützlich, da wir mit statischen Inhalten arbeiten. Wir werden das im nächsten Tutorial beheben.

Fazit

In diesem Lernprogramm haben wir die Grundlagen der Entwicklung von WatchKit-Anwendungen behandelt. Ich bin sicher, Sie stimmen zu, dass sich die Entwicklung von WatchKit-Anwendungen sowohl vertraut als auch fremd anfühlt. Wir können die Werkzeuge verwenden, an die wir gewöhnt sind, aber es gibt einige wichtige Unterschiede, die Zeit brauchen, um sich damit vertraut zu machen. Im zweiten Teil dieses Lernprogramms konzentrieren wir uns auf die Erweiterung WatchKit, um Wetterdaten abzurufen und diese Daten in der WatchKit-Anwendung anzuzeigen.