Quantcast
Channel: cocoa-touch – Sweettutos
Viewing all articles
Browse latest Browse all 5

Present a login screen before the tab bar controller in a UITabBarController based app [Objective-C and Swift]

0
0

Hello everybody, and happy new year for all of you :]

A while ago, I saw so many questions on SO enquiring about how to implement a login screen to the user before he gets to the home screen on a UITabBarController based app, same way like Pinterest, Facebook and so many apps behaving this obvious way.

So I am writing this quick tutorial to show you how to do that easily in Xcode5.

As usual, you can download the source code below 😉

Open up Xcode, choose the ’empty application’ template, it’s more suitable than the ‘tabbed’ template here because I need you to do all from scratch for your better understanding.

Name the project ‘LoginTabbedApp’, set the device target for iPhone and click ‘Next’, save the project and click ‘Create’.

Pretty sweet, now run the app. So far, you get an empty screen. Let’s made two tab bar items with their controllers and add them to your tab bar controller, let’s call them ‘Home’ and ‘Settings’.

Select your project folder in the project navigator, select ‘New File…’, from the left menu, choose ‘Cocoa Touch’, then from the list, choose the ‘Objective-C’ class, click `Next`. On the next screen, type in ‘HomeViewController’ as the class name and make sure it’s a subclass of a ‘UIViewController’ (of course it could be another superclass, but let’s keep it simple).

Make sure the ‘With XIB for user interface’ option is checked then click ‘Next’, and ‘Create’ buttons.

Now repeat the same work you did for the ‘HomeViewController’ to create a second view controller for the settings tab, call it ‘SettingsViewController’. Don’t be lazy, come on 😀

Here is how the project navigator should look like so far:

Project Navigator

Cool, I invite you to add some labels to both ‘HomeViewControllers’ and ‘SettingsViewController’ xib files for reference.

Now, you should implement the ‘UITabBarController’ with the home and settings tabs.

Switch to the ‘AppDelegate.h’ file and add the following property for the tab bar controller:

@property(nonatomic,strong)UITabBarController *tabBarController;

Now select the ‘AppDelegate.m’ file, and change the ‘application:didFinishLaunchingWithOptions:’ method code to the following:

    //init the view controllers for the tabs, Home and settings

    //Home controller
    HomeViewController *homeVC = [[HomeViewController alloc]init];
    homeVC.tabBarItem.title = @"Home";
    //Settings controller
    SettingsViewController *settingsVC = [[SettingsViewController alloc]init];
    settingsVC.tabBarItem.title = @"Settings";

    //init the UITabBarController

    self.tabBarController = [[UITabBarController alloc]init];
    self.tabBarController.viewControllers = @[homeVC,settingsVC];

    //Add the tab bar controller to the window
    [self.window setRootViewController:self.tabBarController];

I commented the code above so I guess it’s self explanatory. You just init two instances for the home and settings view controllers which will get displayed when switching between tabs, then init the ‘UITabBarController’ instance, add the Home and settings controllers to the ‘viewControllers’ array property of the tab bar controller. Finally, and that’s the most important, you add the tab bar controller to the root view controller of your application window (otherwise, it will not be displayed).

Don’t forget to import the ‘HomeViewController’ and ‘SettingsViewController’ in the top of the file:

#import "HomeViewController.h";
#import "SettingsViewController.h";

Run the app, switch between the two tabs to check everything is fine.
Setting up the UITabBarController on the app window

Now you are going to add the login view controller which should be displayed to the user before the tab bar controller, right ?

Remember how you made ‘HomeViewController’ and ‘SettingsViewController’ ? I want you to made another view controller called ‘LoginViewController’. quickly, you got 8 seconds to do that.

Ok, here is your new Project Navigator:

Add a login view controller

Select ‘LoginViewController.xib’ file and add a label and a button, like below:

set the Login xib file

Now, in order to display the Login screen first to the user, you will need to set the ‘LoginViewController’ object as the root controller of your app window instead of the tab bar controller object. Make sense, hein?

To do so, switch to ‘AppDelegate.m’, import the ‘LoginViewController.h’ at the top of the file, then change the ‘application:didFinishLaunchingWithOptions:’ method to look as below:

    //init the view controllers for the tabs, Home and settings

    //Home controller
    HomeViewController *homeVC = [[HomeViewController alloc]init];
    homeVC.tabBarItem.title = @"Home";
    //Settings controller
    SettingsViewController *settingsVC = [[SettingsViewController alloc]init];
    settingsVC.tabBarItem.title = @"Settings";

    //init the UITabBarController

    self.tabBarController = [[UITabBarController alloc]init];
    self.tabBarController.viewControllers = @[homeVC,settingsVC];

    //Add the login view controller as the root controller of the app window
    LoginViewController *loginVC = [[LoginViewController alloc]init];
    [self.window setRootViewController:loginVC];

Now run the app, you should see the Login screen after the app launch.

Notice how you assigned the login controller to be the root controller of the window, that’s the main reason why it’s was shown first after the app launch and not the tab bar controller because now it’s on the top level of your app hierarchy since it’s the ‘root’ of the ‘UIWindow’ object.

Ok, so far so good. But after signing in, you need to get rid of that login screen and show the tab bar controller, because there where your user is supposed to spend most of his time on the app.

So you added a button to the login screen, let’s define an action method for it.

Select ‘LoginViewController.xib’, then switch to the assistant editor on the top menu.
assistant editor in Xcode

Make sure ‘LoginViewController.h’ is selected for the second editor:

select LoginViewController.h

Then hold a ctrl click and drag a line from the xib file to the .h file like below:

define an action method directly from the xib file

In the popup panel, fill in the following informations: name, type, event, etc:

configure an action method

Finally, switch to ‘LoginViewController.m’, import the ‘AppDelegate.h’ file at the top. Locate the ‘- (IBAction)signInAction:(id)sender’ method added automatically by Xcode for you and implement the following code inside:


    AppDelegate *appDelegate = [UIApplication sharedApplication].delegate;
    [appDelegate.window setRootViewController:appDelegate.tabBarController];

You got it :)

The idea is to alter the window’s ‘rootViewController’ property, if the Login screen should be displayed, then put it as the root controller. And if it’s time to show the tab bar controller, then put the tab bar controller as the root.

Run the app, and click the sign in button. Success!

That’s it, you got the idea, now you can implement a sign out button by yourself to redirect your users back to the login screen :)

Note: You can also customise the transition of the root view controller by implementing a nice animation, I wrote about that on our forum discussion here.

Here you can download the final project for this tutorial.

Update: As Marcos requested in the comment, here is a Swift version updated for this tutorial :)

Please leave a comment below and let me know how you implemented that in your app. Bring your idea here so we can discuss and share together.


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images