Das Buch von Dr. Dirk Koller bietet eine umfassende Einführung in die Programmierung von Apps für die Apple Watch über WatchKit. Es richtet sich an Entwickler mit Grundkenntnissen in Swift oder Objective-C und Xcode, um ihnen beim Erstellen interaktiver und autonomer Watch-Apps zu helfen. Die Beispielanwendung dient als praktischer Leitfaden und behandelt alle wesentlichen Aspekte der WatchKit-Entwicklung.

2. WatchKit
Programmieren für die Apple Watch
Dr. Dirk Koller
©2014 - 2015 Dr. Dirk Koller

3. Inhaltsverzeichnis
Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
WatchKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
An wen richtet sich das Buch? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Die Beispielanwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Technische Infrastruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Lean-Writing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Architektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Projektstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Interface-Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Start im Simulator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Erstellen des User-Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Gruppen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Outlets und Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Gestalten der Detail-View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Und der Rest? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4. Einleitung
Was lange Zeit nur ein Gerücht war, wurde am Ende doch noch Wirklichkeit: Apple hat auf
einem Special-Event im September 2014 die sehnlich erwartete Uhr vorgestellt. Das Kind hört auf
den Namen Apple Watch und beflügelte schon Jahre vor dem Erscheinen in Form von Gerüchten
und gefakten Fotos die Fantasie der Technik-Gemeinde. Inzwischen existieren eine ganze Menge
sogenannter Wearables, also am Körper tragbarer Computer: Uhren, Jacken, Schuhe und eine
Brille, von der man nicht mehr allzu viel hört. Allerdings konnte bisher keines dieser Geräte die
Verbraucher überzeugen. Kein Wunder – von einer technisch interessanten Idee bis zu einem
brauchbaren Gerät ist es ein weiter Weg. Nach dem Erfolg von iPhone und iPad traut man am
ehesten Apple zu, der neuen Gerätekategorie zum Durchbruch zu verhelfen und ein wirklich sinnvoll
verwendbares Gerät zu etablieren. Man darf gespannt sein, ob dem Hightech-Riesen das Kunststück
erneut 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 aber
vor allen Dingen darauf ankommen, den Benutzer auf der emotionalen Ebene anzusprechen. Bei
zwei Größen, sechs Materialkombinationen und unzähligen Armbändern und Zifferblättern sollte
für jeden die eigene Uhr dabei sein.
WatchKit
Klar ist schon jetzt, dass die Entwickler wieder mit im Boot sind, die Uhr ist programmierbar (und das
nicht nur von Apple). Dank des im November 2014 erschienenen WatchKit lassen sich in einer ersten
Phase zunächst Apps, Kurzinfos und interaktive Mitteilungen programmieren, die eng mit dem
iPhone zusammenarbeiten. Später sollen dann laut der WatchKit-Pressemitteilung auch autonome
WatchKit-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ür
Entwickler eine neue Welt. Die Uhr erlaubt ganz neue Interaktionen, für die bisher unbekannte
Anwendungsfä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

5. Einleitung 2
und zu neuem Glanz verhelfen. Wie beim Erscheinen des iPhones oder iPads wird den ersten Apps
dabei 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 einer
bestehenden 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 schwierige
Situation für den Autor, der ja in der Regel eine möglichst große Zielgruppe erreichen möchte. Um
niemanden zu verärgern, wird hier Klartext gesprochen. Zum Erstellen von Programmen für die
Apple 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 und
sollte sich zunächst mit den genannten Voraussetzungen beschäftigen. Übersichtsartikel zu den
wichtigsten 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 ist
also mehr oder weniger ein großes Tutorial, das nahezu alle Aspekte der WatchKit-Entwicklung
berücksichtigt. Die einzelnen Kapitel bauen grundsätzlich aufeinander auf, sollten sich aber auch
jedes für sich lesen lassen.
Bei der Beispielanwendung handelt es sich um eine Art Mini-Reiseführer, der den Reisenden auf
besondere Sehenswürdigkeiten in der näheren Umgebung hinweist. Der Benutzer gelangt durch
Tap auf eine Kurzinfo, eine interaktive Mitteilung oder den Home-Screen-Button der App zu einer
Liste der Sehenswürdigkeiten. Nach Auswahl eines Listeneintrags erreicht er eine Detail-View
und kann von dort aus via Kontextmenü zu Fotos der Attraktion, einer Kartenansicht oder einem
Bewertungsscreen gelangen. Die Bilder werden in Form von Pages und der Bewertungsscreen als
modaler Dialog realisiert. Das Szenario gestattet, alle Bereiche der Watch-App-Entwicklung zu
besprechen.
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/

6. Einleitung 3
Die Screens der Übungs-App
Wie oben erwähnt, funktionieren Watch-Apps im Moment 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 in
den nächsten Monaten und Jahren ändern wird. Spätestens, wenn auf der nächsten WWDC alle
Sessions in Swift gehalten werden, wird klar sein, wohin die Reise geht. Der im Buch verwendete
Code ist aber überschaubar und die Übersetzung der Beispiel-App in Objective-C-Code stellt sicher
kein allzu großes Problem dar. Wer also lieber in Objective-C programmieren möchte, um sich nicht
gleichzeitig mit Swift beschäftigen zu müssen, sollte das tun.
Technische Infrastruktur
Die technischen Voraussetzungen entsprechen denen der iOS-Entwicklung. Auf jeden Fall wird ein
Mac-Rechner benötigt. Das braucht keine Riesenmaschine sein, ein kleiner Mac Mini genügt für den
Anfang 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 der WatchKit-Entwicklerseite⁴
erhältlich.
Zum Ausprobieren der selbstgeschriebenen Software auf einem echten Gerät (iPhone und Apple
Watch) 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/

7. Einleitung 4
(der auch für die Apple Watch in Xcode enthalten ist) ausführen, aber spätestens beim Thema App
Gruppen ist zum Nachvollziehen der Codebeispiele die Teilnahme am Programm erforderlich.
Lean-Writing
Das vorliegende Buch entsteht mit Hilfe der ausgezeichneten Infrastruktur von Leanpub⁶ und ist
dort 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, und
so 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 bringt
es 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 werden
erst im Korrektorat nach Fertigstellung des Buchs beseitigt. Die Leser erhalten selbstverständlich
immer 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 unter Meine Inhalte und Geräte > Einstellungen > Automatische
Buchaktualisierung aktivieren).
Ich freue mich über konstruktive Kritik und Anregungen unter info@dirkkoller.de.
⁶http://www.leanpub.com

8. Grundlagen
In 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 von WatchKit gab es heftige Diskussionen, inwieweit Apple den Zugriff
auf 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 des
iPhones 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 Uhr
programmieren. Die schlechte: Watch-Apps laufen in der ersten Phase nur in Verbindung mit einem
iPhone.
Der Grund dafür ist die Architektur, die Apple für den initialen Wurf von WatchKit-Apps gewählt
hat. Betrachtet man das bekannte Model-View-Controller-Pattern⁷, so findet nur die Präsentation
der View wirklich auf der Uhr statt. Model und Controller werden in einer App-Extension auf dem
iPhone (ab Modell 5) ausgeführt.
WatchKit MVC
⁷https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html

9. Grundlagen 6
App-Extensions
App-Extensions wurden mit iOS 8 eingeführt. Sie bieten die Möglichkeit zuvor nicht
zugängliche Bereiche wie das Keyboard oder die Mitteilungszentrale zu erweitern und die
Erweiterungen anderen Benutzern zur Verfügung zu stellen. Technisch handelt es sich um
separate Bundles, die mit Hilfe eines Extension-Targets angelegt und zusammen mit einer
App ausgeliefert werden. Ausgeführt werden Extensions aber in einem separaten Prozess.
Ausführliche Informationen zu dem Thema finden sich auf der App-Extensions-Seite⁸ von
Apple.
Der Aufbau erinnert also ein wenig an eine Client-Server-Architektur, die Uhr dient nur als
Display und delegiert rechenintensive Aufgaben an das leistungsfähigere iPhone. Erfreulicherweise
hat Apple die Zusammenarbeit zwischen View auf der Watch-App und Controller/Model auf
dem iPhone vorbildlich gelöst, die ganze Bluetooth-Kommunikation bleibt vor dem Entwickler
verborgen.
Autonome Watch-Apps, also Apps, deren Code direkt auf der Uhr ausgeführt wird, sollen laut
der Apple-Presseerklärung zu WatchKit nächstes Jahr (vermutlich zur WWDC) nachgeschoben
werden. Vielleicht gibt es dann auch noch ein paar weitere Zugeständnisse, auf die viele Entwickler
sehnsü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 Watch
App benötigt. Es genügt ein frisch erzeugtes Single-View-Application-Projekt. Dieses erstellt man in
Xcode mittels File > New > Project > iOS Application > Single View Application.
⁸https://developer.apple.com/app-extensions/

10. Grundlagen 7
Anlegen des iPhone-Projekts
Die Übungs-App trägt den Namen Highlights. Als Device wird iPhone und als Sprache Swift
angegeben. Wer lieber in Objective-C programmieren möchte, kann dies natürlich tun, muss die
Codefragmente 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. Dies
geschieht im Menü unter File > New > Target… > iOS > Apple Watch > Watch App.

11. 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-App
auch ein Kurzinfo (Glance)- und/oder ein Mitteilungs (Notification)-Interface im Storyboard erzeugt
werden 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 beiden
Optionen aber auf jeden Fall aktiviert werden. Die anderen Einstellungen können unverändert
belassen werden.

12. Grundlagen 9
WatchKit-Optionen
Xcode legt nach dem Beenden des Assistenten eine Gruppe WatchKit Extension und eine Gruppe
Apple 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 Targets
vorhanden. Außerdem steht ein Schema zum Starten der Watch-App zur Verfügung. Nach dem
Anlegen des Targets fragt Xcode, ob dieses Schema aktiviert werden soll (eine gute Idee).
Das folgende Bild zeigt die Projektstruktur nach dem Anlegen des Targets:

13. Grundlagen 10
WatchApp-Projektstruktur
Interface-Controller
Die wichtigste Klasse des Watch-App-Projekts ist InterfaceController. Die Klasse erbt von
WKInterfaceController 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 }

14. 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 bevorzugte
Ort für einmalige Initialisierungen und Zuweisungen. willActivate() und didDeactivate()
werden bei jedem Ein- bzw. Ausblenden eines Screens ausgeführt und bieten sich damit für
wiederkehrende Aktualisierungen des User-Interface an. Weitere Lebenszyklusmethoden gibt es
nicht.
Ein Blick in das Storyboard der Watch-App zeigt, dass InterfaceController als Custom Class für
den Screen eingetragen ist, der als Main-Entry-Point definiert ist. Beim Start der App wird also der
im Storyboard hinterlegte Screen angezeigt und der zugehörige Code im Controller ausgeführt. Das
Storyboard 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 den
Text Details gesetzt. Man findet die Eigenschaft im Attributes-Inspector. Der Titel wird links neben
der Uhrzeit angezeigt und muss nicht zwingend vergeben werden:

15. 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 das
Watch-App-Schema ausgewählt und mit Run gestartet. Der iPhone-Simulator erscheint und zeigt die
leere Single-View-Application. Der Watch-Simulator muss beim ersten Start der App über Hardware
> External Displays > Apple Watch geöffnet werden. Entsprechend den von Apple angebotenen
Uhren 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

16. Grundlagen 13
Das Aktivieren des externen Displays muss nur einmal geschehen, bei darauffolgenden Starts bleibt
die 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 …

17. Layout
Nachdem der prinzipielle Aufbau eines Watch-App-Projekts nun besprochen und die App startklar
ist, geht es in diesem Kapitel 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 Komponenten
lassen 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 allerdings
begrenzt. Die Views für die Uhr kommen gänzlich ohne Auto-Layout aus und das Positionieren der
Controls 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 gescrollt
werden. Im Storyboard zur Designzeit wächst der Screen entsprechend.
Die beiden verschiedenen Auflösungen der Uhr lassen recht schnell den Wunsch nach individueller
Gestaltung 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 sich
hinter dem Pluszeichen, das sich links neben jeder Eigenschaft findet:

18. Layout 15
Auswahl der Screen-Size
Positionierung
Im Position-Bereich des Attributes-Inspektors lässt sich die horizontale oder vertikale Ausrichtung
jeder 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 vertikaler
Einstellung bilden an ihrer Position dann visuell eigene Listen.

19. Layout 16
Vertikale Ausrichtungsoptionen
Es macht Sinn mit ein paar Labels und verschiedenen Einstellungen zu experimentieren, um die
Auswirkungen genau zu verstehen.
Size
Die Größe der User-Interface-Bestandteile wird mit dem Size-Attribut beschrieben. Zur Auswahl
stehen 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 hier
den Platz ein, den es benötigt. Als Grundlage dient die Intrinsic-Content-Size der Komponente (die
Breite eines Labels wird beispielsweise durch den dargestellten Text definiert). Weitere Angaben
sind bei dieser Option nicht erforderlich.
Fixed Size
Mit dieser Option lassen sich punktgenaue aber eben sehr statische Layouts realisieren. Die Angabe
erfolgt 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 Wert
zwischen 0 und 1) und ein Adjustment-Wert in Pixel. Die Größe der Komponente berechnet sich
dann durch Multiplikation der Container-Größe mit dem Multiplier und anschließender Addition
des Adjustment-Werts.

20. 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 Komponenten
ist nicht möglich. Die einzige Möglichkeit besteht im Manipulieren des Alpha-Werts oder der
Hidden-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 andere
Controls 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 von Gruppen.
Dabei handelt es sich um Container, die andere Elemente aufnehmen können. Enthaltene Elemente
lassen sich innerhalb einer Gruppe horizontal oder vertikal anordnen und sogar schachteln. Daraus
ergibt sich die Möglichkeit, User-Interfaces mit nebeneinanderliegenden Elementen zu gestalten:

21. Layout 18
Gestalten des User-Interface mit Gruppen
Gruppen dienen aber nicht nur als Container zur Anordnung von Elementen. Sie selber können auch
gestalterisches 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 auf
verschiedene 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 im
iPhone-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 dem
Entwickler komplett verborgen. Analoges gilt für Outlets, die den Zugriff auf Watch-Komponenten
in der App Extension ermöglichen. Eine feine Sache, oder?

22. Layout 19
Gestalten der Detail-View
Als Übung wird in diesem Kapitel die Detail-View für eine Sehenswürdigkeit erstellt. Auf dem
Screen soll natürlich der Name der Attraktion auftauchen. Außerdem wären ein Foto und eine kurze
Beschreibung 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 dem
Main-Entry-Point der App (erkennbar am Main-Pfeil) gezogen. Das Label wird horizontal zentriert
und 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 die
Beschreibung 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 besprochen
Outlets in der App-Extension benötigt. Dazu wird in Xcode der Assistant-Editor eingeblendet und
dort die Klasse InterfaceController angezeigt. Anschließend lassen sich bei gedrückter ctrl-Taste
wie gewohnt die Verbindungen von den Komponenten zum Code im Assistant-Editor ziehen. Um
das Layout in Aktion zu sehen, werden die beiden Labels und das Image mit Testdaten versehen.
Die Klasse InterfaceController sieht dann wie folgt aus:

23. 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-Target
enthalten 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 komplett
angezeigt werden, stellt man im Label die Anzahl der Zeilen auf den Wert 0. Dadurch passt sich
der Text dem Inhalt an.
Das User-Interface sieht am Ende des Kapitels nun folgendermaßen aus:

24. Layout 21
Detail-View im Simulator
Keine Angst, die Daten werden später noch abhängig von einer ausgewählten Sehenswürdigkeit
gesetzt. 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 Dateiname
InterfaceController.swift in DetailController.swift geändert werden. In der Datei findet
sich der Klassenname, der ebenfalls anzupassen ist. Und zu guter Letzt muss im Storyboard die
Custom-Class der Main-Entry-Szene geändert werden. Alternativ kann man Szene und Controller
natürlich auch neu anlegen und gleich richtig benennen. Im Folgenden wird auf alle Fälle von
DetailController gesprochen.

25. Und der Rest?
Es handelt sich bei dem Beitrag um einen Auszug aus dem Buch WatchKit - Programmieren für die
Apple Watch⁹ Das komplette Buch ist zum Preis von 9,99$ unter dem Link als Ebook erhältlich.
⁹http://www.leanpub.com/watchkit