Launch Screens

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

PDF for offline use:
Sample Code:
Related Articles:

Let us know how you feel about this.


0/250
Thanks for the feedback!

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. 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.

If the project does not already include a LaunchScreen.storyboard, right-click on the Project Name and add one. Xamarin for Visual Studio currently doesn't offer support for setting a Storyboard as the Launch Screen from the Info.plist editor.

We suggest setting this property from Xamarin Studio on a Mac, once the property is set, the project can be reopened in Visual Studio without issue.

ℹ️

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.