iPhone App Development Tutorial – Add an Intro View to a Tab Bar App

This tutorial is on adding an intro view to your app. In this instance we’ll be adding it to a tab bar app. This is not the use of a splash view. A splash view is one which is shown each time an app loads and is only shown for a few short seconds, going away without any user interaction. Our intro view will be one that is shown at a specific time, mostly when the app is loaded for the first time. The view will stay visible until the user takes some action to dismiss the view. We will be showing our view modally and using a boolean to determine whether to show the view when the app is loaded. In addition we will be storing the boolean in a plist and loading it’s value to determine whether to show our intro view.

So now that we’ve laid out what we want to do, let’s get started.

Simulator Shot

1.) Let’s start by creating a tab app and naming it IntroViewTutorial. I don’t really like to use the Storyboard, but definitely use Automatic Reference Counting.

Create Tabbed App

Name The App IntroViewController

2.) The first thing we’ll do is add the plist and create a Boolean. Select New > New File > Resource > Property List, and name it IntroViewData.plist

Create a new Property List

3.) After creating the plist, open it up and add a Boolean value. You can do this by either right clicking in the file and selecting Add Row.

Add Row to plist

Or with the plist selected,

Select plist

Go to the Editor menu and select Add Item.

Add Item to plist

Create the item with a Key of showIntroView, make it a Boolean, and give it an initial value of YES.

Create Boolean in plist

Save the plist.

4.) Next we’re going to change the FirstViewController.xib. Deleted the labels and add two buttons.

Change First View Controller

5.) Open FirstViewController.m and we’ll implement the plist methods. We’re going to add two IBActions that we’ll call from the buttons. These methods save a value in plist. I could have combined these into one method, but decided to keep it simple for now.

- (IBAction)showIntroView
{
    // get paths from root directory
    NSArray *paths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);
    // get documents path
    NSString *documentsPath = [paths objectAtIndex:0];
    // get the path to our Data/plist file
    NSString *plistPath = [documentsPath stringByAppendingPathComponent:@"IntroViewData.plist"];
    
    Boolean noBool = YES;
    
    // create dictionary with values in UITextFields
    NSDictionary *plistDict = [NSDictionary dictionaryWithObjects: [NSArray arrayWithObjects: [NSNumber numberWithBool:noBool], nil] forKeys:[NSArray arrayWithObjects: @"showIntroView", nil]];
    
    NSString *error = nil;
    // create NSData from dictionary
    NSData *plistData = [NSPropertyListSerialization dataFromPropertyList:plistDict format:NSPropertyListXMLFormat_v1_0 errorDescription:&error];
    
    // check is plistData exists
    if(plistData)
    {
        // write plistData to our Data.plist file
        [plistData writeToFile:plistPath atomically:YES];
    }
    else
    {
        NSLog(@"Error in saveToPlist, IntroViewData does not exist: %@", error);
    }
}

- (IBAction)dontShowIntroView
{
    // get paths from root directory
    NSArray *paths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);
    // get documents path
    NSString *documentsPath = [paths objectAtIndex:0];
    // get the path to our Data/plist file
    NSString *plistPath = [documentsPath stringByAppendingPathComponent:@"IntroViewData.plist"];
    
    Boolean yesBool = NO;
    
    // create dictionary with values in UITextFields
    NSDictionary *plistDict = [NSDictionary dictionaryWithObjects: [NSArray arrayWithObjects: [NSNumber numberWithBool:yesBool], nil] forKeys:[NSArray arrayWithObjects: @"showIntroView", nil]];
    
    NSString *error = nil;
    // create NSData from dictionary
    NSData *plistData = [NSPropertyListSerialization dataFromPropertyList:plistDict format:NSPropertyListXMLFormat_v1_0 errorDescription:&error];
    
    // check is plistData exists
    if(plistData)
    {
        // write plistData to our Data.plist file
        [plistData writeToFile:plistPath atomically:YES];
    }
    else
    {
        NSLog(@"Error in saveToPlist, IntroViewData does not exist: %@", error);
    }
}

After creating the IBActions, hook them up to the buttons in the view.
Hook up IBActions to button

6.) Now that we are saving a value into the plist let’s access that value in the app delegate and read it. We’ll starts by just writing the value to the console. We read in the plist in the application:didFinishLaunchingWithOptions method.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    
    // setting up the tabs
    UIViewController *viewController1 = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
    UIViewController *viewController2 = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
    self.tabBarController = [[UITabBarController alloc] init];
    self.tabBarController.viewControllers = [NSArray arrayWithObjects:viewController1, viewController2, nil];
    self.window.rootViewController = self.tabBarController;
    [self.window makeKeyAndVisible];
    
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^ plist section ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    // IntroViewData.plist code
    // get paths from root direcory
    NSArray *paths = NSSearchPathForDirectoriesInDomains (NSDocumentDirectory, NSUserDomainMask, YES);
    // get documents path
    NSString *documentsPath = [paths objectAtIndex:0];
    // get the path to our data/plist file
    NSString *plistPath = [documentsPath stringByAppendingPathComponent:@"IntroViewData.plist"];
    
    // check to see if Data.plist exists in documents
    if (![[NSFileManager defaultManager] fileExistsAtPath:plistPath])
    {
        // if not in documents, get property list from main bundle
        plistPath = [[NSBundle mainBundle] pathForResource:@"IntroViewData" ofType:@"plist"];
    }
    
    // read property list into memory as an NSData object
    NSData *plistXML = [[NSFileManager defaultManager] contentsAtPath:plistPath];
    NSString *errorDesc = nil;
    NSPropertyListFormat format;
    // convert static property list into dictionary object
    NSDictionary *temp = (NSDictionary *)[NSPropertyListSerialization propertyListFromData:plistXML mutabilityOption:NSPropertyListMutableContainersAndLeaves format:&format errorDescription:&errorDesc];
    if (!temp)
    {
        NSLog(@"Error reading plist: %@, format: %d", errorDesc, format);
    }
    
    BOOL showIntroView = [[temp objectForKey:@"showIntroView"] boolValue];
    
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^ end plist section ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    
    NSLog(@"showIntroView = %d", showIntroView);
    
    return YES;
}

When we print the value to the console it will be represented by a decimal, 1 for YES, and 0 for NO.

You can run the app at this point and check the console, click the buttons to change the value, close the app, run it again and see that the value is being saved in the plist.

7.) Now let’s create our Intro View. Select File > New File > UIViewController subview and name it IntroViewController. Open the xib and add a button that will dismiss the view.

Create Intro View

8.) Open the IntroViewController.m file and add a method to dismiss the modal view.

- (IBAction)dismissTheModalView
{
    [self dismissModalViewControllerAnimated:YES];
}

Then connect it the button in the view.

9.) Open the app delegate implementation file and import our new IntroViewController.

#import "IntroViewController.h"

Then declare a IntroViewController and add an if block to check for the Boolean value we saved into the plist. If the value it true we’ve display our intro view modally.

 IntroViewController *introView = [[IntroViewController alloc] initWithNibName:@"IntroViewController" bundle:[NSBundle mainBundle]];
    
if (showIntroView) 
{
	[self.window.rootViewController presentModalViewController:introView animated:NO];
}

That is all there is to it. Run the app and try it out. I’m currently working on an app that shows a list in a table view, but only after the user adds some data to be shown in the table. So I show the intro view only when there is not data saved to be shown in the table. If there is data saved the app goes straight to the table.

Final Simulator Shot


Here’s the code.



This entry was posted in Data, Tab Bar, Uncategorized, Xcode 4.2 and tagged , , , , . Bookmark the permalink.

9 Responses to iPhone App Development Tutorial – Add an Intro View to a Tab Bar App

  1. Tidane says:

    Hello, i’m searching how to make a Tab bar application with a Main menu with 6 buttons…

    Which 4 of them take us to a tab bar with 4 viewcontrollers …

    But I can not reach to make it … Can you help me?

  2. Rich Costello says:

    Thank you for posting this. I have been hung up on this issue for 2 days now and solved it with your help.

    I am doing the same thing you did. Just left a Web Dev position at a Casino company to jump full time into IOS dev.

  3. OrenGeorge says:

    Thanks for the above information ie by giving a brief description and letting the developer know about the iPhone Application.
    Thanks for sharing this..

  4. Martin Watts says:

    The information in your post about iPhone is more interesting. and this info is more useful for the developers to develop the iPhone apps. Thanks for share this valuable info.

  5. Arnie says:

    Hello,

    This is quite interesting tutorial.

    I want to modify a bit. I want to show the Intro View on a tab bar based application with table & content data processed from XML Api. While retrieving the data it takes some time. So I want to display this intro view till data is loaded in the table & same for content view having uilabel & uiscrollview.

    I’ve gone through Activity Indicator tutorial but need to display the Intro View instead.

    Thanks in Advance

  6. Smartjazz says:

    Nice and informative post for beginners. Just visit my website and find interesting iPhone Apps. Here we go: http://www.iphoneapplicationdeveloperindia.com/portfolio.html

  7. Ramon v says:

    Hi,

    Great Tutorial, I’m trying to do this very same thing to my application, however my application uses a navigation controller instead of a tab view controller. How can I apply this to a navigation controller based application?

  8. david says:

    Hi,

    can I use this intro view for a Login kind of functionality?
    e.g., have a Login view.

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>