Einführung in Storyboards in Xamarin.Mac
Dieser Artikel enthält eine Einführung in die Arbeit mit Storyboards in einer Xamarin.Mac-App. Sie erfahren, wie Sie die UI der App mit Storyboards und Interface Builder von Xcode erstellen und verwalten.
Storyboards ermöglichen es Ihnen, eine Benutzeroberfläche für Ihre Xamarin.Mac-App zu entwickeln, die nicht nur die Fensterdefinitionen und Steuerelemente enthält, sondern auch die Verknüpfungen zwischen verschiedenen Fenstern (über Segues) und Ansichtszuständen enthält.
Dieser Artikel enthält eine Einführung in die Verwendung von Storyboards zum Definieren der Benutzeroberfläche einer Xamarin.Mac-App.
Was sind Storyboards?
Mithilfe von Storyboards kann die Benutzeroberfläche einer Xamarin.Mac-App an einer zentralen Stelle mit allen Navigationselementen und Benutzeroberflächen definiert werden. Storyboards für Xamarin.Mac funktionieren in einer sehr ähnlichen Weise wie Storyboards für Xamarin.iOS. Sie enthalten jedoch einen anderen Satz von Segue-Typen aufgrund der verschiedenen Schnittstellen-Idiome.
Arbeiten mit Szenen
Wie oben erwähnt, definiert ein Storyboard alle Ui für eine bestimmte App, die in eine funktionale Übersicht über die Ansichtscontroller unterteilt ist. Im Schnittstellen-Generator von Xcode befindet sich jeder dieser Controller in einer eigenen Szene.
Jede Szene stellt ein bestimmtes Ansichts- und Ansichtscontrollerpaar mit einer Reihe von Linien (als Segues bezeichnet) dar, die jede Szene in der Benutzeroberfläche verbinden und so ihre Beziehungen anzeigen. Einige Segues definieren, wie ein Ansichtscontroller einen oder mehrere untergeordnete Ansichten oder Ansichtscontroller enthält. Andere Segues definieren Übergänge zwischen dem Ansichtscontroller (z. B. anzeigen eines Popups oder Dialogfelds).
Das Wichtigste zu beachten ist, dass jede Segue den Fluss einiger Daten zwischen dem angegebenen Element der Benutzeroberfläche der App darstellt.
Arbeiten mit Ansichtscontrollern
Ansichtscontroller definieren die Beziehungen zwischen einer bestimmten Ansicht von Informationen in einer Mac-App und dem Datenmodell, das diese Informationen bereitstellt. Jede Szene auf oberster Ebene im Storyboard stellt einen Ansichtscontroller im Code der Xamarin.Mac-App dar.
Auf diese Weise ist jeder Ansichtscontroller eine eigenständige, wiederverwendbare Kopplung der visuellen Darstellung der Informationen (Ansicht) und der Logik zum Präsentieren und Steuern dieser Informationen.
Innerhalb einer bestimmten Szene können Sie alle Dinge ausführen, die normalerweise von einzelnen .xib Dateien behandelt wurden:
- Platzieren von Unteransichten und Steuerelementen (z. B. Schaltflächen und Textfelder).
- Definieren sie Elementpositionen und Autolayouteinschränkungen.
- Verdrahtungsaktionen und -outlets, um UI-Elemente für Code verfügbar zu machen.
Arbeiten mit Segues
Wie oben erwähnt, stellen Segues die Beziehungen zwischen allen Szenen bereit, die die Benutzeroberfläche Ihrer App definieren. Wenn Sie mit der Arbeit in Storyboards in iOS vertraut sind, wissen Sie, dass Segues für iOS in der Regel Übergänge zwischen Vollbildansichten definieren. Dies unterscheidet sich von macOS, wenn Segues in der Regel "Eindämmung" definiert (wobei eine Szene das untergeordnete Element einer übergeordneten Szene ist).
In macOS neigen die meisten Apps dazu, ihre Ansichten innerhalb desselben Fensters mithilfe von UI-Elementen wie geteilten Ansichten und Registerkarten zu gruppieren. Im Gegensatz zu iOS, bei denen Ansichten aufgrund des begrenzten physischen Anzeigebereichs auf und aus dem Bildschirm übertragen werden müssen.
Angesichts der Tendenzen von macOS zur Eindämmung gibt es Situationen, in denen Präsentations-Segues verwendet werden, z. B. modales Windows, Blattansichten und Popovers.
Wenn Sie Presentation Segues verwenden, können Sie die Methode des übergeordneten Ansichtscontrollers für die PrepareForSegue Präsentation außer Kraft setzen, um die Präsentation zu initialisieren und Variablen bereitzustellen und alle Daten für den Angezeigten Ansichtscontroller bereitzustellen.
Entwurfs- und Laufzeiten
Zur Entwurfszeit (beim Layout der Benutzeroberfläche im Benutzeroberflächen-Generator von Xcode) wird jedes Element der Benutzeroberfläche der App in die Einzelnen Elemente unterteilt:
- Szenen - Die bestehen aus:
- Ansichtscontroller – Die Beziehungen zwischen Ansichten und den Daten, die sie unterstützen, definieren.
- Ansichten und Unteransichten – Die tatsächlichen Elemente, aus denen die Benutzeroberfläche besteht.
- Containment Segues - Das definiert die Beziehungen zwischen Szenen zwischen den übergeordneten und untergeordneten Elementen.
- Presentation Segues - Das definiert einzelne Präsentationsmodi .
Indem jedes Element auf diese Weise definiert wird, ermöglicht es das Lazy-Loading jedes Elements nur so, wie es während der Laufzeit benötigt wird. In macOS wurde der gesamte Prozess entwickelt, um es dem Entwickler zu ermöglichen, komplexe, flexible Benutzeroberflächen zu erstellen, die ein bares Minimum an Sicherungscode erfordern, um sie so effizient wie möglich zu machen.
Storyboard – Schnellstart
Im Schnellstarthandbuch für Storyboards erstellen wir eine einfache Xamarin.Mac-App, die die wichtigsten Konzepte der Arbeit mit Storyboards zum Erstellen einer Benutzeroberfläche einführt. Die Beispiel-App besteht aus einer Spilt-Ansicht, die einen Inhaltsbereich und einen Inspektorbereich enthält, und es wird ein einfaches Dialogfeld "Einstellungen" angezeigt. Wir verwenden Segues, um alle Elemente der Benutzeroberfläche miteinander zu verknüpfen.
Arbeiten mit Storyboards
In diesem Abschnitt werden die ausführlichen Details zum Arbeiten mit Storyboards in einer Xamarin.Mac-App behandelt. Wir werfen einen ausführlichen Blick auf Szenen und wie sie sich aus View Controllern und View zusammensetzen. Dann sehen wir uns an, wie Szenen mit Segues verknüpft sind. Abschließend befassen wir uns mit der Arbeit mit benutzerdefinierten Segue-Typen.
Zusammenfassung
Dieser Artikel hat einen schnellen Blick auf die Arbeit mit Storyboards in einer Xamarin.Mac-App gemacht. Wir haben gesehen, wie Sie eine neue App mit Storyboards erstellen und eine Benutzeroberfläche definieren. Außerdem haben wir gesehen, wie sie mithilfe von Segues zwischen verschiedenen Fenstern und Ansichtszuständen navigieren können.