WatchKitProgrammieren für die Apple Watch

Dr. Dirk Koller

©2014 - 2015 Dr. Dirk Koller

Inhaltsverzeichnis

Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1WatchKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1An wen richtet sich das Buch? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Die Beispielanwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Technische Infrastruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Lean-Writing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Architektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Projektstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Interface-Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Start im Simulator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Erstellen des User-Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Gruppen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Outlets und Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Gestalten der Detail-View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Und der Rest? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

EinleitungWas lange Zeit nur ein Gerücht war, wurde am Ende doch noch Wirklichkeit: Apple hat aufeinem Special-Event im September 2014 die sehnlich erwartete Uhr vorgestellt. Das Kind hört aufden Namen Apple Watch und beflügelte schon Jahre vor dem Erscheinen in Form von Gerüchtenund gefakten Fotos die Fantasie der Technik-Gemeinde. Inzwischen existieren eine ganze Mengesogenannter Wearables, also am Körper tragbarer Computer: Uhren, Jacken, Schuhe und eineBrille, von der man nicht mehr allzu viel hört. Allerdings konnte bisher keines dieser Geräte dieVerbraucher überzeugen. Kein Wunder – von einer technisch interessanten Idee bis zu einembrauchbaren Gerät ist es ein weiter Weg. Nach dem Erfolg von iPhone und iPad traut man amehestenApple zu, der neuenGerätekategorie zumDurchbruch zu verhelfen und einwirklich sinnvollverwendbares Gerät zu etablieren. Man darf gespannt sein, ob dem Hightech-Riesen das Kunststückerneut gelingen wird, die Blogs sind voll mit Diskussionen zu diesem Thema.

Die in der Apple Watch enthalten Technologien klingen auf jeden Fall vielversprechend:

• Innovative Eingabemöglichkeit Digital Crown• Berührungsunterscheidung mittels Force Touch• Haptisches Feedback durch die Taptic Engine• Herzfrequenzsensor• Berührungsloses Laden

Neben diesen technischen Gimmicks wird es bei einem so persönlichen Gerät wie einer Uhr abervor allen Dingen darauf ankommen, den Benutzer auf der emotionalen Ebene anzusprechen. Beizwei Größen, sechs Materialkombinationen und unzähligen Armbändern und Zifferblättern solltefür jeden die eigene Uhr dabei sein.

WatchKit

Klar ist schon jetzt, dass die Entwickler wiedermit im Boot sind, die Uhr ist programmierbar (und dasnicht nur von Apple). Dank des im November 2014 erschienenenWatchKit lassen sich in einer erstenPhase zunächst Apps, Kurzinfos und interaktive Mitteilungen programmieren, die eng mit demiPhone zusammenarbeiten. Später sollen dann laut der WatchKit-Pressemitteilung auch autonomeWatchKit-Apps möglich sein, also Programme, die ohne iPhone direkt auf der Uhr laufen.

Aber schon mit den in der Startphase zur Verfügung stehenden Möglichkeiten öffnet sich fürEntwickler eine neue Welt. Die Uhr erlaubt ganz neue Interaktionen, für die bisher unbekannteAnwendungsfälle ausgearbeitet und entwickelt werden müssen. Eine Menge bis dato nicht mach-barer Ideen sind plötzlich realisierbar. Apps auf der Uhr werden bestehende iPhone-Apps ergänzen

Einleitung 2

und zu neuem Glanz verhelfen. Wie beim Erscheinen des iPhones oder iPads wird den ersten Appsdabei sicher ein besonderes Interesse zukommen. Es lohnt sich, früh einzusteigen.

Genau dabei soll dieses Buch helfen. Ziel ist es, dem Entwickler sowohl bei den ersten Schritten,dem ersten Start, aber auch bei anspruchsvolleren Themen wie der Zusammenarbeit mit einerbestehenden iPhone-App zur Seite zu stehen.

An wen richtet sich das Buch?

Ob ein Buch hilfreich ist oder nicht, hängt sehr vom Wissensstand des Lesers ab. Eine schwierigeSituation für den Autor, der ja in der Regel eine möglichst große Zielgruppe erreichen möchte. Umniemanden zu verärgern, wird hier Klartext gesprochen. Zum Erstellen von Programmen für dieApple Watch sind folgende Grundlagen erforderlich:

• Beherrschen von Swift oder Objective-C• Kenntnisse im Umgang mit Apples Entwicklungsumgebung Xcode• Zumindest grundlegendes Know-how in der iOS- oder Mac OS-Entwicklung

Ohne Erfahrung in diesen Disziplinen wird man mit dem Buch nichts anfangen können undsollte sich zunächst mit den genannten Voraussetzungen beschäftigen. Übersichtsartikel zu denwichtigsten Quellen und Ressourcen zu Swift¹ und iOS² finden sich auf meiner Seite CocoaBits³.

Die Beispielanwendung

Als roter Faden durch das Buch dient die Entwicklung einer Beispielanwendung. Das Buch istalso mehr oder weniger ein großes Tutorial, das nahezu alle Aspekte der WatchKit-Entwicklungberücksichtigt. Die einzelnen Kapitel bauen grundsätzlich aufeinander auf, sollten sich aber auchjedes für sich lesen lassen.

Bei der Beispielanwendung handelt es sich um eine Art Mini-Reiseführer, der den Reisenden aufbesondere Sehenswürdigkeiten in der näheren Umgebung hinweist. Der Benutzer gelangt durchTap auf eine Kurzinfo, eine interaktive Mitteilung oder den Home-Screen-Button der App zu einerListe der Sehenswürdigkeiten. Nach Auswahl eines Listeneintrags erreicht er eine Detail-Viewund kann von dort aus via Kontextmenü zu Fotos der Attraktion, einer Kartenansicht oder einemBewertungsscreen gelangen. Die Bilder werden in Form von Pages und der Bewertungsscreen alsmodaler Dialog realisiert. Das Szenario gestattet, alle Bereiche der Watch-App-Entwicklung zubesprechen.

Das folgende Bild zeigt den Ablauf der App:

¹http://www.cocoabits.de/swift/swift-lernen²http://www.cocoabits.de/ios/einstieg-in-objective-c-und-ios-programmierung³http://www.cocoabits.de/

Einleitung 3

Die Screens der Übungs-App

Wie oben erwähnt, funktionierenWatch-Apps imMoment nur im Zusammenspiel mit einer iPhone-App. Die Entwicklung einer solchen ist nicht Thema dieses Buchs, allerdings gibt es einige Themen(Datenaustausch zwischen Uhr und iPhone, gemeinsame Frameworks), die beide Geräte betreffen.

Als Sprache für die Codebeispiele wurde Swift gewählt. Auch wenn momentan noch viele Mac-oder iOS-Entwickler besser mit Objective-C vertraut sind, ist davon auszugehen, dass sich das inden nächsten Monaten und Jahren ändern wird. Spätestens, wenn auf der nächsten WWDC alleSessions in Swift gehalten werden, wird klar sein, wohin die Reise geht. Der im Buch verwendeteCode ist aber überschaubar und die Übersetzung der Beispiel-App in Objective-C-Code stellt sicherkein allzu großes Problem dar. Wer also lieber in Objective-C programmieren möchte, um sich nichtgleichzeitig mit Swift beschäftigen zu müssen, sollte das tun.

Technische Infrastruktur

Die technischen Voraussetzungen entsprechen denen der iOS-Entwicklung. Auf jeden Fall wird einMac-Rechner benötigt. Das braucht keine Riesenmaschine sein, ein kleiner Mac Mini genügt für denAnfang allemal.

Auf dem Mac sollte die neueste Version von Apples Entwicklungsumgebung Xcode installiert sein.WatchKit ist in Xcode ab Version 6.2 enthalten. Derzeit ist die Beta auf derWatchKit-Entwicklerseite⁴erhältlich.

Zum Ausprobieren der selbstgeschriebenen Software auf einem echten Gerät (iPhone und AppleWatch) ist die Mitgliedschaft im Apple-Entwicklerprogramm⁵ erforderlich. Die Kosten dafür be-tragen 99 $ pro Jahr. Wer noch kein Mitglied ist, kann zwar die ersten Schritte auch im Simulator

⁴https://developer.apple.com/watchkit/⁵https://developer.apple.com/programs/ios/

Einleitung 4

(der auch für die Apple Watch in Xcode enthalten ist) ausführen, aber spätestens beim Thema AppGruppen ist zum Nachvollziehen der Codebeispiele die Teilnahme am Programm erforderlich.

Lean-Writing

Das vorliegende Buch entsteht mit Hilfe der ausgezeichneten Infrastruktur von Leanpub⁶ und istdort auch schon während der Entstehung als Beta-Release zu einem vergünstigten Preis erhältlich.Ziel ist es – ganz im Sinne der Lean-Bewegung – frühes Feedback von den Lesern zu erhalten, undso die Qualität des Buchs zu erhöhen. Der Leser hat, neben dem vergünstigten Preis, den Vorteil,zu einem sehr frühen Zeitpunkt auf die Informationen zugreifen zu können. Das Verfahren bringtes aber zwangsläufig mit sich, dass das Buch noch Überarbeitungen unterworfen sein wird: API-Modifikationen durch Apple ziehen Codeänderungen nach sich und die Rechtschreibfehler werdenerst im Korrektorat nach Fertigstellung des Buchs beseitigt. Die Leser erhalten selbstverständlichimmer Zugriff auf den aktuellsten Stand.

Nach Vollendung aller Kapitel wird das Buch dann auch bei Amazon & iTunes erhältlich sein.Nutzer dieser Plattformen sollten darauf achten, dass sie Aktualisierungen automatisch erhalten(bei Amazon lässt sich das Feature unterMeine Inhalte und Geräte > Einstellungen > AutomatischeBuchaktualisierung aktivieren).

Ich freue mich über konstruktive Kritik und Anregungen unter info@dirkkoller.de.

⁶http://www.leanpub.com

GrundlagenIn diesem einführenden Kapitel werden die grundlegenden Konzepte von WatchKit besprochen.Außerdem geht es gleich praktisch los mit dem Anlegen einer Watch-App.

Architektur

Bereits vor dem Erscheinen vonWatchKit gab es heftige Diskussionen, inwieweit Apple den Zugriffauf die Uhr gestatten würde bzw. das Unternehmen dafür bereits Schnittstellen fertiggestellt hat.Befürchtet wurde das Schlimmste. Erinnerungen an die ungeliebten Web-Apps beim Release desiPhones trübten die Erwartungen.

Inzwischen ist die Katze aus dem Sack und das Ergebnis hat vermutlich doch viele Entwicklerüberrascht. Die gute Nachricht zuerst: Es lassen sich durchaus anspruchsvolle Apps für die Uhrprogrammieren. Die schlechte: Watch-Apps laufen in der ersten Phase nur in Verbindung mit einemiPhone.

Der Grund dafür ist die Architektur, die Apple für den initialen Wurf von WatchKit-Apps gewählthat. Betrachtet man das bekannte Model-View-Controller-Pattern⁷, so findet nur die Präsentationder View wirklich auf der Uhr statt. Model und Controller werden in einer App-Extension auf demiPhone (ab Modell 5) ausgeführt.

WatchKit MVC

⁷https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

Grundlagen 6

App-ExtensionsApp-Extensions wurden mit iOS 8 eingeführt. Sie bieten die Möglichkeit zuvor nichtzugängliche Bereiche wie das Keyboard oder die Mitteilungszentrale zu erweitern und dieErweiterungen anderen Benutzern zur Verfügung zu stellen. Technisch handelt es sich umseparate Bundles, die mit Hilfe eines Extension-Targets angelegt und zusammen mit einerApp ausgeliefert werden. Ausgeführt werden Extensions aber in einem separaten Prozess.Ausführliche Informationen zu dem Thema finden sich auf der App-Extensions-Seite⁸ vonApple.

Der Aufbau erinnert also ein wenig an eine Client-Server-Architektur, die Uhr dient nur alsDisplay und delegiert rechenintensive Aufgaben an das leistungsfähigere iPhone. Erfreulicherweisehat Apple die Zusammenarbeit zwischen View auf der Watch-App und Controller/Model aufdem iPhone vorbildlich gelöst, die ganze Bluetooth-Kommunikation bleibt vor dem Entwicklerverborgen.

Autonome Watch-Apps, also Apps, deren Code direkt auf der Uhr ausgeführt wird, sollen lautder Apple-Presseerklärung zu WatchKit nächstes Jahr (vermutlich zur WWDC) nachgeschobenwerden. Vielleicht gibt es dann auch noch ein paar weitere Zugeständnisse, auf die viele Entwicklersehnsüchtig warten (wie zum Beispiel Zugriff auf die Sensoren der Uhr).

Projektstruktur

Aus den oben geschilderten Gründen wird also ein iPhone-Projekt als Grundlage für jede WatchApp benötigt. Es genügt ein frisch erzeugtes Single-View-Application-Projekt. Dieses erstellt man inXcode mittels File > New > Project > iOS Application > Single View Application.

⁸https://developer.apple.com/app-extensions/

Grundlagen 7

Anlegen des iPhone-Projekts

Die Übungs-App trägt den Namen Highlights. Als Device wird iPhone und als Sprache Swiftangegeben. Wer lieber in Objective-C programmieren möchte, kann dies natürlich tun, muss dieCodefragmente aber portieren. Bis zu diesem Moment handelt es sich um eine ganz normale iOS-App, die testweise im Simulator gestartet werden kann.

Die Watch-Ergänzungen werden der App durch Ergänzen eines neuen Targets zugefügt. Diesgeschieht im Menü unter File > New > Target… > iOS > Apple Watch > Watch App.

Grundlagen 8

Anlegen des Watch-App-Targets

Bei den Optionen für das neue Target lässt sich angeben, ob ergänzend zur eigentlichen Watch-Appauch ein Kurzinfo (Glance)- und/oder einMitteilungs (Notification)-Interface im Storyboard erzeugtwerden soll. Um was es sich dabei handelt, wird später in den entsprechenden Kapiteln erläutert.Da im Rahmen der Beispiel-App alle Bereiche von WatchKit besprochen werden, sollten die beidenOptionen aber auf jeden Fall aktiviert werden. Die anderen Einstellungen können unverändertbelassen werden.

Grundlagen 9

WatchKit-Optionen

Xcode legt nach dem Beenden des Assistenten eine Gruppe WatchKit Extension und eine GruppeApple Watch an. Im Apple-Watch-Ordner finden sich lediglich das Storyboard und die Image-Assets für das User-Interface der Watch-App. Der zugehörige Controller (InterfaceController)ist in der App-Extension hinterlegt. Sowohl für App-Extension als auch die Watch-App sind Targetsvorhanden. Außerdem steht ein Schema zum Starten der Watch-App zur Verfügung. Nach demAnlegen des Targets fragt Xcode, ob dieses Schema aktiviert werden soll (eine gute Idee).

Das folgende Bild zeigt die Projektstruktur nach dem Anlegen des Targets:

Grundlagen 10

WatchApp-Projektstruktur

Interface-Controller

Die wichtigste Klasse des Watch-App-Projekts ist InterfaceController. Die Klasse erbt vonWKInterfaceController und entspricht dem UIViewController unter iOS:

1 import WatchKit

2 import Foundation

3

4

5 class InterfaceController: WKInterfaceController {

6

7 override func awakeWithContext(context: AnyObject?) {

8 super.awakeWithContext(context)

9 }

10

11 override func willActivate() {

12 super.willActivate()

13 }

14

15 override func didDeactivate() {

16 super.didDeactivate()

17 }

18 }

Grundlagen 11

Die Lebenszyklusmethoden generiert Xcode bereits beim Anlegen des Targets in die Klasse.awakeWithContext()wird beim Erzeugen einer Instanz der Klasse aufgerufen und ist der bevorzugteOrt für einmalige Initialisierungen und Zuweisungen. willActivate() und didDeactivate()

werden bei jedem Ein- bzw. Ausblenden eines Screens ausgeführt und bieten sich damit fürwiederkehrende Aktualisierungen des User-Interface an. Weitere Lebenszyklusmethoden gibt esnicht.

Ein Blick in das Storyboard der Watch-App zeigt, dass InterfaceController als Custom Class fürden Screen eingetragen ist, der alsMain-Entry-Point definiert ist. Beim Start der App wird also derim Storyboard hinterlegte Screen angezeigt und der zugehörige Code im Controller ausgeführt. DasStoryboard enthält noch weitere Szenen, die aber erst in späteren Kapiteln eine Rolle spielen.

Das Storyboard nach dem Erzeugen

Als erste Aktion im frisch angelegten Projekt wird der Titel der Main-Entry-Point-Szene auf denText Details gesetzt. Man findet die Eigenschaft im Attributes-Inspector. Der Titel wird links nebender Uhrzeit angezeigt und muss nicht zwingend vergeben werden:

Grundlagen 12

Ändern der Title-Eigenschaft

Start im Simulator

Jetzt wird es spannend, die App wird im Simulator gestartet. Dazu wird in der Xcode-Tool-Bar dasWatch-App-Schema ausgewählt undmitRun gestartet. Der iPhone-Simulator erscheint und zeigt dieleere Single-View-Application. DerWatch-Simulator muss beim ersten Start der App überHardware> External Displays > Apple Watch geöffnet werden. Entsprechend den von Apple angebotenenUhren stehen zwei Varianten in verschiedenen Größen zur Auswahl. Die Auflösung der 38 mm-Version beträgt 272 x 340 Pixel, bei der 42 mm-Version der Uhr sind es hingegen 312 x 390 Pixel.

Aktivieren des externen Displays

Grundlagen 13

Das Aktivieren des externen Displays muss nur einmal geschehen, bei darauffolgenden Starts bleibtdie Einstellung erhalten.

Im externen Display wird nun der Watch-Simulator mit dem (fast) leeren User-Interface angezeigt:

Watch-Simulator

Noch kein App-Store-Hit, aber ein erster Schritt …

LayoutNachdem der prinzipielle Aufbau eines Watch-App-Projekts nun besprochen und die App startklarist, geht es in diesemKapitel um die Grundlagen der User-Interface-Gestaltung. Ziel der abschließen-den Übung ist es dann, die Detail-View für die Sehenswürdigkeiten-App zu erstellen.

Erstellen des User-Interface

Das User-Interface einer Watch-App wird mit dem Interface-Builder gestaltet, die Komponentenlassen sich wie gewohnt aus der Komponentenbibliothek auf das Storyboard in der Watch-App-Gruppe ziehen. Die Möglichkeiten sind im Vergleich zu einer herkömmlichen iOS-View allerdingsbegrenzt. Die Views für die Uhr kommen gänzlich ohne Auto-Layout aus und das Positionieren derControls erinnert eher an das LinearLayout der Android-Programmierung.

Mehrere zugefügte Elemente werden zunächst einmal vertikal angeordnet, jede Komponente be-kommt eine eigene Zeile:

Gestalten des User-Interface

Sind mehr Elemente enthalten als auf den Screen passen, kann zur Laufzeit nach unten gescrolltwerden. Im Storyboard zur Designzeit wächst der Screen entsprechend.

Die beiden verschiedenen Auflösungen der Uhr lassen recht schnell den Wunsch nach individuellerGestaltung aufkommen. Erfreulicherweise steht im Interface-Builder für jede Eigenschaft zur Wahl,ob diese allgemein oder für eine der beiden Varianten der Uhr gilt. Die Optionen verbergen sichhinter dem Pluszeichen, das sich links neben jeder Eigenschaft findet:

Layout 15

Auswahl der Screen-Size

Positionierung

Im Position-Bereich des Attributes-Inspektors lässt sich die horizontale oder vertikale Ausrichtungjeder Komponente anpassen. Horizontal stehen die Optionen Left, Center und Right zur Auswahl.

Horizontale Ausrichtungsoptionen

In der Vertikalen entsprechend Top, Center und Bottom. Komponenten mit gleicher vertikalerEinstellung bilden an ihrer Position dann visuell eigene Listen.

Layout 16

Vertikale Ausrichtungsoptionen

Es macht Sinn mit ein paar Labels und verschiedenen Einstellungen zu experimentieren, um dieAuswirkungen genau zu verstehen.

Size

Die Größe der User-Interface-Bestandteile wird mit dem Size-Attribut beschrieben. Zur Auswahlstehen drei Modi, die jeweils für Weite und Höhe vergeben werden können:

Size to Fit Content

Die Option Size to Fit Content ist quasi der Autopilot unter den Optionen. Jedes Element nimmt hierden Platz ein, den es benötigt. Als Grundlage dient die Intrinsic-Content-Size der Komponente (dieBreite eines Labels wird beispielsweise durch den dargestellten Text definiert). Weitere Angabensind bei dieser Option nicht erforderlich.

Fixed Size

Mit dieser Option lassen sich punktgenaue aber eben sehr statische Layouts realisieren. Die Angabeerfolgt für Weite und Höhe in Pixel.

Relative to Container

Die verbleibende der drei Size-Optionen legt die Größe in Relation zum umgebenden Container(eine Gruppe oder der Interface-Controller selber) fest. Anzugeben sind ein Multiplier (ein Wertzwischen 0 und 1) und ein Adjustment-Wert in Pixel. Die Größe der Komponente berechnet sichdann durch Multiplikation der Container-Größe mit dem Multiplier und anschließender Additiondes Adjustment-Werts.

Layout 17

Angabe der Größe

Ausblenden von Elementen

Das User-Interface von Watch-Apps ist statisch, späteres Zufügen oder Löschen von Komponentenist nicht möglich. Die einzige Möglichkeit besteht im Manipulieren des Alpha-Werts oder derHidden-Eigenschaft im Bereich View des Attributes-Inspektor.

Alpha-Wert und Hidden-Property

Wenn Hidden auf true gesetzt wird, steht der Platz der versteckten Komponente für andereControls zur Verfügung. Bei einem Alpha-Wert von 0 ist die Komponente ebenfalls verschwunden,beansprucht ihren Platz aber weiterhin.

Gruppen

Ein wie oben beschriebenes User-Interface wirkt durch die einfache vertikale Anordnung nicht son-derlich elegant. Weitere Gestaltungsmöglichkeiten erhält man durch die Verwendung vonGruppen.Dabei handelt es sich um Container, die andere Elemente aufnehmen können. Enthaltene Elementelassen sich innerhalb einer Gruppe horizontal oder vertikal anordnen und sogar schachteln. Darausergibt sich die Möglichkeit, User-Interfaces mit nebeneinanderliegenden Elementen zu gestalten:

Layout 18

Gestalten des User-Interface mit Gruppen

Gruppen dienen aber nicht nur als Container zur Anordnung von Elementen. Sie selber können auchgestalterisches Element sein, weil sich die Hintergrundfarbe von Gruppen ändern lässt.

Outlets und Actions

Die Connections zwischen View und Controller lassen sich – trotz der Trennung zur Laufzeit aufverschiedene Geräte – wie gewohnt zum Beispiel mit dem Assistant-Editor anlegen.

Anlegen von Outlets

Wichtig ist, dass die Outlets und Actions in Controllern der App-Extension (und nicht etwa imiPhone-Code) angelegt werden. Wird dann in der Watch-App beispielsweise ein Button getappt,wird der Code der zugehörigen Action in der App-Extension auf dem iPhone automatisch aus-geführt. Die Remoteaufrufe der Methoden geschehen über Bluetooth, diese Ebene bleibt vor demEntwickler komplett verborgen. Analoges gilt für Outlets, die den Zugriff auf Watch-Komponentenin der App Extension ermöglichen. Eine feine Sache, oder?

Layout 19

Gestalten der Detail-View

Als Übung wird in diesem Kapitel die Detail-View für eine Sehenswürdigkeit erstellt. Auf demScreen soll natürlich der Name der Attraktion auftauchen. Außerdemwären ein Foto und eine kurzeBeschreibung hilfreich. Das User-Interface sollte also ungefähr so aussehen:

Mockup der Detail-View

Die folgenden Schritte sind zur Umsetzung zu absolvieren:

Im Storyboard der Watch-App wird ein Label aus der Komponentenbibliothek in die Szene mit demMain-Entry-Point der App (erkennbar amMain-Pfeil) gezogen. Das Label wird horizontal zentriertund soll später den Titel der Sehenswürdigkeit anzeigen. Darunter wird ein Image angeordnet,ebenfalls horizontal zentriert. Schließlich folgt noch ein Label, horizontal links angebracht, für dieBeschreibung der Attraktion.

Nach diesen Schritten sollte die Szene nun folgendermaßen aussehen:

Detail-View im Interface-Builder

Um im Code die Texte der Labels und das Bild setzen zu können, werden wie oben besprochenOutlets in der App-Extension benötigt. Dazu wird in Xcode der Assistant-Editor eingeblendet unddort die Klasse InterfaceController angezeigt. Anschließend lassen sich bei gedrückter ctrl-Tastewie gewohnt die Verbindungen von den Komponenten zum Code im Assistant-Editor ziehen. Umdas Layout in Aktion zu sehen, werden die beiden Labels und das Image mit Testdaten versehen.Die Klasse InterfaceController sieht dann wie folgt aus:

Layout 20

1 import WatchKit

2 import Foundation

3

4 class InterfaceController: WKInterfaceController {

5

6 @IBOutlet weak var titleLabel: WKInterfaceLabel!

7 @IBOutlet weak var mainImage: WKInterfaceImage!

8 @IBOutlet weak var textLabel: WKInterfaceLabel!

9

10 override func awakeWithContext(context: AnyObject?) {

11 super.awakeWithContext(context)

12 titleLabel.setText("Alte Oper")

13 mainImage.setImage(UIImage(named:"alteOper.png"))

14 textLabel.setText("Sehr langer Text")

15 }

16

17 override func willActivate() {

18 super.willActivate()

19 }

20

21 override func didDeactivate() {

22 super.didDeactivate()

23 }

24 }

Damit der Code läuft, muss ein Bild mit Namen alteOper.png im WatchKit-Extension-Targetenthalten sein.

Das Label textLabel hat die Aufgabe ausführliche Beschreibungstexte aufzunehmen (im Codebei-spiel wurde aus Gründen der Lesbarkeit darauf verzichtet). Damit längere Texte auch komplettangezeigt werden, stellt man im Label die Anzahl der Zeilen auf den Wert 0. Dadurch passt sichder Text dem Inhalt an.

Das User-Interface sieht am Ende des Kapitels nun folgendermaßen aus:

Layout 21

Detail-View im Simulator

Keine Angst, die Daten werden später noch abhängig von einer ausgewählten Sehenswürdigkeitgesetzt. Hier geht es zunächst nur darum, dass überhaupt etwas auf dem Screen zu sehen ist.

Zum Schluss des Kapitels folgt noch ein wenig Kosmetik. Der beim Generieren des Watch-App-Projekts vergebene Name InterfaceController ist natürlich nur mäßig sinnvoll für den Detail-Controller. Besser wäre DetailController. Um den Namen zu ändern, muss der DateinameInterfaceController.swift in DetailController.swift geändert werden. In der Datei findetsich der Klassenname, der ebenfalls anzupassen ist. Und zu guter Letzt muss im Storyboard dieCustom-Class der Main-Entry-Szene geändert werden. Alternativ kann man Szene und Controllernatürlich auch neu anlegen und gleich richtig benennen. Im Folgenden wird auf alle Fälle vonDetailController gesprochen.

Und der Rest?Es handelt sich bei dem Beitrag um einen Auszug aus dem Buch WatchKit - Programmieren für dieApple Watch⁹ Das komplette Buch ist zum Preis von 9,99$ unter dem Link als Ebook erhältlich.

⁹http://www.leanpub.com/watchkit