WatchKit
Programmieren für die Apple Watch
Dr. Dirk Koller
©2014 - 2015 Dr. Dirk Koller
Inhaltsverzeichnis
Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
...
Einleitung
Was lange Zeit nur ein Gerücht war, wurde am Ende doch noch Wirklichkeit: Apple hat auf
einem Special-Event im ...
Einleitung 2
und zu neuem Glanz verhelfen. Wie beim Erscheinen des iPhones oder iPads wird den ersten Apps
dabei sicher ei...
Einleitung 3
Die Screens der Übungs-App
Wie oben erwähnt, funktionieren Watch-Apps im Moment nur im Zusammenspiel mit eine...
Einleitung 4
(der auch für die Apple Watch in Xcode enthalten ist) ausführen, aber spätestens beim Thema App
Gruppen ist z...
Grundlagen
In diesem einführenden Kapitel werden die grundlegenden Konzepte von WatchKit besprochen.
Außerdem geht es glei...
Grundlagen 6
App-Extensions
App-Extensions wurden mit iOS 8 eingeführt. Sie bieten die Möglichkeit zuvor nicht
zugängliche...
Grundlagen 7
Anlegen des iPhone-Projekts
Die Übungs-App trägt den Namen Highlights. Als Device wird iPhone und als Sprache...
Grundlagen 8
Anlegen des Watch-App-Targets
Bei den Optionen für das neue Target lässt sich angeben, ob ergänzend zur eigen...
Grundlagen 9
WatchKit-Optionen
Xcode legt nach dem Beenden des Assistenten eine Gruppe WatchKit Extension und eine Gruppe
...
Grundlagen 10
WatchApp-Projektstruktur
Interface-Controller
Die wichtigste Klasse des Watch-App-Projekts ist InterfaceCont...
Grundlagen 11
Die Lebenszyklusmethoden generiert Xcode bereits beim Anlegen des Targets in die Klasse.
awakeWithContext() ...
Grundlagen 12
Ändern der Title-Eigenschaft
Start im Simulator
Jetzt wird es spannend, die App wird im Simulator gestartet....
Grundlagen 13
Das Aktivieren des externen Displays muss nur einmal geschehen, bei darauffolgenden Starts bleibt
die Einste...
Layout
Nachdem der prinzipielle Aufbau eines Watch-App-Projekts nun besprochen und die App startklar
ist, geht es in diese...
Layout 15
Auswahl der Screen-Size
Positionierung
Im Position-Bereich des Attributes-Inspektors lässt sich die horizontale ...
Layout 16
Vertikale Ausrichtungsoptionen
Es macht Sinn mit ein paar Labels und verschiedenen Einstellungen zu experimentie...
Layout 17
Angabe der Größe
Ausblenden von Elementen
Das User-Interface von Watch-Apps ist statisch, späteres Zufügen oder ...
Layout 18
Gestalten des User-Interface mit Gruppen
Gruppen dienen aber nicht nur als Container zur Anordnung von Elementen...
Layout 19
Gestalten der Detail-View
Als Übung wird in diesem Kapitel die Detail-View für eine Sehenswürdigkeit erstellt. A...
Layout 20
1 import WatchKit
2 import Foundation
3
4 class InterfaceController: WKInterfaceController {
5
6 @IBOutlet weak ...
Layout 21
Detail-View im Simulator
Keine Angst, die Daten werden später noch abhängig von einer ausgewählten Sehenswürdigk...
Und der Rest?
Es handelt sich bei dem Beitrag um einen Auszug aus dem Buch WatchKit - Programmieren für die
Apple Watch⁹ D...
Watchkit - Programmieren für die Apple Watch
Nächste SlideShare
Wird geladen in …5
×

Watchkit - Programmieren für die Apple Watch

675 Aufrufe

Veröffentlicht am

Nach dem Erfolg von iPhone und iPad tritt Apple mit der Apple Watch erneut an, um einen Markt zu revolutionieren. Und ähnlich wie bei den iOS-Geräten lassen sich Apps für die Uhr schreiben und über den App Store vertreiben. Grundlage dafür ist WatchKit, ein Werkzeugkasten für Entwickler, der zusammen mit der Entwicklungsumgebung Xcode alles enthält, um Ideen für das neue Gerät zu realisieren.

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
675
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Watchkit - Programmieren für die Apple Watch

  1. 1. WatchKit Programmieren für die Apple Watch Dr. Dirk Koller ©2014 - 2015 Dr. Dirk Koller
  2. 2. 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
  3. 3. 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
  4. 4. 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/
  5. 5. 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/
  6. 6. 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
  7. 7. 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
  8. 8. 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/
  9. 9. 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.
  10. 10. 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.
  11. 11. 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:
  12. 12. 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 }
  13. 13. 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:
  14. 14. 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
  15. 15. 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 …
  16. 16. 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:
  17. 17. 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.
  18. 18. 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.
  19. 19. 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:
  20. 20. 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?
  21. 21. 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:
  22. 22. 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:
  23. 23. 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.
  24. 24. 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

×