Skip to end of metadata
Go to start of metadata

Building interface design for iOS apps can be done in two ways, creating a single interface definition representing each view for each device kind, or creating a single storyboard that contains multiple views supporting various layout size, also known as universal storyboards.

Introduced in iOS 8, along with the introduction of iPhone 6 and iPhone 6 Plus featuring different screen size, the universal storyboards allow you to create adaptive UI and layout that are optimized for every device size within a single storyboard. With more device size coming in the future, storyboards will be the definitive way to build adaptive iOS interface.

In version 4, Crosslight has been significantly improved to fully support iOS storyboards, specifically, enabling Crosslight navigation framework to automatically locate the views defined in the storyboard. As the result, you may continue using the same existing Crosslight navigation API you already familiar with, while allowing you to target a view within a storyboard.

If you’re new to Crosslight, please learn more about Crosslight navigation framework here.

On this page:

Overview

Storyboards let you easily design adaptive user interface and layout for various kind of iOS devices with different screen sizes. In addition, other benefits of using storyboards over the traditional single interface (.xib) are:

  • More convenience and simple way to design iOS interface. Instead of working with different IDE, you simply open the storyboard and work from within a single IDE, Xamarin Studio.
  • Leverage iOS modern auto layout and universal design. Since iOS 8, Apple encourages developers to design interfaces that are optimized for different orientation and size, also known as universal design. This type of design is only supported in storyboard format.
  • Rich design-time experience. You can now find Crosslight iOS components in the toolbox and easily drop them to the designer surface. Then, you can easily set the properties and set the control name in the Name textbox – all within the property window.
  • Streamlined workflow. You will find that auto-generated code from Xamarin iOS Designer is faster and more reliable as the designer is built into Xamarin's own development environment. This allows you to rapidly edit the interface and run the application to see the result.
  • Design multiple interface. You can design multiple interfaces in a single storyboard, allowing you to easily overview the related interfaces, preview and edit them simultaneously in different size and orientation. Thanks to the loosely-coupled integration to Crosslight navigation framework, each view controller will be automatically mapped to the respective named interface in the storyboard.

Working with Storyboards

In addition to Apple's Xcode, you can now use Xamarin's iOS designer to build interface using storyboard format. The latest Xamarin release, starting from version 5, has included full designer support for adaptive layout through size classes options. With Crosslight supporting storyboards, this means you can now streamline your development workflow entirely in Xamarin Studio.

By default, Crosslight iOS project templates do not include storyboard file. You can add a new storyboard file from the New Project Item dialog in either Xamarin Studio or Visual Studio on Windows. Once a storyboard file is added to your project, simply double click on the storyboard file to open the Xamarin iOS designer.

The following figure shows an overview of the iOS storyboard designer in Xamarin Studio.

Although you can also use Xcode to edit the storyboard file, please note that you will not be able to see and edit the Crosslight iOS controls which are built specifically for Xamarin's iOS designer. It's recommended to use Xamarin iOS designer for richer design-time experience and streamlined Crosslight application development workflow.
To learn more about working with the designer such as enabling auto layout and size classes, please refer to Xamarin > Introduction to the iOS Designer page.

Defining Class and Storyboard ID

Making storyboard works in Crosslight is straightforward with just a couple steps. You simply need to choose the View Controller to be associated to the particular view, and then set the Storyboard ID to the same name with the specified View Controller class name.

To do this, first click on the View Controller icon in Xamarin iOS Designer which will bring up the property window for the controller, then you can choose the View Controller from the Class dropdown as well as specifying the Storyboard ID provided in the property window. See the following figure.

Defining Storyboard Attribute

Once the designer configuration is completed as described in the previous section, the final step is to link the storyboard file name in the view controller class. Crosslight has provided a new attribute called StoryboardAttribute which determine which storyboard file in the project that contains the interface associated to the view controller. This attribute is required because your project may contain multiple storyboard files, so it's important for the view controller to aware which storyboard file to use to locate the target view.

Here is an example code of the StoryboardAttribute usage which refers to the MainStoryboard file in the project.

In addition, if your view controller was previously created along with an XIB definition, you will need to modify the constructor to use IntPtr handle overload such as shown in the example below.

When creating a new view controller that will be instantiated with a storyboard, please choose Crosslight iOS View Controller item template which will create an empty view controller class without including XIB file.

Navigating to the View

With several adjustments to the designer and code as described above, you can continue using Crosslight navigation API in the ViewModel – exactly the same code you already accustomed to. So if you are migrating an existing view controller from XIB to storyboard, there are no changes required at the core (ViewModel) layer.

For clarity, here is the example code to perform screen navigation with Crosslight navigation framework.

For more information about Crosslight navigation, see Designing Consistent Navigation Interface. To learn more about the API overloads, please refer to NavigationService class.