Wie füge ich meiner Apple Watch App eine seitenbasierte Benutzeroberfläche hinzu?

Eine seitenbasierte Benutzeroberfläche in einer App ist nützlich, um nicht hierarchische Inhalte anzuzeigen. Wenn Ihre iOS-App eine seitenbasierte Benutzeroberfläche enthält, ist es sinnvoll, dieselbe Benutzeroberfläche in Ihrer Apple Watch-App zu verwenden. Lesen Sie weiter, um herauszufinden, wie Sie dies in Xcode tun können.

Zu Demonstrationszwecken wird eine einfache WatchKit-App mit drei Schnittstellensteuerungen verwendet. Eine ist die erste Ansicht, und die beiden anderen sind modale Bildschirme, die in seitenbasiertem Stil dargestellt werden. Bevor Sie dem Lernprogramm folgen, stellen Sie sicher, dass Sie ein neues Xcode-Projekt erstellt und das WatchKit-Ziel hinzugefügt haben.

In diesem Tutorial erstellen wir die Navigation vom Storyboard aus.

1. Gehe zu Interface.storyboard Datei unter dem WatchKit App-Ordner und fügen Sie dem Storyboard zwei weitere Schnittstellen-Controller hinzu. Fügen Sie der Ansicht zunächst eine Schaltfläche hinzu. Die zweite und dritte Ansicht enthält ein einfaches Etikett, das den Seitenindex anzeigt.

2. Ziehen und Ziehen von der Schaltfläche in der ersten Ansicht bis zur zweite Ansicht und wählen Sie die modal Option aus dem Menü Action Segue. Sie müssen es als modales Segment festlegen, da die seitenbasierte Navigation nicht mit einem Push-Segment funktioniert.

3. Ziehen und Ziehen von der zweiten in die dritte Ansicht und wählen Sie Nächste Seite in dem Relationship Segue Speisekarte.

4. Das ist alles, was Sie tun müssen, um eine funktionierende seitenbasierte Navigation in Ihrer App zu haben. Ihr Storyboard sieht jetzt so aus. Beachten Sie die neu hinzugefügten Segue-Indikatoren zwischen den Ansichten.

5. Führen Sie die App aus und tippen Sie auf die Schaltfläche, um den ersten modalen Bildschirm aufzurufen. Wie Sie sehen, befindet sich unten auf dem Bildschirm eine Seitenanzeige. Wenn Sie nach links streichen, wird der zweite Bildschirm angezeigt.

6. Wiederholen Sie Schritt 3, um weitere Seiten zum Bildschirm hinzuzufügen. Im nächsten Tutorial erfahren Sie, wie Sie dasselbe mit Code tun.