Startbildschirme für Xamarin.iOS-Apps

In diesem Artikel wird erläutert, wie Sie einen App-Startbildschirm für alle iOS-Geräte mit jeder Auflösung und Ausrichtung mithilfe eines einzigen Unified Storyboards erstellen.

Warnung

Der iOS Designer ist seit Visual Studio 2019, Version 16.8, und Visual Studio 2019 für Mac, Version 8.8, veraltet und wurde in Visual Studio 2019, Version 16.9, bzw. Visual Studio für Mac, Version 8.9, entfernt. Die empfohlene Methode zum Erstellen von iOS-Benutzeroberflächen ist direkt auf einem Mac mit Xcode. Weitere Informationen finden Sie unter Entwerfen von Benutzeroberflächen mit Xcode.

Vor iOS 8 musste der Entwickler beim Erstellen eines Startbildschirms für eine iOS-App eine Bildressource für jeden der verschiedenen Geräteformfaktoren und -auflösungen bereitstellen, in denen die App ausgeführt werden kann. Seit der Veröffentlichung von iOS 8 ist es jedoch möglich, ein einzelnes Unified Storyboard zu verwenden, um einen Startbildschirm zu erstellen, der in allen Fällen korrekt aussieht.

In dieser kurzen exemplarischen Vorgehensweise wird beschrieben, wie Sie einen Startbildschirm mit einem Storyboard erstellen, das standardmäßig in einem neuen Projekt oder mit einem Storyboard erstellt wird, das einem vorhandenen Projekt manuell hinzugefügt wurde. Anschließend wird veranschaulicht, wie Sie mit dem iOS-Designer dem Storyboard eine Bildansicht und eine Bezeichnung hinzufügen, Einschränkungen für diese Ansichten festlegen und überprüfen, ob das Storyboard für verschiedene Geräte und Ausrichtungen korrekt aussieht.

Verwalten von Startbildschirmen mit Storyboards

In iOS 8 (und höher) kann der Entwickler ein spezielles Unified Storyboard erstellen, um den Startbildschirm bereitzustellen, anstatt mindestens ein statisches Startimage zu verwenden. Verwenden Sie beim Erstellen eines Start-Storyboards im iOS-Designer Größenklassen und das automatische Layout, um unterschiedliche Layouts für verschiedene Anzeigeumgebungen zu definieren. Mithilfe von Größenklassen und dem automatischen Layout kann der Entwickler einen einzelnen Startbildschirm erstellen, der auf allen Geräten und Anzeigeumgebungen gut aussieht.

Visual Studio für Mac

1. Erstellen Sie in Visual Studio für Mac ein neues Projekt, indem Sie "Neue Projektmappe speichern" und dann "Einzelansichts-App" auswählen:>

   

   • Standardmäßig enthält ein neues Projekt eine LaunchScreen.storyboard-Datei , die die Startbildschirmschnittstelle definiert.
   • Wenn Sie einem vorhandenen Projekt stattdessen ein Startbildschirm-Storyboard hinzufügen möchten, klicken Sie im Projektblock mit der rechten Maustaste auf den Projektnamen, und wählen Sie " Neue Datei hinzufügen > " aus, und wählen Sie dann "Startbildschirm" aus:

   

   • Benennen Sie die Datei LaunchScreen oder einen anderen Namen Ihrer Wahl.

2. Konfigurieren Sie das Projekt so, dass das entsprechende Storyboard für den Startbildschirm verwendet wird:

   • Doppelklicken Sie auf die Datei "Info.plist " im Lösungspad , um sie zur Bearbeitung zu öffnen.
   • Stellen Sie im Abschnitt "Startbilder " sicher, dass der Startbildschirm auf den Namen des entsprechenden Storyboards festgelegt ist:

   

   • Standardmäßig ist ein neues Projekt für die Verwendung von LaunchScreen.storyboard als Startbildschirm konfiguriert.

3. Fügen Sie dem Objektkatalog "Assets.xcassets " ein Bild hinzu, damit es auf dem Startbildschirm verwendet werden kann. Weitere Informationen finden Sie im Abschnitt zum Hinzufügen von Bildern zu einem Objektkatalogbildsatz im Abschnitt "Anzeigen eines Bildleitfadens" .

4. Öffnen Sie LaunchScreen.storyboard zum Bearbeiten, indem Sie auf dem Lösungspad darauf doppelklicken.

5. Wählen Sie ein Gerät und eine Ausrichtung aus, auf dem das Startbildschirm-Storyboard im iOS-Designer in der Vorschau angezeigt werden soll. Öffnen Sie den Geräteauswahlbereich auf der unteren Symbolleiste, und wählen Sie i Telefon 4S und Hochformat aus.

   

   • Beachten Sie, dass die Auswahl eines Geräts und der Ausrichtung nur ändert, wie der iOS-Designer das Design in der Vorschau anzeigt. Unabhängig von der hier getroffenen Auswahl werden neu hinzugefügte Einschränkungen auf alle Geräte und Ausrichtungen angewendet, es sei denn, die Schaltfläche "Eigenschaften bearbeiten" wurde verwendet, um andernfalls anzugeben.

6. Legen Sie die Hintergrundfarbe der Standard Ansicht des Ansichtscontrollers fest. Wählen Sie die Ansicht aus, indem Sie in der Mitte des Ansichtscontrollers klicken und die Hintergrundfarbe mithilfe des Eigenschaftenpads anpassen:

   

7. Fügen Sie dem Startbildschirm eine Bildansicht hinzu, und legen Sie dessen Quellbild fest:

   • Ziehen Sie eine Bildansicht vom Toolboxpad in die Mitte der Ansicht.
   • Wenn die Bildansicht ausgewählt ist, legen Sie im Abschnitt "Widget" des Eigenschaftenpads die Bildeigenschaft auf den Bildsatz fest, der dem Objektkatalog "Assets.xcassets" bereits hinzugefügt wurde. Ändern Sie die Position und Größe der Bildansicht nach Bedarf:

   

8. Fügen Sie unter der Bildansicht eine Beschriftung hinzu, und verwenden Sie das Eigenschaftenkreuz, um die Attribute festzulegen:

   

9. Wechseln Sie in den Einschränkungsbearbeitungsmodus mithilfe der rechten Schaltfläche in der Symbolleiste für Einschränkungen:

   

10. Fügen Sie der Bildansicht Einschränkungen hinzu, legen Sie die Höhe und Breite fest, und zentrieren Sie sie horizontal und vertikal:

    

    • Weitere Informationen zum Hinzufügen von Einschränkungen finden Sie unter "AutoLayout" mit dem Xamarin-Designer für iOS.

11. Fügen Sie der Bezeichnung Einschränkungen hinzu, zentrieren Sie sie horizontal, sodass sie höhe und breite wird, und positionieren Sie sie vertikal von der Bildansicht aus in einem festen Abstand:

    

12. Testen Sie andere Geräte und Ausrichtungen, um zu überprüfen, ob das Design in allen Szenarien wie vorgesehen aussieht. In Fällen, in denen Anpassungen für ein bestimmtes Gerät oder eine bestimmte Ausrichtung vorgenommen werden müssen, verwenden Sie die Schaltfläche "Eigenschaften bearbeiten", um Einschränkungen für bestimmte Größenklassen hinzuzufügen:

    

13. Speichern Sie die Änderungen im Storyboard. Führen Sie die App auf einem Simulator oder Gerät aus, und der Startbildschirm wird angezeigt, wenn die App gestartet wird.

Visual Studio

1. Erstelle ein neues Projekt. Wählen Sie in Visual Studio ">Neues > Projekt > Visual C# > i Telefon & iPad > iOS-App (Xamarin)" aus:

   

   Wählen Sie die Vorlage "Einzelansicht-App " aus, und klicken Sie dann auf "OK":

   

2. Wenn "Resources > LaunchScreen.xib" im Projektmappen-Explorer vorhanden ist, löschen Sie es, indem Sie mit der rechten Maustaste auf die Datei klicken und "Löschen" auswählen. Diese Datei wird im nächsten Schritt durch ein Storyboard ersetzt.

3. Erstellen Sie ein Storyboard, das als Startbildschirm verwendet werden soll. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie "Neues Element hinzufügen>" gefolgt von "Leeres Storyboard" aus. Nennen Sie dieses Storyboard LaunchScreen.storyboard , und klicken Sie auf "Hinzufügen":

   

4. Konfigurieren Sie das Projekt so, dass launchScreen.storyboard als Startbildschirm-Storyboard verwendet wird:

   • Doppelklicken Sie auf die info.plist-Datei im Projektmappen-Explorer, um sie zu öffnen und zu bearbeiten.
   • Legen Sie auf der Registerkarte "Visuelle Ressourcen" den Startbildschirm auf "LaunchScreen" fest.

   

5. Fügen Sie einem Objektkatalog im Projekt ein Bild hinzu, damit es auf dem Startbildschirm verwendet werden kann:

   • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Objektkataloge, und wählen Sie "Objektkatalog hinzufügen" aus. Benennen Sie diese neuen Objektkatalogobjekte:

   

   • Fügen Sie dem Objektkatalog einen neuen Bildsatz hinzu, wie im Abschnitt Zum Hinzufügen von Bildern zu einem Objektkatalog-Bildsatz im Abschnitt "Anzeigen eines Bildleitfadens" beschrieben.

6. Öffnen Sie LaunchScreen.storyboard zum Bearbeiten, indem Sie im Projektmappen-Explorer darauf doppelklicken.

   • Zum Bearbeiten einer Storyboarddatei benötigt Visual Studio eine aktive Verbindung mit einem Mac-Buildhost. Ausführliche Informationen finden Sie in der Verbinden zum Mac-Handbuch.

7. Wählen Sie ein Gerät und eine Ausrichtung aus, auf dem das Startbildschirm-Storyboard im iOS-Designer in der Vorschau angezeigt werden soll. Öffnen Sie den Geräteauswahlbereich auf der unteren Symbolleiste, und wählen Sie i Telefon 4S und Hochformat aus:

   

   • Beachten Sie, dass die Auswahl eines Geräts und der Ausrichtung nur ändert, wie der iOS-Designer das Design in der Vorschau anzeigt. Unabhängig von der hier getroffenen Auswahl werden neu hinzugefügte Einschränkungen auf alle Geräte und Ausrichtungen angewendet, es sei denn, die Schaltfläche "Eigenschaften bearbeiten" wurde verwendet, um andernfalls anzugeben.

8. Fügen Sie dem Storyboard einen Ansichtscontroller hinzu, indem Sie einen Von der Toolbox auf die Entwurfsoberfläche ziehen:

   

9. Legen Sie die Hintergrundfarbe der Standard Ansicht des Ansichtscontrollers fest. Wählen Sie die Ansicht aus, indem Sie in der Mitte des Ansichtscontrollers klicken und die Hintergrundfarbe mithilfe des Eigenschaftenfensters anpassen:

   

10. Fügen Sie dem Startbildschirm eine Bildansicht hinzu, und legen Sie dessen Quellbild fest:

    • Ziehen Sie eine Bildansicht aus der Toolbox in die Mitte der Ansicht.
    • Wenn die Bildansicht weiterhin ausgewählt ist, legen Sie im Abschnitt "Widget" des Eigenschaftenfensters die Bildeigenschaft auf den Bildsatz fest, der dem Objektkatalog "Assets" bereits hinzugefügt wurde. Ändern Sie die Position und Größe der Bildansicht nach Bedarf:

    

11. Fügen Sie unter der Bildansicht eine Beschriftung hinzu:

    • Ziehen Sie eine Beschriftung aus der Toolbox auf die Entwurfsoberfläche, und platzieren Sie sie unter der Bildansicht.
    • Legen Sie Attribute für die Bezeichnung mithilfe des Eigenschaftenfensters fest:

    

12. Wechseln Sie in den Einschränkungsbearbeitungsmodus mithilfe der rechten Schaltfläche in der Symbolleiste für Einschränkungen:

    

13. Fügen Sie der Bildansicht Einschränkungen hinzu, legen Sie die Höhe und Breite fest, und zentrieren Sie sie horizontal und vertikal:

    

    • Informationen zum Hinzufügen von Einschränkungen finden Sie unter "AutoLayout" mit dem Xamarin-Designer für iOS.

14. Fügen Sie der Bezeichnung Einschränkungen hinzu, zentrieren Sie sie horizontal, sodass sie höhe und breite wird, und positionieren Sie sie vertikal von der Bildansicht aus in einem festen Abstand:

    

15. Testen Sie andere Geräte und Ausrichtungen, um zu überprüfen, ob das Design in allen Szenarien wie vorgesehen aussieht. In Fällen, in denen Anpassungen für ein bestimmtes Gerät oder eine bestimmte Ausrichtung vorgenommen werden müssen, verwenden Sie die Schaltfläche "Eigenschaften bearbeiten", um Einschränkungen für bestimmte Größenklassen hinzuzufügen:

    

16. Speichern Sie die Änderungen im Storyboard. Führen Sie die App auf einem Simulator oder Gerät aus, und der Startbildschirm wird angezeigt, wenn die App gestartet wird.

Hinweis

Ein Storyboard, das als Startbildschirm verwendet wird, darf nur einfache, integrierte UI-Elemente enthalten und kann keine Berechnungen ausführen oder von einer benutzerdefinierten Klasse abgeleitet werden.

Weitere Informationen zum Erstellen eines Startbildschirms mit einem Unified Storyboard finden Sie im Abschnitt "Dynamische Startbildschirme " des Unified Storyboards-Handbuchs .

Migrieren zu Startbildschirm-Storyboards

Visual Studio für Mac

Wenn Sie eine vorhandene App aktualisieren, um Storyboards für die Startbildschirme zu verwenden, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie "Neue Datei hinzufügen>..." aus. Wählen Sie den iOS-Startbildschirm> aus, und klicken Sie auf die Schaltfläche "Neu":

Doppelklicken Sie als Nächstes auf die Info.plist Datei im Projektmappen-Explorer, um sie zur Bearbeitung zu öffnen. Wählen Sie unter "Startbildschirm" die oben erstellte neue Storyboarddatei aus.

Gehen Sie wie folgt vor, um das neue Storyboard als Startbildschirm zu verwenden:

1. Doppelklicken Sie auf die Info.plist Datei in der Projektmappen-Explorer, um sie zur Bearbeitung zu öffnen.

2. Scrollen Sie zum Abschnitt "Universelle Startbilder " des Editors, öffnen Sie das Dropdownmenü "Startbildschirm ", und wählen Sie den Namen des oben erstellten Storyboards aus:

   

Visual Studio

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie "Neue Datei hinzufügen>..." aus:

   

2. Geben Sie einen Namen für den Startbildschirm ein, und klicken Sie auf die Schaltfläche "Hinzufügen ":

   

3. Doppelklicken Sie im Projektmappen-Explorer auf die neu erstellte Storyboarddatei, um sie zur Bearbeitung zu öffnen.

4. Stellen Sie sicher, dass die Size-Klasse auf "any:any" und "View As is Generic" festgelegt ist:

   

5. Assembly the launch screen from Size Classes, simple UI elements (such as UIImageView) and images that you have included in the application's bundle:

   

6. Speichern Sie die Änderungen im Storyboard.

Verwandte Links

• Einheitliche Storyboards
• iOS-Designer-Grundlagen
• Hinzufügen von Bildern zu einem Objektkatalog-Bildsatz
• Automatisches Layout mit dem Xamarin Designer für iOS
• Richtlinien für die menschliche Benutzeroberfläche: Startbildschirm