Entwicklung von Apps für watchOS 2, Teil 1

Neue Features: Digital Crown

Neue Funktionen

Abseits der grundlegend geänderten Architektur in watchOS 2 hat Apple der neuen Version weitere Verbesserungen und Funktionen spendiert, die auch Auswirkungen auf die App-Entwicklung für watchOS haben. Sie lassen sich in fünf Bereiche untergliedern:

  • Digital Crown
  • Layout und Animation
  • Taptic Engine
  • Audio und Video
  • Alerts

Funktionen und APIs in den fünf Bereichen lassen sich nur für Apps ab watchOS 2 nutzen.

Im Folgenden werden die Neuerungen in den einzelnen Bereichen im Detail vorgestellt, wobei die letzten drei Bereiche Teil des Folgeartikels sein werden. Ergänzende Code-Beispiele zu den einzelnen Themen sind komplett in Apples neuer Programmiersprache Swift gehalten und werden nicht noch zusätzlich in Objective-C aufgeführt.

Digital Crown

Die Digital Crown zählt zu den wichtigsten Bedienelementen der Apple Watch. Sie entspricht der Krone bei bekannten Armbanduhren, die unter anderem für das Einstellen der Uhrzeit zuständig ist. Bei der Watch dient sie als zentrales Steuerungselement. Sie erlaubt es, durch Listen zu scrollen oder in einen Kartenausschnitt herein- und aus ihm herauszuzoomen, ohne dafür die kleine Touch-Fläche des Displays der Smartwatch verwenden zu müssen.

Zwar stehen in watchOS 1 die Funktionen der Digital Crown beispielsweise zum Scrollen einer längeren Tabellenansicht zur Verfügung, es fehlte aber eine Option, eigene View-Elemente zu erstellen, die sich mittels Digital Crown manipulieren ließ. Das hat sich mit der Einführung von watchOS 2 geändert.

Mit der Klasse WKInterfacePicker stellt Apple ab watchOS 2 ein neues Interface-Element zur Verfügung, um die Scroll-Möglichkeiten der Digital Crown in eigenen Views zu nutzen. Der Picker erlaubt dabei die Konfiguration eines von drei vorgegebenen Layouts, um eine scrollbare Liste zu erstellen:

  • List: Ein so konfigurierter Picker stellte eine vertikal scrollbare Liste dar. Ein Element innerhalb dieser Liste besteht entweder aus einem Text (mit optionalem zugehörigen Bild) oder einem reinen Bild.
  • Stacked: Ein solcher Picker lässt sich nur für Bilder verwenden. Dabei werden sie beim Durchblättern mittels Digital Crown automatisch ein- und wieder ausgeblendet.
  • Image Sequence: Bei ihr können mehrere Bilder durchgewechselt werden (ähnlich wie beim Stacked-Layout), sie werden beim Wechsel allerdings nicht animiert.

Welches Layout eine WKInterfacePicker-Instanz verwendet, legen Entwickler typischerweise über die Einstellung "Style" im Storyboard fest; dort stehen die eben drei genannten Layouts zur Auswahl (s. Abb. 2).

Der Style eines Pickers lässt sich im Storyboard festlegen (Abb. 2).

Bleibt noch die Frage, wie man einem WKInterfacePicker Elemente hinzufügt, die er anzeigen soll. Hierfür verwendet man Instanzen der ebenfalls mit watchOS 2 eingeführten Klasse WKPickerItem. Wie der Name andeutet, handelt es sich bei Instanzen dieser Klasse um jeweils einzelne Elemente, die sich innerhalb eines Pickers anzeigen lassen. Zu diesem Zweck verfügt die Klasse über drei wichtige Eigenschaften:

  • title: der anzuzeigende Text eines Picker-Elements für das List-Layout
  • accessoryImage: das (optional) anzuzeigende Bild zu einem Text für das List-Layout
  • contentImage: das anzuzeigende Bild für das Picker-Element

Die beiden erstgenannten Eigenschaften title und accessoryImage spielen nur bei Picker-Views im List-Style eine Rolle, da das der einzige Picker-View-Style ist, der die Anzeige von Text erlaubt. Alternativ steht für alle drei Styles einer Picker-View die Property contentImage bereit, der ein für das jeweilige Picker-Element anzuzeigendes Bild zugewiesen wird.

Um nun ein oder mehrere Picker-Elemente einer WKInterfacePicker-Instanz zuzuweisen, stellt die Klasse die Methode setItems: bereit. Diese erwartet als Parameter ein Array aus WKPickerItem-Objekten.

Um Informationen über die Auswahl eines Picker-Elements durch den Nutzer zu erhalten, reicht es, eine passende Action-Methode im zugehörigen Interface-Controller zu implementieren und mittels Target-Action an das WKInterfacePicker-Objekt im Storyboard zu koppeln. Diese Methode wird dann automatisch aufgerufen, sobald der Nutzer ein neues Element innerhalb eines Pickers auswählt. Die Action-Methode erhält dabei den Index des vom Nutzer im Picker ausgewählten Elements.

Die neue Klasse WKInterfacePicker ist somit die zentrale Schnittstelle, wenn man eigene Auswahlansichten bereitstellen möchte, die sich mittels Digital Crown bedienen lassen. Hier bleibt für die Zukunft aber durchaus noch Luft nach oben, um weitere Konfigurationsmöglichkeiten und Features zu ergänzen.

Das folgende Listing zeigt zur Ergänzung eine beispielhafte Umsetzung und Verwendung eines WKInterfacePicker.

@IBOutlet weak var myPicker: WKInterfacePicker!
func pickerConfiguration() {
let firstPickerItem = WKPickerItem()
firstPickerItem.title = "First"
firstPickerItem.accessoryImage = WKImage(imageName: "FirstImage")
let secondPickerItem = WKPickerItem()
secondPickerItem.contentImage = WKImage(imageName: "SecondImage")
myPicker.setItems([firstPickerItem, secondPickerItem])
}