[Tutorial] Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects

Discussion in 'iOS Development' started by SkylarEC, Jan 30, 2009.

  1. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Alright, it seems that a lot of youse are missing a few steps when it comes to connecting together Xcode and Interface Builder. Hopefully, this will help you see things, and how things work a little better. This tutorial will show you how to create a simple UITabBar based application whose tabs are loaded from separate nib files.


    Download Link: http://www.touchrepo.com/SampleCode/CountAppula.zip



    The first thing you're going to want to do is open a new project. Select a "Tab Based Application" and call it "CountAppula." Be forewarned, when you submit an application to the AppStore, you can't have any spaces in the name. You can change the display name in the Info plist to display "Count Appula" if you feel so inclined.

    Please Register or Log in to view images




    Now, go in Xcode, click on the resources and delete the SecondView.xib. Double click on MainWindow.xib to open it in Interface Builder. Double click the UITabBarController so it appears on the screen. Click on each of its tabs and delete them. Save the xib and close it. This way, we are starting with a clean slate.

    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images




    Now that we're fresh and clean, go back into Xcode and create two new xibs from the file menu. Let them be empty xibs. Call them "FirstView" and "SecondView"

    Please Register or Log in to view images



    Double click on "FirstView" to open it up in Interface Builder. In the Inspector, in the "Class Identity" section, set the class as FirstViewController. I should note here that this file was created for us when we created out template. Feel free to override anything you want via code in FirstViewController.h/m. If you want to subclass any view controller for your tab bar app (and it is highly recommended that you do), this is how you would do it. Easy, huh?

    Please Register or Log in to view images





    Still in the inspector, click on Connections. You'll notice that there is a spot for view. Not everything needs to be connected. View is one of those things that must (or should, to tell you the truth, I've never not connected it) be connected. To set this up, drag a view out of the Library window into the xib's main window. In the inspector, click on the circle next to "view" and drag your mouse over to the view you just created. Once over the view, let go of your mouse button. Congrats, you've just given your view controller a view to control.

    Please Register or Log in to view images


    Please Register or Log in to view images




    Let's give this view a little color. Double click on the view to open it up. In Inspector's "Attributes" section, change the color. Chose Midnight. Now, Let's save this and close.

    Please Register or Log in to view images




    Repeat this process for SecondView. Notice that we didn't set up a subclass for this view. That's okay, we can always go back and take care of that. In the interim, when setting a Class Identity, select UIViewController. Also, set this view's color to EggPlant.

    Please Register or Log in to view images

  2. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Now, you've set up each view controller in a xib. Let's get those view controllers into your tab bar! Reopen MainWindow.xib and double tap the UITabBarController so it opens up in its own window. Once open, drag two UIViewControllers from the Library window directly onto the tab bar. Click the tab bar for each view controller (as it you were selecting it with your finger) to reveal its attributes in the Inspector. You may need to click it twice. Set the Bar Item Title to "First" and "Second" appropriately.

    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images




    Click on each tab again to select the view controller. In the Inspector's Attributes tab, select "FirstView" and "SecondView" appropriately from the "Nib Name" drop down box.

    Please Register or Log in to view images


    Please Register or Log in to view images




    Now, save MainWindow and close out of Interface Builder. Back in Xcode, click on Build and Go, and wait for the app to compile/load/launch. Congrats, you have a working tab bar controlled application that loads each tab from a separate nib, and you didn't have to lay down one single line of code!

    Please Register or Log in to view images

  3. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Now, I'll bet that you would like to expand and see how to add a UINavigationController to your UITabBar. That is actually simpler than it might seem.


    The first thing we're going to want to do is create a UITableViewController. This is going to be the root view controller for our UINavigationController. In Xcode, click on File and add a new file to your app. Select UITableViewController subclass and name it "Steve."

    Please Register or Log in to view images




    In Steve.m, scroll down and find the numberOfRowsInSection and cellForRowAtIndexPath methods. In numberOfRows, change the return value to any other positive integer. We'll use 5. In the cellForRow... method, is where we will define the actual cell. Leave this method mostly the same, but add in a switch based on the indexPath.section variable. In its 0 case, we will set the cell's text to a string displaying which numbered cell it is. Case 0 for indexPath.section refers to the first section in your table. [Any additional sections will require more cases, ie case 1: case 2: case 768:, etc. If you want to set up the cell individually, then within an indexPath.section case, add in another switch based upon indexPath.row. Each case refers to each row , exactly the same way the section switch works.

    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images


    Please Register or Log in to view images




    Save this file and reopen MainWindow.xib.
  4. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    In MainWindow.xib, double click on UITabBarController so it displays in its own window. We need to add one more tab. From the Library window, drag a UINavigationController directly onto the tab bar. We will name this tab Steve. Now, click on the navigation bar so that you can edit the Navigation Item attributes. Set the title to "Steve."

    Please Register or Log in to view images


    Please Register or Log in to view images




    We're nearly done. We need to add a root view controller for our navigation controller. This will be Steve. From the Library window, drag a UITableViewController directly into your UINavigationController. Back in Inspector, set the table view controller's Class Identity as Steve

    Please Register or Log in to view images


    Please Register or Log in to view images




    Now, you are done! You have a tabbed app with view controllers, a nav controller, and a table view controller. Congrats! Where you go form here is entirely up to you. Hopefully I was able to get you started on the right foot.

    Please Register or Log in to view images






    Continue on to PART III: http://www.ifans.com/forums/showthread.php?t=137473
  5. bddckr

    bddckr Active Member

    Joined:
    Dec 2, 2007
    Messages:
    1,434
    Likes Received:
    18
    Device:
    iPhone 4 (Black)
    There's a spelling error in the thread's title:
    [Tutorial] Getting to know Xcode/Interface Builder: UITabBar projects. PARTS I & II
  6. Steaps

    Steaps New Member

    Joined:
    Oct 24, 2007
    Messages:
    5,074
    Likes Received:
    41
    Device:
    iPod touch
  7. iPodTouchDev

    iPodTouchDev New Member

    Joined:
    Jan 18, 2009
    Messages:
    74
    Likes Received:
    0
    Device:
    iPod touch
    Nice Guide! This is off topic, but where'd you get your wallpaper?
  8. cocotutch

    cocotutch Community Development Team Staff Member

    Joined:
    Oct 6, 2008
    Messages:
    1,285
    Likes Received:
    117
    Device:
    5G iPod touch
  9. TheKKKiller

    TheKKKiller New Member

    Joined:
    Dec 30, 2008
    Messages:
    404
    Likes Received:
    0
    Device:
    iPhone 3G (Black)
    Any chance this can be done in Windows?
    Great and well detailed tut btw
  10. iPodTouchDev

    iPodTouchDev New Member

    Joined:
    Jan 18, 2009
    Messages:
    74
    Likes Received:
    0
    Device:
    iPod touch
    It can be accomplished, but you won't be able to use the iPhone SDK.

Share This Page