Einführung in Storyboards in Xamarin.Mac
Dieser Artikel bietet 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.
Mit Storyboards können Sie eine Benutzeroberfläche für Ihre Xamarin.Mac-App 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 gesamte Benutzeroberfläche einer Xamarin.Mac-App an einem einzigen Ort mit der gesamten Navigation zwischen den einzelnen Elementen und Benutzeroberflächen definiert werden. Storyboards für Xamarin.Mac funktionieren auf sehr ähnliche Weise wie Storyboards für Xamarin.iOS. Sie enthalten jedoch einen anderen Satz von Segue-Typen aufgrund der unterschiedlichen Schnittstellensprache.
Arbeiten mit Szenen
Wie bereits erwähnt, definiert ein Storyboard die gesamte Benutzeroberfläche für eine bestimmte App, unterteilt in eine funktionale Übersicht der Ansichtscontroller. 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 auf der Benutzeroberfläche verbinden, wodurch ihre Beziehungen angezeigt werden. Einige Segues definieren, wie ein Ansichtscontroller eine oder mehrere untergeordnete Ansichten oder Ansichtscontroller enthält. Andere Segues definieren Übergänge zwischen dem Ansichtscontroller (z. B. anzeigen eines Popovers oder Dialogfelds).
Das Wichtigste ist, dass jede Segue den Datenfluss 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 der obersten Ebene im Storyboard stellt einen Ansichtscontroller im Code der Xamarin.Mac-App dar.
Auf diese Weise ist jeder Ansichtscontroller eine eigenständige, wiederverwendbare Kopplung sowohl der visuellen Darstellung der Informationen (Ansicht) als auch 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 verarbeitet worden wären:
- Platzieren Sie Unteransichten und Steuerelemente (z. B. Schaltflächen und Textfelder).
- Definieren Sie Elementpositionen und Auto-Layouteinschränkungen.
- Wire-up-Aktionen und Outlets, um UI-Elemente für Code verfügbar zu machen.
Arbeiten mit Segues
Wie bereits erwähnt, stellt Segues die Beziehungen zwischen allen Szenen bereit, die die Benutzeroberfläche Ihrer App definieren. Wenn Sie mit der Arbeit mit Storyboards in iOS vertraut sind, wissen Sie, dass Segues für iOS normalerweise Übergänge zwischen Vollbildansichten definiert. Dies unterscheidet sich von macOS, wenn Segues normalerweise "Containment" definiert (wobei eine Szene das untergeordnete Element einer übergeordneten Szene ist).
Unter 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 dem Ansichten aufgrund des begrenzten physischen Anzeigeraums auf und aus dem Bildschirm gewechselt werden müssen.
Angesichts der MacOS-Tendenzen zur Eindämmung gibt es Situationen, in denen Präsentations-Segues verwendet werden, z. B. modale Fenster, Blattansichten und Popover.
Bei Verwendung von Presentation Segues können Sie die PrepareForSegue -Methode des übergeordneten Ansichtscontrollers für die Präsentation überschreiben, um Variablen zu initialisieren und alle Daten für den dargestellten Ansichtscontroller bereitzustellen.
Entwurfs- und Laufzeiten
Zur Entwurfszeit (beim Layout der Benutzeroberfläche im Xcode-Schnittstellen-Generator) wird jedes Element der Benutzeroberfläche der App in seine konstituierenden Elemente unterteilt:
- Szenen – Die sich aus folgenden Teilen zusammensetzen:
- Ansichtscontroller : Definiert die Beziehungen zwischen Ansichten und den Daten, die diese unterstützen.
- Ansichten und Unteransichten: Die tatsächlichen Elemente, aus denen die Benutzeroberfläche besteht.
- Containment Segues : Definieren die Über-/Untergeordneten Beziehungen zwischen Szenen.
- Präsentations-Segues: Definieren einzelne Präsentationsmodi .
Indem jedes Element auf diese Weise definiert wird, ermöglicht es das verzögerte Laden jedes Elements nur, wenn es zur Laufzeit benötigt wird. In macOS wurde der gesamte Prozess so konzipiert, dass Entwickler komplexe, flexible Benutzeroberflächen erstellen können, die ein Minimum an Unterstützungscode erfordern, damit sie funktionieren, während sie so effizient wie möglich mit Systemressourcen arbeiten.
Storyboard – Schnellstart
In der Storyboard-Schnellstartanleitung erstellen wir eine einfache Xamarin.Mac-App, die die wichtigsten Konzepte der Arbeit mit Storyboards zum Erstellen einer Benutzeroberfläche vorstellt. Die Beispiel-App besteht aus einer Spiltansicht, die einen Inhaltsbereich und einen Inspektorbereich enthält und ein einfaches Einstellungsdialogfenster darstellt. Wir verwenden Segues, um alle Elemente der Benutzeroberfläche miteinander zu verknüpfen.
Arbeiten mit Storyboards
In diesem Abschnitt werden ausführliche Details zum Arbeiten mit Storyboards in einer Xamarin.Mac-App behandelt. Wir werfen einen ausführlichen Blick auf Szenen und wie sie aus Ansichtscontrollern und Ansicht zusammengesetzt sind. Anschließend sehen wir uns an, wie Szenen mit Segues verknüpft werden. Schließlich werfen wir einen Blick auf die Arbeit mit benutzerdefinierten Segue-Typen.
Beispiel für komplexes Storyboard
Ein Beispiel für ein komplexes Beispiel für die Arbeit mit Storyboards in einer Xamarin.Mac-App finden Sie in der SourceWriter-Beispiel-App. SourceWriter ist ein einfacher Quellcode-Editor, der Unterstützung für die Codevervollständigung und die einfache Syntaxhervorhebung bietet.
Der SourceWriter-Code wurde vollständig kommentiert und es wurden, wenn möglich, Links der Schlüsseltechnologien und -methoden zu wichtigen Informationen in den Leitfäden der Xamarin.Mac-Dokumentation bereitgestellt.
Zusammenfassung
In diesem Artikel wird die Arbeit mit Storyboards in einer Xamarin.Mac-App erläutert. Wir haben erfahren, wie Sie eine neue App mithilfe von Storyboards erstellen und eine Benutzeroberfläche definieren. Wir haben auch gesehen, wie sie mithilfe von Segues zwischen verschiedenen Fenstern und Ansichtszuständen navigieren.