Ruben Macias: Xamarin.iOS Apps: Adding Login/Signup Capabilities

In order to show the LoginPage, we need to make some modifications to our AppDelegate.cs file.  Remember, the AppDelegate is created for every Xamarin.iOS Project, and is the root object of your application.  When you create a Xamarin.iOS Storyboard application, the AppDelegate is automatically created, and will launch your MainStoryboard.storyboard InitialViewController (as set in the storyboard).

UITabBarController Properties. Set StoryboardID and as Intial View Controller.

The first thing we add is a private property called isAuthenticated.  This is actually optional, but if you want add AutoLogin capability, this is one way or doing it.  I don’t keep track if the user is automatically logged in this app.  So I just set this to false for simplicity.  If you need this capability, you would need a way to store a flag if the user wants to automatically log in every time they start the app.

The second thing we need to add is a public property called MainStoryboard.  This property will programmatically return an instance our our MainStoryboard.storyboard file.  We are going to call this several times since all of our UIViewControllers are defined in MainStoryboard.storyboard.

The third thing we need to add is a public method called GetViewController().  From the code above you can see that GetViewController() has two parameters.  The first parameter is an instance of the Storyboard where our ViewController is defined.  The second parameter is the name of the ViewController (aka StoryboardID) we want to instantiate.   With these two parameters, we can return an instance of any ViewController that is defined in the given Storyboard.  Remember to set the StoryboardID for each ViewController you want to dynamically instantiate.

Remember to set your Storyboard ID for each UIViewController.

The fourth thing we need to add is a public method called SetRootViewController().  SetRootViewController() requires two parameters.  The first parameter is an instance of our new RootViewController.  The second parameter is a boolean value.  If true is passed in, when we animate a transition when we change the RootViewController of our app.  If false, no animation occurs.  Also note the transition type.  I set it to UIViewAnimationOptions.TransitionFlipFromRight as it creates cool looking flip effect from right to left.  But you can set it to any transition type you want.  Just choose another enumeration from UIViewAnimationOptions.

The fifth and final thing we need to do is override the FinishedLaunching method().  This method will execute after the application has finished launching, and is ready to display our initial view controller.  By default, this method is not overriden, and will load the ViewController that is set as the “Initial View Controller” in MainStoryboard.storyboard.  But in this case, we want to dynamically set our RootViewController to our LoginPageViewController if our user is not already authenticated (i.e. Auto-Login is not enabled).  If our user is already authenticated (i.e. Auto-Login is enabled) we want to set our RootViewController to our UITabBarController.

You’ll also notice when we create an instance of the LoginPageViewController, we also wire an event for the OnLoginSuccess event (remember we defined this earlier).  So in our event handler, we want to create an instance of our UITabBarController, and set it as the application RootViewController.

So, when the application start up, we programmatically determine if we want to show the login page or not by setting the RootViewController of the application.  You’ll notice that we pass in false as the animation boolean parameter for SetRootViewController().  Animation isn’t necessary when we start up.  But for the OnLoginSuccess event handler, it is nice to have a cool animation effect when the user taps on the Login Button.

Logging Out

After you start the app, tap on the second tab on the UITabBar.  This will show the TabPage2ViewController.  On that view controller, you’ll see a log out button.  This is a simple implementation, but can bind this to anything you want, include a button on the Navigation Bar or a slide out menu option.