Zum Inhalt springen

watchOS 4: Overlap-Groups

Das Erstellen von Interfaces in watchOS war und ist sehr simpel gehalten. Interface-Elemente werden schlicht unter oder nebeneinander angeordnet und können optional in Gruppen zusammengefasst werden. Innerhalb jener Gruppen galten aber die gleichen Layout-Regeln der Anordnung wie bei der Positionierung von Elementen innerhalb eines Interface-Controllers auch.

Mit dem im Herbst erscheinenden watchOS 4 weicht Apple diese Regelung ein wenig auf. Das Interface-Element Group (abgeleitet von der Klasse WKInterfaceGroup) bringt eine neue Layout-Option namens Overlap mit.

Groups verfügen in watchOS 4 über ein neues Layout namens "Overlap".
Groups verfügen in watchOS 4 über ein neues Layout namens „Overlap“.

Wird diese ausgewählt, werden die der Gruppe zugewiesenen Interface-Elemente hintereinander aufgeführt. Das erlaubt gänzlich neue Designs, wie beispielsweise das Verknüpfen von SpriteKit-Scenes mit darüber liegenden Labels. Ein simples Beispiel für solch ein Layout zeigt der folgende Screenshot aus einer kleinen Test-App im watchOS-Simulator. Darin kommt eine solche Group mit Overlap-Layout zum Einsatz, die über ein Image zur Darstellung einer grünen Ellipse verfügt, auf der zwei Labels platziert wurden.

Ein Image-Interface-Element liegt hinter zwei Labels.
Ein Image-Interface-Element liegt hinter zwei Labels.

Mithilfe dieser neuen Layout-Option für Groups sind deutlich komplexere Layouts möglich, ohne die Komplexität des Layout-Systems an sich zu erhöhen. Der folgende Screenshot zeigt, wie die Struktur des Interface-Controllers im Storyboard für die gezeigte Beispiel-App aufgebaut ist.

Die Overlap-Group (an oberster Stelle) enthält das Circle-Image sowie eine weitere Group, die zwei Labels vertikal untereinander anordnet.
Die Overlap-Group (an oberster Stelle) enthält das Circle-Image sowie eine weitere Group, die zwei Labels vertikal untereinander anordnet.

Die Layout-Option Overlap kann ausschließlich im Storyboard über den Attributes Inspector für eine WKInterfaceGroup gesetzt werden, eine Anpassung dieses Werts im Code ist nicht möglich. Das gezeigte Beispiel entstand ohne das Schreiben einer einzigen Zeile Code.

Wer sich das Erstellen von Overlap-Groups einmal in der Praxis ansehen möchte, findet im Folgenden ein passendes Video dazu.

Euer Thomas

Published inDevelopment

Sei der Erste der einen Kommentar abgibt

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.