Startbildschirme für xamarin. IOS-appsLaunch Screens for Xamarin.iOS Apps

In diesem Artikel wird erläutert, wie Sie einen app-Startbildschirm für alle IOS-Geräte in beliebiger Auflösung und Ausrichtung mithilfe eines einzelnen vereinheitlichten Storyboards erstellen.This article explains how to create an app Launch Screen for all iOS devices, at any resolution and orientation, using a single Unified Storyboard.

Vor IOS 8 erforderte das Erstellen eines Startbildschirms für eine IOS-APP, dass der Entwickler für jeden der verschiedenen Geräte Formfaktoren und-Lösungen, in denen die app ausgeführt werden konnte, ein Image-Asset bereitstellt.Before iOS 8, creating a Launch Screen for an iOS app required the developer to provide an image asset for each of the various device form factors and resolutions in which the app could run. Seit der Veröffentlichung von IOS 8 war es jedoch möglich, ein einzelnes einheitliches Storyboard zu verwenden, um einen Startbildschirm zu erstellen, der in allen Fällen richtig aussieht.Since the release of iOS 8, however, it has been possible to use a single Unified Storyboard to create a Launch Screen that looks correct in all cases.

In dieser kurzen exemplarischen Vorgehensweise wird beschrieben, wie ein Startbildschirm entweder mit einem in einem neuen Projekt standardmäßig bereitgestellten Storyboard oder mit einem manuell hinzugefügten Storyboard in einem vorhandenen Projekt erstellt wird.This brief walkthrough describes how to create a Launch Screen with either a Storyboard provided by default in a new Project or with a Storyboard added manually to an existing Project. Anschließend wird veranschaulicht, wie der IOS-Designer verwendet wird, um dem Storyboard eine Bildansicht und eine Bezeichnung hinzuzufügen, um Einschränkungen für diese Ansichten festzulegen und um zu überprüfen, ob das Storyboard für verschiedene Geräte und Ausrichtungen korrekt aussieht.It then demonstrates how to use the iOS Designer to add an Image View and a Label to the Storyboard, to set constraints on those views, and to verify that the Storyboard looks correct for various devices and orientations.

Verwalten von Start Bildschirmen mit StoryboardsManaging Launch Screens with Storyboards

In ios 8 (und höher) kann der Entwickler ein spezielles einheitliches Storyboard erstellen, um den Startbildschirm anstelle eines oder mehrerer statischer Start Images bereitzustellen.In iOS 8 (and later), the developer can create a special Unified Storyboard to provide the Launch Screen instead of using one or more static launch images. Wenn Sie ein Launch-Storyboard im IOS-Designer erstellen, verwenden Sie Größenklassen und automatisches Layout, um verschiedene Layouts für verschiedene Anzeige Umgebungen zu definieren.When creating a launch Storyboard in the iOS Designer, use Size Classes and Auto Layout to define different layouts for different display environments. Mithilfe von Größenklassen und automatischem Layout kann der Entwickler einen einzelnen Startbildschirm erstellen, der auf allen Geräten und Anzeige Umgebungen gut aussieht.By using Size Classes and Auto Layout, the developer can create a single launch screen that looks good on all devices and display environments.

  1. Erstellen Sie in Visual Studio für Mac ein neues Projekt, indem Sie Datei > neue Projekt Mappe und dann Einzelansicht-Appauswählen:In Visual Studio for Mac, create a new project by selecting File > New Solution and then choosing Single View App:

    Das Fenster "Neues Projekt" mit ausgewählter Einzelansicht-App

    • Standardmäßig enthält ein neues Projekt eine launchscreen. Storyboard -Datei, die die Startbildschirm-Schnittstelle definiert.By default, a new Project includes a LaunchScreen.storyboard file that defines the Launch Screen interface.
    • Wenn Sie einem vorhandenen Projekt stattdessen ein Storyboard für den Startbildschirm hinzufügen möchten, klicken Sie im Lösungspad mit der rechten Maustaste auf den Projektnamen, wählen Sie > neue Datei hinzufügen aus, und klicken Sie dann auf Startbildschirm:To instead add a Launch Screen Storyboard to an existing project, right-click on the project name in the Solution Pad and choose Add > New File... and then select Launch Screen:

    Das neue Datei Fenster mit ausgewähltem IOS-Startbildschirm

    • Nennen Sie die Datei " launchscreen " oder einen anderen Namen Ihrer Wahl.Name the file LaunchScreen or another name of your choosing.
  2. Konfigurieren Sie das Projekt so, dass das entsprechende Storyboard für den Startbildschirm verwendet wird:Configure the Project to use the appropriate Storyboard for its Launch Screen:

    • Doppelklicken Sie auf die Info. plist -Datei im Lösungspad , um Sie zur Bearbeitung zu öffnen.Double-click the Info.plist file in the Solution Pad to open it for editing.
    • Stellen Sie im Abschnitt Start Images sicher, dass Startbildschirm auf den Namen des entsprechenden Storyboards festgelegt ist:In the Launch Images section, make sure that Launch Screen is set to the name of the appropriate Storyboard:

    Die Startbildschirm Auswahl in "Info. plist"

    • Standardmäßig ist ein neues Projekt so konfiguriert, dass launchscreen. Storyboard als Startbildschirm verwendet wird.By default, a new Project is configured to use LaunchScreen.storyboard as its Launch Screen.
  3. Fügen Sie dem Assets. xcassets -Asset-Katalog ein Bild hinzu, damit es für die Verwendung auf dem Startbildschirm verfügbar ist.Add an image to the Assets.xcassets Asset Catalog so that it is available for use on the Launch Screen. Weitere Informationen finden Sie im Abschnitt Hinzufügen von Bildern zu einem Asset-Katalog Image Satz des Handbuchs Anzeigen eines Bild Handbuchs.For more information, see the Adding Images to an Asset Catalog Image Set section of the Displaying an Image guide.

  4. Öffnen Sie launchscreen. Storyboard zur Bearbeitung, indem Sie in der Lösungspadauf die Datei doppelklicken.Open LaunchScreen.storyboard for editing by double-clicking it in the Solution Pad.

  5. Wählen Sie ein Gerät und eine Ausrichtung aus, um eine Vorschau des Storyboards für den Startbildschirm im IOS-Designer anzuzeigen.Choose a device and orientation on which to preview the Launch Screen Storyboard in the iOS Designer. Öffnen Sie den Bereich Geräteauswahl in der unteren Symbolleiste , und wählenSie iPhone 4S und Hochformat aus.Open the device selection panel on the bottom toolbar and select iPhone 4S and Portrait.

    Die Geräteauswahl-Symbolleiste

    • Beachten Sie, dass beim Auswählen eines Geräts und einer Ausrichtung nur die Vorschau des Entwurfs durch den IOS-Designer geändert wird.Note that selecting a device and orientation only changes how the iOS Designer previews the design. 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 zum Bearbeiten von Merkmalen wurde verwendet, um anderweitig anzugeben.Regardless of the selection made here, newly added constraints are applied across all devices and orientations unless the Edit Traits button has been used to specify otherwise.
  6. Legen Sie die Hintergrund Farbe der Hauptansicht des Ansichts Controllers fest.Set the Background color of the View Controller's main View. Wählen Sie die Ansicht aus, indem Sie in der Mitte des Ansichts Controllers klicken und die Hintergrundfarbe mit dem Eigenschaftenpadanpassen:Select the View by clicking in the middle of the View Controller and adjust the background color using the Properties Pad:

    Eine einzelne Ansicht mit einer lila Hintergrundfarbe

  7. Fügen Sie dem Startbildschirm eine Bildansicht hinzu, und legen Sie das zugehörige Quell Imagefest:Add an Image View to the Launch Screen and set its source Image:

    • Ziehen Sie eine Bildansicht aus dem Werkzeugkasten der Toolbox in den Mittelpunkt der Ansicht.Drag an Image View from the Toolbox Pad to the center of the View.
    • Wenn die Bildansicht ausgewählt ist, legen Sie im Widget -Abschnitt des Eigenschaftenpad die Image -Eigenschaft auf die Image-Eigenschaft fest, die dem Assets. xcassets -Asset-Katalog bereits hinzugefügt wurde.With the Image View selected, in the Widget section of the Properties Pad set the Image property to the Image Set already added to the Assets.xcassets Asset Catalog. Positionieren Sie die Bildansicht nach Bedarf neu, und geben Sie Sie an:Reposition and size the Image View as required:

    Eine Bildansicht mit fest gelegteter Bild Eigenschaft

  8. Fügen Sie unterhalb der Bildansicht eine Bezeichnung hinzu, und verwenden Sie die Eigenschaftenpad , um die zugehörigen Attribute festzulegen:Add a Label below the Image View and use the Properties Pad to set its attributes:

    Eine Bezeichnung mit dem Text und dem Farbsatz

  9. Wechseln Sie zum Einschränkungs Bearbeitungsmodus, indem Sie die Rechte Schaltfläche in der Einschränkungs Symbolleisteverwenden:Switch to Constraint Editing Mode by using the right-hand button in the Constraints Toolbar:

    Schaltfläche zum Bearbeiten des Einschränkungs Modus

  10. Fügen Sie der BildansichtEinschränkungen hinzu, legen Sie Ihre Höhe und Breite fest, und zentrieren Sie Sie horizontal und vertikal:Add constraints to the Image View, setting its height and width and centering it horizontally and vertically:

    Eine Bildansicht mit Layouteinschränkungen

  11. Fügen Sie der BezeichnungEinschränkungen hinzu, zentrieren Sie Sie horizontal, geben Sie eine Höhe und Breite an, und positionieren Sie sie vertikal aus der Bildansicht:Add constraints to the Label, centering it horizontally, giving it a height and width, and positioning it a fixed distance vertically from the Image View:

    Eine Bezeichnung mit Layouteinschränkungen

  12. Testen Sie andere Geräte und Ausrichtungen, um zu überprüfen, ob der Entwurf in allen Szenarien als beabsichtigt aussieht.Test other devices and orientations to verify that the design looks as intended in all scenarios. 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 zum Bearbeiten von Merkmalen , um Einschränkungen für bestimmte Größenklassen hinzuzufügen:In cases where adjustments need to be made for a specific device or orientation, use the Edit Traits button to add constraints for specific size classes:

    Der als iPhone X gerenderte Startbildschirm mithilfe der quer Ausrichtung

  13. Speichern Sie die Änderungen am Storyboard.Save the changes to the Storyboard. Führen Sie die APP auf einem Simulator oder Gerät aus, und der Startbildschirm wird angezeigt, wenn die APP gestartet wird.Run the app on a simulator or device, and the Launch Screen will be visible as the app is launching.

Hinweis

Ein als Startbildschirm verwendetes Storyboard darf nur einfache, integrierte Benutzeroberflächen Elemente enthalten und kann keine Berechnungen ausführen oder von einer benutzerdefinierten Klasse abgeleitet werden.A Storyboard used as a Launch Screen must include only simple, built-in UI elements and cannot do any calculations or derive from a custom class.

Weitere Informationen zum Erstellen eines Startbildschirms mit einem einheitlichen Storyboard finden Sie im Abschnitt dynamische Startbildschirme des Themas Unified Storyboards .For more information about creating a Launch Screen with a Unified Storyboard, please see the Dynamic Launch Screens section of the Unified Storyboards guide.

Migrieren zu Startbildschirm-StoryboardsMigrating to Launch Screen Storyboards

Wenn Sie eine vorhandene App für die Verwendung von Storyboards für die Startbildschirme aktualisieren, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen , und wählen Sie Add > neue Dateihinzufügen aus. Wählen Sie IOS > -Startbildschirm aus, und klicken Sie auf neu :When updating an existing app to use Storyboards for its Launch Screens, right click the Project Name in the Solution Explorer and select Add > New File.... Select iOS > Launch Screen and click the New button:

IOS-Startbildschirm auswählen

Doppelklicken Sie dann auf die Info.plist Datei im Projektmappen-Explorer , um Sie zur Bearbeitung zu öffnen.Next, double-click the Info.plist file in the Solution Explorer to open it for editing. Wählen Sie unter Startbildschirmdie neue storyboarddatei aus, die oben erstellt wurde.Under Launch Screen, select the new Storyboard file created above.

Wählen Sie die oben erstellte neue storyboarddatei aus.

Gehen Sie folgendermaßen vor, um das neue Storyboard als Startbildschirm zu verwenden:To use the new Storyboard as a launch screen, do the following:

  1. Doppelklicken Sie auf die Info.plist Datei im Projektmappen-Explorer , um Sie für die Bearbeitung zu öffnen.Double-click the Info.plist file in the Solution Explorer to open it for editing.

  2. Scrollen Sie zum Abschnitt universelle Start Bilder des Editors, öffnen Sie die Dropdown Liste Startbildschirm , und wählen Sie den Namen des oben erstellten Storyboards aus:Scroll to the Universal Launch Images section of the editor, open the Launch Screen dropdown and select the name of the storyboard created above:

    Festlegen des Startbildschirms auf das Storyboard