Grundlegendes zum WatchKit Layout System

Etikett. Sie können sich eine Gruppe als Container für andere Oberflächenelemente vorstellen. Eine Gruppe verfügt über viele Eigenschaften, die Sie direkt im Interface Builder anpassen können.

Schritt 1: Definieren Sie das Layout Ihrer App

Es ist wichtig, das Layout detailliert zu planen, bevor Sie mit der Entwicklung beginnen. Dies erspart Ihnen viele Stunden Kopfschmerzen, wenn Sie zu einem bestimmten Zeitpunkt feststellen, dass die wirklich coole Funktion, die Sie erstellen wollten, auf einem physischen Gerät nicht möglich ist oder nicht gut aussieht. Stellen Sie sicher, dass Sie die Apple Watch-Richtlinien für die Benutzeroberfläche gelesen haben.

In diesem Beispiel werde ich lernen, wie Sie ein Layout für eine Hotel-App erstellen, in der Sie Hotels in der Nähe Ihres aktuellen Standorts finden können. Ich entwerfe den Bildschirm, der die Details für ein bestimmtes Hotel anzeigt. Wie ich in der Einleitung erwähnt habe, schreibe ich keinen Code. Stattdessen werde ich mich darauf konzentrieren, den Mechanismus des neuen Layoutsystems zu verstehen.

Wenn ich meine Zeichnungsfähigkeiten ausspreche, denke ich an mein Layout. Das Hotelname wird am oberen Rand des Bildschirms sein und darunter einige Sternikonen zeigt die Bewertung des Hotels. Ich möchte dann ein hinzufügen Bild zusammen mit seiner Adresse und zwei Tasten.

Schritt 2: Hinzufügen einer Gruppe

Unser Schnittstellencontroller ist momentan leer und es gibt keine Basisgruppe. Um neue Elemente hinzuzufügen, ziehen Sie sie per Drag & Drop aus dem Ordner Objektbibliothek rechts in die Schnittstellen-Controller. Das Scene Navigator Auf der linken Seite können Sie überprüfen, ob die Elemente richtig positioniert sind. Als Erstes fügen Sie eine Gruppe hinzu, mit der wir vertikal scrollen können, wenn der Inhalt nicht zum Bildschirm passt. Ziehen Sie eine Gruppe aus dem Objektbibliothek und lass es in die Schnittstellen-Controller Wie nachfolgend dargestellt.

Nachdem Sie nun eine Gruppe in Ihrem Schnittstellencontroller haben, können Sie seine Attribute im sehen Attribute-Inspektor zur Rechten. Lassen Sie uns einige davon genauer betrachten.

• Layout: Das Layout bestimmt, ob die Elemente der Gruppe horizontal oder vertikal angeordnet sind. Wenn Sie ein Element hinzufügen, wird es neben oder unter dem vorherigen Element positioniert.
• Einsätze: Dieses Attribut bestimmt den oberen, unteren, linken und rechten Einschub für die Gruppe.
• Abstand: Wie der Name schon sagt, bestimmt er den Abstand zwischen den Elementen innerhalb der Gruppe.
• Hintergrund: Sie können ein Bild als Hintergrund der Gruppe festlegen und animieren, indem Sie die Bilder nacheinander benennen.
• Position: Das Positionsattribut bestimmt die horizontale (links, Mitte, rechts) und vertikale Position (oben, Mitte, unten) der Gruppe.
• Größe: Das Größenattribut bestimmt die Breite und Höhe des Elements. Es gibt drei Werte, Größe an den Inhalt anpassen (automatisch basierend auf dem Inhalt angepasst), Relativ zu Container (nimmt die Containergröße und multipliziert sie mit dem definierten Wert), Fest (konstanter Wert).

Beachten Sie, dass die Apple Watch in zwei Größen erhältlich ist. Sie sollten in beiden Fällen dasselbe Layout verwenden, es kann jedoch zu kleinen Unterschieden kommen. Durch Klicken auf das Plus-Symbol links neben einem Attribut können Sie ein Attribut festlegen, das nur angewendet wird, wenn die App auf dem angegebenen Gerät ausgeführt wird.

Lassen Sie uns weiter an unserem Layout arbeiten. Ändere das Gruppenlayout zu Vertikale So wird der Inhalt vertikal verschoben, wenn ich weitere Elemente hinzufüge. Stellen Sie das ein Horizontal Position zu Center damit der Inhalt zentriert wird. Zum Schluss stellen Sie das ein Breite zuschreiben Breite relativ zum Container mit dem Multiplikator auf 1. Dadurch wird die Gruppe so erweitert, dass sie die gesamte Bildschirmbreite ausfüllt.

Schritt 3: Etikett hinzufügen

Nachdem wir nun die Haupteigenschaften für unsere Containergruppe eingerichtet haben, fügen wir der Gruppe ein Label hinzu. Von dem Objektbibliothek, Fügen Sie der Gruppe, die Sie gerade hinzugefügt haben, ein Label hinzu. Wenn Sie das Etikett auswählen, wird angezeigt, dass die Breite nicht den gesamten verfügbaren Platz einnimmt. Beheben Sie das Problem, indem Sie das width-Attribut in ändern Relativ zu Container. Um das Etikett zu zentrieren, ändern Sie die Horizontal zuschreiben Center und setzen Textausrichtung zu Center.

Was passiert, wenn der Name des Hotels zu lang ist? Ich möchte, dass es sich erweitert und vertikal wächst. Ändern Sie dazu das Linien Attributdes Labels zu 0. Dies bedeutet, dass der Name des Hotels bei Bedarf mehrere Zeilen umfasst. Ändern Sie den Text der Beschriftung, um sich das Ergebnis anzusehen. Das Ergebnis sollte wie in der Abbildung unten aussehen.

Schritt 4: Sterne hinzufügen

Wir möchten auch die Bewertung des Hotels anzeigen. Die Idee ist, eine Gruppe direkt unter dem Namen des Hotels mit der Anzahl der Sterne des Hotels zu haben. Fügen Sie der bereits bestehenden Gruppe eine weitere Gruppe hinzu. Mit anderen Worten, die neue Gruppe ist in der ersten Gruppe verschachtelt. 

Ich möchte, dass die fünf Sterne auf derselben Linie stehen und zentriert sind. Wie bereits erwähnt, kann ich zur Laufzeit keine Objekte hinzufügen oder entfernen, aber ich kann Objekte ein- und ausblenden. Ich werde der Gruppe fünf Bilder hinzufügen. Wenn das Hotel weniger Sterne hat, werde ich sie zur Laufzeit ausblenden.

Ziehen Sie fünf Bilder in die verschachtelte Gruppe und stellen Sie die Breite jedes Sterns auf ein Relativ zu Container. Ändern Sie den Multiplikator von 1 zu 0,2. Der Grund für die Wahl 0,2 Da der Multiplikator einfach ist. Wenn fünf Bilder in den verfügbaren Platz in derselben Zeile passen sollen, möchte ich, dass jedes Bild 20% der Gruppenbreite beträgt. Ändere das Horizontal Position zu Center damit sie immer zentriert sind, egal wie viele Sterne es gibt.

Als Nächstes weisen wir jedem Bild ein cooles Bild zu. Die von mir verwendeten Bilder finden Sie in den Quelldateien dieses Tutorials. Stellen Sie das ein Bild zuschreiben star.png und ändern Sie den Modus zu Aspect Fit um sicherzustellen, dass das Seitenverhältnis eingehalten wird.

Das Ergebnis sollte dem unten gezeigten animierten Bild ähneln. Sie können sogar versuchen, das zu überprüfen Versteckt Eigentum eines der Bilder in der Attribute-Inspektor und sehen, wie die Sterne immer zentriert sind.

Schritt 5: Hinzufügen des Hotelbildes

Laden Sie zunächst das Beispielbild eines Hotels von freeimages herunter. Ich möchte ein Bild des Hotels hinzufügen, um dem Benutzer zu zeigen, wie das Hotel aussieht. Fügen Sie ein neues Bild aus der hinzu Objektbibliothek wie Sie gerade für die Sterne getan haben. Ändere das Bild Attribut zu dem Bild, das Sie heruntergeladen haben, und legen Sie das fest Modus zu Aspect Fit.

Ändere das Horizontal Position zu Center und das Breite zu Relativ zu Container. Stellen Sie immer sicher, dass Sie das Bild als verschachteltes Element der Hauptgruppe hinzufügen, indem Sie die Ebenenhierarchie in überprüfen Scene Navigator auf der Linken. einstellen Höhe Sein Größe an den Inhalt anpassen um die Größe des Bildes automatisch basierend auf den Bildmaßen anzupassen.

Schritt 6: Adresse hinzufügen

Unter dem Bild möchte ich ein Adressetikett hinzufügen. Wir könnten auch eine Karte hinzufügen, aber für dieses Beispiel verwenden wir ein Label. Ziehen Sie eine Beschriftung aus der Objektbibliothek und positionieren Sie es unter dem Hotelbild. einstellen Linien zu 0 und Breite zu Relativ zu Container. Ändern Sie den Text als zufällige Adresse Ihrer Wahl.

Wie Sie vielleicht bemerkt haben, ist der Schnittstellencontroller jetzt größer. Die Größe des Storyboards wird automatisch angepasst, damit Sie den Inhalt sehen können.

Schritt 7: Schaltflächen hinzufügen

Der Schnittstellencontroller sollte an der Unterseite zwei Tasten haben. Ich möchte, dass die Schaltflächen halb so breit sind wie der Bildschirm und nebeneinander angeordnet sind. Da unsere Hauptgruppe vertikal angeordnet ist, müssen wir eine verschachtelte Gruppe hinzufügen, sodass die Schaltflächen horizontal und nicht vertikal positioniert werden.

Fügen Sie eine neue Gruppe hinzu und fügen Sie zwei Schaltflächen hinzu. Stellen Sie ihre Breite zuschreiben Relativ zu Container und stellen Sie den Multiplikator auf 0,5. Stellen Sie das ein Vertikale Position der beiden Tasten zu Center um sie vertikal zu zentrieren.

Stellen Sie den Text der ersten Schaltfläche auf "Ab 99 $" und die Hintergrundfarbe zu einem gut aussehenden Rot. Stellen Sie den Text der zweiten Schaltfläche auf "Mehr sehen" und die Hintergrundfarbe blau. Der Schnittstellencontroller sollte jetzt so aussehen:

Stellen Sie sicher, dass Sie das richtige Schema ausgewählt haben, und drücken Sie Befehl-R um die WatchKit-Anwendung auszuführen.

Wenn der iOS-Simulator geöffnet wird, müssen Sie noch etwas tun. Markieren Sie den iOS-Simulator und wählen Sie Hardware> Externe Anzeigen> Apple Watch 42 mm. Der Apple Watch-Simulator wird neben Ihrem iPhone-Simulator angezeigt. Sie können jetzt Ihr Arbeitslayout in Aktion sehen. Sehen Sie sich das Ergebnis im Video unten an.

Fazit

In diesem Tutorial habe ich Ihnen die wichtigsten Funktionen und Konzepte zum Erstellen komplexer Layouts in WatchKit vorgestellt. Wir untersuchten das Hinzufügen und Positionieren von Elementen der Benutzeroberfläche sowie einige bewährte Vorgehensweisen. Sie können jetzt Ihre Apple Watch-App-Ideen verwirklichen. Ich hoffe, dir hat dieses Tutorial gefallen.