VISUAL STUDIO   Windows Mac

Launch Screens

Using a Storyboard as a Launch Screen in Xamarin.iOS.

PDF for offline use
Sample Code:
Related Articles:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

last updated: 2017-05

This article covers using a special type of Storyboard to provide a universal Launch Screen for every iOS device size and resolution.

Overview

The following topics will be covered in detail:

  • Managing Launch Screens with Storyboards - How to use a special Universal Storyboard to supply the Launch Screen for every iOS device, resolution and orientation instead of providing individual bitmaps.

Managing Launch Screens with Storyboards

In iOS 9 (and later), the developer can create a special Unified Storyboard to provide the Launch Screen instead of using one or more static launch images. When creating a launch Storyboard in the iOS Designer, use Size Classes and Auto Layout to define different layouts for different display environments. By using Size Classes and Auto Layout, the developer can create a single launch screen that looks good on all devices and display environments.

To create a Unified Storyboard, do the following:

  1. In the Solution Explorer, double-click the LaunchScreen.storyboard file to open it for editing.
  2. Ensure that the Size Class is set to any:any and the View As is Generic:

  3. Set the background color of the main View:

  4. Drag an Image View from the Toolbox into the design surface and set it at the center of the screen:

  5. Set the source of the Image (as an Image added to the project as an Asset Catalog) in the Property Explorer and reposition and size the image as required:

  6. Add a Label under the Image View, set its Title, size, position and style it as required:

  7. Double-click the Image View and add Constraints to keep the Image the same height and width and center the Image View in the screen:

  8. Select the Label and add Constraints to keep the it the same height and width, center it in the screen and drag the top "T" handle to the bottom of the Image View to keep it the same distance away:

  9. Save the changes to the Storyboard.
  1. If the project does not already include a LaunchScreen.storyboard, right-click on the Project Name and add a new Empty Storyboard called LaunchScreen.
  2. Double-click the Info.Plist file in the Solution Explorer to open it for editing:

  3. Select the Visual Assets tab, then select LaunchScreen from the Source dropdown in the Launch Images section:

    Select <code>LaunchScreen</code>

  4. In the Solution Explorer, double-click the LaunchScreen.storyboard file to open it for editing.
  5. Ensure that the Size Class is set to any:any and the View As is Generic:

  6. Set the background color of the main View:

  7. Drag an Image View from the Toolbox into the design surface and set it at the center of the screen:

  8. Set the source of the Image (as an Image added to the project as an Asset Catalog) in the Property Explorer and reposition and size the image as required:

  9. Add a Label under the Image View, set its Title, size, position and style it as required:

  10. Double-click the Image View and add Constraints to keep the Image the same height and width and center the Image View in the screen:

  11. Select the Label and add Constraints to keep the it the same height and width, center it in the screen and drag the top "T" handle to the bottom of the Image View to keep it the same distance away:

  12. Save the changes to the Storyboard.
ℹ️

NOTE: For a storyboard to be used as a launch screen it must include only simple, built-in UI elements and cannot do any calculations or be based off of a custom class.

For more information on laying out a Storyboard Launch Screen, please see the section Dynamic Launch Screens of our Introduction to Unified Storyboards documentation.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.