Freigeben über


Storyboards in Xamarin.Mac – Schnellstart

Als kurze Einführung in die Verwendung von Storyboards zum Definieren der Benutzeroberfläche einer Xamarin.Mac-App starten wir ein neues Xamarin.Mac-Projekt. Wählen Sie Mac>App>Cocoa App aus, und klicken Sie auf die Schaltfläche Weiter :

Hinzufügen einer neuen Cocoa-App

Verwenden Sie den App-Namen von, MacStoryboard und klicken Sie auf die Schaltfläche Weiter :

Festlegen des App-Namens

Verwenden Sie den Standardprojektnamen und Projektmappennamen , und klicken Sie auf die Schaltfläche Erstellen :

Projekt- und Projektmappennamen

Doppelklicken Sie im Projektmappen-Explorer auf die Main.storyboard Datei, um sie zur Bearbeitung im Xcode-Schnittstellen-Generator zu öffnen:

Bearbeiten des Storyboards in Xcode Interface Builder.

Wie Sie oben sehen können, definiert das Standard-Storyboard sowohl die Menüleiste der App als auch das Standard-Fenster mit dem Ansichtscontroller und der Ansicht. Für unsere Beispiel-App erstellen wir eine Benutzeroberfläche, die auf einer Seite eine Standard Inhaltsansicht und in der zweiten eine Inspektoransicht enthält.

Dazu müssen wir zuerst den standardmäßigen Ansichtscontroller und die Im Storyboard enthaltene Ansicht entfernen, indem wir ihn im Schnittstellen-Generator auswählen und die ENTF-TASTE drücken:

Entfernen des Standardansichtscontrollers

Geben Sie als Nächstes split im Bereich Filter ein, wählen Sie den Controller für die Ansicht vertikal geteilt aus, und ziehen Sie ihn auf die Entwurfsoberfläche:

Suchen nach dem Controller für geteilte Ansichten

Beachten Sie, dass der Controller automatisch zwei untergeordnete Ansichtscontroller (und deren zugehörige Ansichten) enthält, die mit der linken und rechten Seite der geteilten Ansicht verbunden sind. Um die geteilte Ansicht mit dem übergeordneten Fenster zu verknüpfen, drücken Sie die STRG-TASTE , klicken Sie auf den Fenstercontroller (den blauen Kreis im Rahmen des Fenstercontrollers), und ziehen Sie eine Linie auf den Geteilten Ansichtscontroller. Wählen Sie den Fensterinhalt aus dem Popup aus:

Festlegen der Fensterinhaltsansicht

Dadurch werden die beiden Schnittstellenelemente mithilfe eines Segue-Elements miteinander verknüpft:

Die Segue zwischen dem Fenster und dem Inhalt

Wir möchten eine Textansicht auf der linken Seite der geteilten Ansicht platzieren und automatisch den verfügbaren Bereich ausfüllen lassen, wenn die Größe des Fensters oder der geteilten Ansicht geändert wird. Ziehen Sie eine Textansicht auf den oberen Ansichtscontroller, der an die geteilte Ansicht angefügt ist, und klicken Sie auf die Einschränkung Automatisches Layout anheften (das zweite Symbol rechts unten auf der Entwurfsoberfläche).

Konfigurieren der Einschränkungen

Von hier aus klicken wir auf alle vier I-Beam-Symbole um das Begrenzungsfeld am oberen Rand des Einschränkungs-Popovers und klicken unten auf die Schaltfläche 4 Einschränkungen hinzufügen , um die erforderlichen Einschränkungen hinzuzufügen.

Wenn wir zu Visual Studio für Mac zurückkehren und das Projekt ausführen, beachten Sie, dass die Größe der Textansicht automatisch geändert wird, um die linke Seite der geteilten Ansicht auszufüllen, da die Größe des Fensters oder der Aufteilung geändert wird:

Ein Beispiel für die ausgeführte App, die Text im linken Bereich des Fensters anzeigt.

Da wir die rechte Seite der geteilten Ansicht als Inspektorbereich verwenden werden, möchten wir, dass sie eine kleinere Größe hat und sie reduziert werden kann. Kehren Sie zu Xcode zurück, und bearbeiten Sie die Ansicht für die rechte Seite, indem Sie sie auf der Entwurfsoberfläche auswählen und auf den Größeninspektor klicken. Geben Sie hier eine Breite von ein 250:

Festlegen der Breite

Wählen Sie als Nächstes das Geteilte Element aus, das die rechte Seite darstellt, legen Sie eine höhere Haltepriorität fest, und klicken Sie auf das Kontrollkästchen Benutzer kann reduzieren :

Bearbeiten der Haltepriorität

Wenn wir zu Visual Studio für Mac zurückkehren und das Projekt jetzt ausführen, beachten Sie, dass auf der rechten Seite die Größe kleiner bleibt und die Größe des Fensters geändert wird:

Ein Beispiel für die App, die ausgeführt wird und Text im größeren linken Bereich des Fensters anzeigt.

Definieren einer Präsentations-Segue

Wir werden die rechte Seite der geteilten Ansicht so layouten, dass sie als Inspektor für die Eigenschaften des ausgewählten Texts fungiert. Wir ziehen einige Steuerelemente in die untere Ansicht, um die Benutzeroberfläche des Inspektors zu layouten. Für das letzte Steuerelement soll ein Popover angezeigt werden, mit dem der Benutzer aus vier voreingestellten Zeichenstilen auswählen kann.

Wir fügen dem Inspektor eine Schaltfläche und der Entwurfsoberfläche einen Ansichtscontroller hinzu. Wir ändern die Größe des Ansichtscontrollers auf die Größe, die unser Popover haben soll, und fügen vier Schaltflächen hinzu. Als Nächstes klicken sie bei gedrückter Taste auf die Schaltfläche in der Inspektoransicht und ziehen auf den Ansichtscontroller, der unser Popover darstellt:

Ziehen Sie, um eine neue Segue im Ansichtscontroller zu erstellen.

Wählen Sie im Popupmenü Popover aus:

Auswählen des Popover-Seguetyps aus dem Ansichtscontroller.

Schließlich wählen wir die Segue in der Entwurfsoberfläche aus und legen den bevorzugten Rand auf Links fest. Anschließend ziehen wir eine Linie aus der Ankeransicht auf die Schaltfläche, an die das Popover angefügt werden soll:

Ziehen Sie, um eine neue Segue zu erstellen, indem Sie die Ankeransicht an die Schaltfläche anfügen.

Wenn wir zu Visual Studio für Mac zurückkehren, führen Sie die App aus, und klicken Sie im Inspektor auf die Schaltfläche Keine, das Popover wird angezeigt:

Ein Beispiel für die ausgeführte Segue, die das Popover anzeigt.

Erstellen von App-Einstellungen

Die meisten standardmäßigen macOS-Apps bieten ein Einstellungsdialogfeld , in dem der Benutzer mehrere Optionen definieren kann, die verschiedene Aspekte der App steuern, z. B. Darstellung oder Benutzerkonten.

Um ein Standardeinstellungsdialogfenster zu definieren, ziehen Sie zunächst einen Tab-Ansichtscontroller auf die Entwurfsoberfläche:

Bearbeiten Sie das Storyboard in Xcode, indem Sie zuerst den Tab-Ansichtscontroller auf die Entwurfsoberfläche ziehen.

Auch hier werden automatisch zwei untergeordnete Ansichtscontroller angefügt. Beispielsweise fügen wir jeder Ansicht, die darin zentrieren wird, eine Bezeichnung hinzu:

Festlegen der Einschränkungen

Als Nächstes möchten wir das Fenster Einstellungen anzeigen, wenn der Benutzer das Menüelement Einstellungen... auswählt. Wählen Sie auf der Menüleiste das Menüelement Einstellungen aus, und klicken Sie bei gedrückter STRG-TASTE , und ziehen Sie eine Zeile auf den Registerkartenansichtscontroller:

Ziehen, um eine Segue zu erstellen

Wählen Sie im Popup die Option Modal aus, um dieses Fenster als modales Dialogfeld anzuzeigen:

Auswählen des modalen Segue-Typs aus dem Menü Aktion Segue.

Wenn wir die Änderungen speichern, zu Visual Studio für Mac zurückkehren, die App ausführen und das Menüelement Einstellungen... auswählen, wird das neue Dialogfeld Einstellungen angezeigt:

Ein Beispiel für die Ausführung des Segue mit dem neuen Dialogfeld

Möglicherweise stellen Sie fest, dass dies nicht wie ein standardmäßiges MacOS-App-Einstellungsdialogfenster aussieht. Um dies zu beheben, schließen Sie zwei Bilddateien in den Ordner der Xamarin.Mac-App Resources im Projektmappen-Explorer ein, und kehren Sie zum Interface Builder von Xcode zurück.

Wählen Sie den Registerkartenansichtscontroller aus, und wechseln Sie zuSymbolleiste:

Festlegen des Stils der Registerkartenleiste

Wählen Sie jede Registerkarte aus, und geben Sie ihr eine Bezeichnung , und wählen Sie eines der Bilder aus, die sie darstellen sollen:

Konfigurieren der einzelnen Registerkarten in Xcode

Wenn wir die Änderungen speichern, zu Visual Studio für Mac zurückkehren, die App ausführen und das Menüelement Einstellungen... auswählen, wird das Dialogfeld nun wie eine macOS-Standard-App angezeigt:

Beispiel für das Fenster mit den ausgeführten Einstellungen

Weitere Informationen finden Sie in der Dokumentation Arbeiten mit Bildern, Menüs, Windows und Dialogen .