Xamarin iOS – multiscreen application in Xamarin Studio

Xamarin iOS – multiscreen application in Xamarin Studio

xamariniOS1

Short introduction

In this article I would like to show how to create multiscreen iOS application with Xamarin and what are two possible navigation options between screens (from the code and using Segues). I will use Xamarin Studio but of course its possible to do it with Visual Studio.

What do I need to start?

1) Xamarin Studio installed

2) Mac (In my case this is MAC Mini)

3) iOS emulator

Let’s start

1) Open Xamarin Studio and create new empty iOS project:

XamariniOS2

a) Select “New solution” -> “Single View App” and click “Next”

b) Type the name of your project. Mine is “MultiScreenAppDemo”. Unselect IPad. Then click “Next”:

XamariniOS3

c) On the next screen “Solution name” and “Project name” can stay like they are. Choose location for the project and click “Create” button:

XamariniOS4

d) After few seconds Xamarin iOS project is ready:

XamariniOS5

2) Add some screens to the storyboard:

It is worth to stop for a second and mention few words about iOS screens structure. Storyboard is a visual representation of the screens sequence in your app. One storyboard can contain many screens (scenes). Storyboard are available through the Designer.

a) Open “Main.storyboard” file:

XamariniOS6

b) Click the black bar on the bottom of the scene:

XamariniOS7

As you can see on the right side under “Identity” tab there is a class name and what you have already clicked is called Controller. iOS applications are created with Model-View-Controller pattern (you can read more about it here). Each controller has class assigned – in this case like you can see it is “ViewController” class.

On the left side you can see file in the solution explorer called “ViewController.cs”. Open it:

XamariniOS8

This class is pinned with the View Controller for the scene displayed in the “Main” storyboard.

“ViewDidLoad” method is called once view hierarchy is ready after launching the app.

“DidReceiveMemoryWarning” is used to release any unused resources to make the app more efficient.

In the “ViewDidLoad” method we can declare actions connected with selected scene.

3) Implement navigation programmatically:

There are two possible ways to implement navigation in the Xamarin iOS:

a) Through the code

b) With Segues

In this point we will concentrate on the first solution – using code.

1) Go back to the “Main.storyboard” and add one more View Controller to the storyboard. To do it you have to find it in the toolbox typing “view”. It should appear like in the picture below:

XamariniOS9

2) Drag “View Controller” on the storyboard next to previous Controller. Click on the dashed rectangle to fit the space:

XamariniOS10

3) Click on the bottom of the View Controller and on the right side type the name of the class under “Identity”: In my case I will call it “DetailsViewController” – remember that good practice is to name classes with “ViewController” suffix.

4) Click “enter” button. You should notice that “DetailsViewControler.cs” file was automatically added to the project (this is Xamarin default functionality):

XamariniOS12

5) Open “DetailsViewController” class and type “override ViewDidLoad” under the constructor – Xamarin intellisense will automatically show hint – click “enter” button. Method will be added:

XamariniOS13

6) Add button to the first ViewController – type button in the toolbox search window. Give it a name “ShowDetailsButton”:

XamariniOS14

7) When button is selected go to “Events” tab on the right side. Under “Touch” section find “Up Inside” and type: “ShowDetails” Click “enter” button. Xamarin will ask where to paste event handler method. Paste it under memory warning method:

XamariniOS15

XamariniOS16

8) Add label to the DetailsViewController. Use search window to find “label”. Paste it in the center of “DetailsViewController” Double click and change the display text to “Details Screen”:

XamariniOS17

9) Rebuild solution:

XamariniOS18

10) Now its time to add code responsible for navigation between screens:

Navigation from the code is possible only when View Controller has “Storyboard ID” added. Good practice is to use the same name as for the View Controller class. Select View Controller of Details Screen and fill “Storyboard ID” field:

XamariniOS20

11) Add the code responsible for the navigation:

partial void ShowDetails (UIButton sender)
{

//Get reference to the current storyboard:

UIStoryboard storyboard = this.Storyboard; 

//Create instance of DetailsViewController:

DetailsViewController viewController = (DetailsViewController)

//Instantiate storyboard with DetailsViewController:

storyboard.InstantiateViewController("DetailsViewController"); 

//Display DetailsViewController:

this.PresentViewController(viewController, true, null);
}

 

12) Launch the simulator and click button. You will see “Details Screen”:

XamariniOS21

That’s it! Now you now how to handle navigation through the code. Let’s see now how to use Segues.

4) Navigation with Segues:

1) Remove method responsible for handling button click in the code:

XamariniOS22

XamariniOS23

2) Go to the “Main.storyboard” Click on the button, hold “cntrl” and drag to the DetailsViewController (blue line should appear). Select “Show” under the “Action Segue”:

XamariniOS24

3) Launch the simulator and click the button. That’s all! Navigation is ready.

XamariniOS21

Sum up

I hope that this article will help you to start your adventure with Xamarin iOS apps. Nowadays multiscreen apps are something unavoidable and in this article you can find possible ways to implement navigation between screens in your app. Enjoy.

Advertisements